In this article, I will try to place a calendar on the koha staff interface. This calendar will display to all staff who log in to their staff interface account.
1. Place a Google Calendar
You can customize the calendar to show the task, events, holidays, etc.
Open your Google Calendar
Click on the gear button on the top right side and open the setting.
On the left side of the screen, click the name of the calendar under the " settings for my calendars" tab, which you want to add to the staff interface
Next, in the "Integrate calendar" section, click on the "customize" button
Under the embed code, click on Customize button
1. Enter the name of the calendar
2. Tick the particulars which you want to show in the calendar
3. Enter the width 300 and height 300 as well
4. Choose the preferred background color for the calendar
5. select the calendar view, Language timezone, etc.
6. Choose what to display in the calendar (e.g. birthday, holidays, etc.)
7. And at the end, copy the embedded code from the top of the screen
Now, we need to add this embedded code to the 'news tools' in koha
Koha home➔ Tools News ➔New entry ➔Select 'Librarian Interface'
If you have added other items in the staff interface then you need to enter the position value for each item
Enter the name of the title and then add the copied code to the News section
Click on the save button.
Now refresh the page and see the Calendar on the Staff Interface.
2. Place a basic calendar
This is a basic calendar that will show the year, month, and today's day, in conventional format.
Copy and paste the following script in the 'librarian interface' under the "news tools" in the same way as we have placed 'Google Calendar'. The script has been taken from 'www.htmlbestcodes.com' that is written by Mr. Krishna Eydat.
<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=3 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>
Now you will see the Calendar on the Staff Interface.
References:- https://www.htmlbestcodes.com/Calendar.htm
https://bywatersolutions.com/education/adding-a-calendar-to-the-koha-staff-interface
0 Comments