About Me

My photo
a Dynamic and Energetic guy.....

Sunday, October 19, 2014

SharePoint Calendar Using HTML




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>

No comments:

My Masters