LINUX, FOSS AND LIBRARY TECHNOLOGY ENTHUSIAST

Wednesday, April 21, 2021

Place a Calendar on Your Koha OPAC

1 comments

Go to Tools - News - New entry


Display location: OpacNavRight (en)

Library: All libraries

Title: OpacNavRight


Then go to tools option - <> Source code,  and paste the code below then save it.


This script got from www.htmlbestcodes.com - Coded by: Krishna Eydat and shared to me by Subeesh Gopinathan


<html>

<head>

</head>

<body>

<center>

<script language="javascript" type="text/javascript">

var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');

var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');


//  DECLARE AND INITIALIZE VARIABLES

var Calendar = new Date();


var year = Calendar.getFullYear();     // Returns year

var month = Calendar.getMonth();    // Returns month (0-11)

var today = Calendar.getDate();    // Returns day (1-31)

var weekday = Calendar.getDay();    // Returns day (1-31)


var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week

var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month

var cal;    // Used for printing


Calendar.setDate(1);    // Start the calendar day at '1'

Calendar.setMonth(month);    // Start the calendar month at now



/* VARIABLES FOR FORMATTING

NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'

      tags to customize your caledanr's look. */


var TR_start = '<TR>';

var TR_end = '</TR>';

var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';

var highlight_end   = '</CENTER></TD></TR></TABLE></B>';

var TD_start = '<TD WIDTH="30"><CENTER>';

var TD_end = '</CENTER></TD>';


/* BEGIN CODE FOR CALENDAR

NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'

tags to customize your calendar's look.*/


cal =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';

cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;

cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';

cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;

cal += TR_start;


//   DO NOT EDIT BELOW THIS POINT  //


// LOOPS FOR EACH DAY OF WEEK

for(index=0; index < DAYS_OF_WEEK; index++)

{


// BOLD TODAY'S DAY OF WEEK

if(weekday == index)

cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;


// PRINTS DAY

else

cal += TD_start + day_of_week[index] + TD_end;

}


cal += TD_end + TR_end;

cal += TR_start;


// FILL IN BLANK GAPS UNTIL TODAY'S DAY

for(index=0; index < Calendar.getDay(); index++)

cal += TD_start + '  ' + TD_end;


// LOOPS FOR EACH DAY IN CALENDAR

for(index=0; index < DAYS_OF_MONTH; index++)

{

if( Calendar.getDate() > index )

{

  // RETURNS THE NEXT DAY TO PRINT

  week_day =Calendar.getDay();


  // START NEW ROW FOR FIRST DAY OF WEEK

  if(week_day == 0)

  cal += TR_start;


  if(week_day != DAYS_OF_WEEK)

  {


  // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES

  var day  = Calendar.getDate();


  // HIGHLIGHT TODAY'S DATE

  if( today==Calendar.getDate() )

  cal += highlight_start + day + highlight_end + TD_end;


  // PRINTS DAY

  else

  cal += TD_start + day + TD_end;

  }


  // END ROW FOR LAST DAY OF WEEK

  if(week_day == DAYS_OF_WEEK)

  cal += TR_end;

  }


  // INCREMENTS UNTIL END OF THE MONTH

  Calendar.setDate(Calendar.getDate()+1);


}// end for loop


cal += '</TD></TR></TABLE></TABLE>';


//  PRINT CALENDAR

document.write(cal);


//  End -->

</script>

</center>

<br/><div style="clear:both"></div>

</body>

</html>


Reference: https://www.htmlbestcodes.com/Calendar.htm

1 comment: