Calendar

This script displays a perpetual javascript calendar, you can include ajax calls to update the days links

Examples of use

Download it

The code

  1.  
  2. /*
  3. AJAX Calendar
  4. By Rene Lopez Caballero  <http://www.mywebexperiences.com/javascript/calendar/>
  5. Copyright (c) 2008 Rene Lopez Caballero
  6. Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
  7. */
  8. function RLCalendar(id, month, year) { this.init(id, month, year); }
  9. RLCalendar.prototype = {
  10.         init: function(id, month, year) {
  11.                 this.monthsTitles = [‘January’,‘February’,‘March’,‘April’,‘May’,‘June’,‘July’,‘August’,‘September’,‘October’,‘November’,‘December’];
  12.                 this.daysTitles = [‘S’,‘M’,‘T’,‘W’,‘T’,‘F’,‘S’];
  13.                 this.dayURL = ”,
  14.                 this.monthURL = ”,
  15.                 this.selectedDays = [];
  16.                 this.id = id;
  17.                 var currentDate = new Date();
  18.                 this.selectedMonth = this.currentMonth = currentDate.getMonth();
  19.                 this.selectedYear = this.currentYear = currentDate.getFullYear();
  20.                 this.selectedDay = this.currentDay = currentDate.getDate();
  21.                 this.setMonth(month);
  22.                 this.setYear(year);
  23.                 window.rlc_calendars[this.id]=this;
  24.         },
  25.         getHTML: function(id, month, year) {
  26.                 var i, htmlCal, previousMonth, nextMonth, previousYear, nextYear, htmlDia;
  27.                 var ap = new Date( this.calendarYear, this.calendarMonth, 1 );
  28.                 previousMonth = (this.calendarMonth==0) ? 11 : this.calendarMonth – 1;
  29.                 previousYear = (this.calendarMonth==0) ? this.calendarYear-1 : this.calendarYear;
  30.                 nextMonth = (this.calendarMonth==11) ? 0 : this.calendarMonth + 1;
  31.                 nextYear = (this.calendarMonth==11) ? this.calendarYear + 1 : this.calendarYear;
  32.                 var htmlCal = "<table id=’" + this.id + "’>";
  33.                 htmlCal += "<caption>"
  34.                 htmlCal += "<a href=\"javascript:window.rlc_calendars['"+this.id+"'].update("+(previousMonth+1)+","+previousYear+")\">< </a>";
  35.                 htmlCal += this.monthsTitles[this.calendarMonth] + " " + this.calendarYear;
  36.                 htmlCal += "<a href=\"javascript:window.rlc_calendars['"+this.id+"'].update("+(nextMonth+1)+","+nextYear+")\"> ></a>";
  37.                 htmlCal += "</caption><thead><tr>";
  38.                 for( i=0;i<7;i++)
  39.                         htmlCal+="<th>"+this.daysTitles[i]+"</th>";
  40.                 htmlCal+="</tr></thead>";
  41.                 htmlCal+="<tbody>";
  42.                 if( ap.getDay() != 0 )
  43.                         htmlCal+="<tr>";
  44.                 for( i=0;i<ap.getDay();i++)
  45.                         htmlCal+="<td> </td>";
  46.                 i=1;
  47.                 var dayOfTheWeek;
  48.                 do{
  49.                         dayOfTheWeek = ap.getDay();
  50.                         if (ap.getDay() == 0)
  51.                                 htmlCal+="<tr>";
  52.                         if( !this.isEmpty( this.dayURL ) && this.inArray( i ,this.selectedDays ) )
  53.                                 htmlDia = "<a href=’"+ this.parseDayURL( ap.getDate(), ap.getMonth()+1, ap.getFullYear() ) +"’>" + i + "<a>";
  54.                         else
  55.                                 htmlDia = i;
  56.                         if( ( ap.getDate() == this.selectedDay ) && ( this.calendarMonth == this.selectedMonth ) && ( this.calendarYear == this.selectedYear ) )
  57.                                 htmlCal+="<td id=’today’>"+htmlDia+"</td>";
  58.                         else
  59.                                 htmlCal+="<td>"+htmlDia+"</td>";
  60.                         if( dayOfTheWeek == 6)
  61.                                 htmlCal+="</tr>";
  62.                         i++;
  63.                         ap.setDate(i);
  64.                 } while( ( i< 32 ) && (i == ap.getDate() ) );
  65.                 if( i>0 ) {
  66.                         for( i=dayOfTheWeek; i<6; i++ )
  67.                                 htmlCal+="<td> </td>";
  68.                         htmlCal+="</tr>";
  69.                 }
  70.                 htmlCal+="</tbody></table>";
  71.                 return htmlCal;
  72.         },
  73.         update: function(month, year){
  74.                 this.setMonth(month);
  75.                 this.setYear(year);
  76.                 if( !this.isEmpty( this.monthURL ) && ( new Date( this.calendarYear, this.calendarMonth, 1 ) <= new Date( this.currentYear, this.currentMonth, 1 ) ) ){
  77.                         var cal = this;
  78.                         new Ajaxito( this.parseMonthURL( this.calendarMonth, this.calendarYear ),function( resp ){
  79.                                 cal.setSelectedDays(eval(resp.responseText));
  80.                                 document.getElementById(cal.id).parentNode.innerHTML = cal.getHTML();
  81.                         } );
  82.                 } else {
  83.                         this.setSelectedDays([]);
  84.                         document.getElementById(this.id).parentNode.innerHTML = this.getHTML();
  85.                 }
  86.         },
  87.         setMonth: function(month){ this.calendarMonth = (month==undefined) ? this.currentMonth : (month-1); },
  88.         setYear: function(year){ this.calendarYear = year||this.currentYear; },
  89.         setSelectedDay: function(day, month, year) {
  90.                 this.selectedDay = day||this.currentDay;
  91.                 this.selectedMonth = month||this.currentMonth;
  92.                 this.selectedYear = year||this.currentYear;
  93.         },
  94.         setDayURL: function(url){ this.dayURL = url; },
  95.         setDaysTitles: function(titles){ this.daysTitles = titles; },
  96.         setMonthURL: function(url){ this.monthURL = url; },
  97.         setMonthsTitles: function(titles){ this.monthsTitles = titles; },
  98.         setSelectedDays: function(days) { this.selectedDays = days; },
  99.         parseMonthURL: function(month, year){
  100.                 return this.monthURL.replace( /%monthnum%/gi, this.zeroise(month+1) ).replace( /%year%/gi, year );
  101.         },
  102.         parseDayURL: function(dia, month, year){
  103.                 return this.dayURL.replace( /%day%/gi, this.zeroise(dia) ).replace( /%monthnum%/gi, this.zeroise(month) ).replace( /%year%/gi, year );
  104.         },
  105.         print: function(){ document.write(  "<div>" + this.getHTML() + "</div>" ); },
  106.         isEmpty:function(value) { return /^\s*$/.test( value ); },
  107.         inArray:function(value, array) {       
  108.                 for(var i=0; i<array.length; i++) if(array[i] == value) return true;
  109.                 return false;
  110.         },
  111.         zeroise:function(value) { return (value>9)?value:(‘0′+value); }
  112. }
  113. function Ajaxito(url, callback) {
  114.         this.onStateChange = function(){
  115.                 if (this.transport.readyState == 4 && this.transport.status == 200) {
  116.                         if (this.callback) setTimeout(this.bind(function(){this.callback(this.transport);},this), 10);
  117.                         this.transport.onreadystatechange = function(){};
  118.                 }
  119.         }
  120.         this.bind = function(caller,obj){ return function(){ return caller.apply(obj,arguments); } }
  121.         this.transport = window.ActiveXObject ? new ActiveXObject(‘Microsoft.XMLHTTP’) : ( window.XMLHttpRequest ? new XMLHttpRequest() : false )
  122.         this.callback = callback || null;
  123.         this.transport.open(‘get’, url, true);
  124.         this.transport.onreadystatechange = this.bind(this.onStateChange,this);
  125.         this.transport.send(”);
  126. }
  127.  
  128. window.rlc_calendars = {};
  129.