When we need a CALEDAR
runs on SharePoint. We can simply use a HTML calendar.
It will display whole
month, highlight the CUREENT date.
Whet we have to do is,
1) Add a SCRIPT EDITOR to SharePoint
page
2) Add following code snippet and save
it.
<html>
<title>www.scriptSplash.com => javaScript - Basic
Calendar</title>
<head>
<style type="text/css">
.calendarTable {
background-color:#eee;
color:#333;
border: 1px solid #bbb;
}
.calendarTable td {
text-align: center;
padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
font-weight: bold;
border: 1px solid #bbb;
background-color:#ddd;
}
.calendarTable td.weekDay {
font-weight: bold;
}
.calendarTable td.monthDay {
border: 1px solid #ddd;
}
.calendarTable td.currentDay {
font-weight: bold;
color:#ad5;
border: 1px solid #aaa;
}
</style>
<script type="text/javascript"
language="javascript">
/** Function to display a Calendar based on javascript. **/
function calendar() {
// Get the current date
parameters.
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new
Array('January','February','March','April','May','June','July','August','September','October','November','December');
var monthDays = new
Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new
Array('Mo','Tu','We','Th','Fr','Sa','Su');
var days_in_this_month =
monthDays[month];
// Create the basic Calendar
structure.
var calendar_html = '<table
class="calendarTable">';
calendar_html +=
'<tr><td class="monthHead" colspan="7">' +
months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new
Date(year, month, 1).getDay();
for(week_day= 0; week_day <
7; week_day++) {
calendar_html += '<td
class="weekDay">' + weekDay[week_day] + '</td>';
}
calendar_html +=
'</tr><tr>';
// Fill the first week of the
month with the appropriate number of blanks.
for(week_day = 0; week_day
< first_week_day; week_day++) {
calendar_html += '<td>
</td>';
}
week_day = first_week_day;
for(day_counter = 1;
day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html +=
'</tr><tr>';
// Do something different
for the current day.
if(day == day_counter) {
calendar_html += '<td
class="currentDay">' + day_counter + '</td>';
} else {
calendar_html += '<td
class="monthDay"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html +=
'</tr>';
calendar_html +=
'</table>';
// Display the calendar.
document.write(calendar_html);
}
</script>
</head>
<body>
<h2> Basic Calendar
</h2>
<br/>
<script
type="text/javascript">calendar();</script>
</body>
</html>
