www/js/jqueryhcal/jqueryhcal.js

   1 /* CONFIG/ GLOBALS */
   2
   3 var dayNames = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
   4 var dayAbbrevs = new Array("S", "M", "T", "W", "T", "F", "S");
   5 var monthNames = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
   6 var monthLength = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
   7
   8 var firstDayOfWeek = 0;
   9 var DEBUG = 1;
  10 var globalDateHash = new Object();
  11
  12 /************************************** helper functions ************************/
  13 function debug(message) {
  14   if (DEBUG)
  15     alert(message);
  16 }
  17
  18 /* Trims the starting zero off of a number to ensure JS gets a regular int, not an octal */
  19 function trimStartingZero(number) {
  20         number = (number + '');
  21         if (number.substring(0,1) == "0") {
  22                 number = number.substring(1,number.length)
  23         }
  24         return parseInt(number);
  25 }
  26 /* parses datetime */
  27 function parseDT(dt) {
  28         var dtText;
  29         var result;
  30         if ($(dt).attr('title')) {
  31                 dtText = $(dt).attr('title');
  32         } else {
  33                 dtText = $(dt).children([0]).html();
  34         }
  35         if (dtText != null) {
  36                 result = dtText.match( /^(\d{4})(\d{2})(\d{2})/ );
  37         }
  38         if (result == null) {
  39         //      debug("didn't recognize DT: " + dtText);
  40                 return
  41         }
  42         return [result[1], result[2], result[3]];
  43 }
  44
  45 // TODO deal with leap year
  46 getMonthLength = function(year, month) {
  47   return monthLength[month - 1];
  48 }
  49 /*********************************************************************
  50 **      First: check for abilities and readiness
  51 **      Second: find events (.vevent), process and add to globalDateHash
  52 **      Third: make month tables and append to page
  53 **********************************************************************/
  54 function findHCalendarEvents () {
  55   if (!(document.getElementById && document.createElement)) {
  56     debug("No DOM!");
  57     return;
  58   }
  59   if ($('#jhCalendar') == null) {
  60     debug("jhCalendar not found!")
  61     return;
  62   }
  63
  64   $('.vevent').each(function() {
  65         var eventHash = {};
  66         var startDateInfo;
  67         var endDateInfo;
  68         eventHash.summary = $(this).find(".summary, :first").html();
  69         eventHash.description = $(this).find(".description").html();
  70         eventHash.time = $(this).find(".time, :first").html();
  71         startDateInfo = parseDT($(this).children(".dtstart"));
  72
  73         endDateInfo = parseDT($(this).children(".dtend"));
  74         if (endDateInfo == null) {
  75                 endDateInfo = [[startDateInfo[0]],[startDateInfo[1]],[startDateInfo[2]]];
  76         }
  77         var startDate = startDateInfo[2];
  78         var endDate = endDateInfo[2];
  79
  80         // handle events that span months:
  81         // If event goes into next month, grab end of this month and add event until then.
  82         // If event starts in previous month, grab start of month and add event till end date.
  83         if ((startDateInfo[0] < endDateInfo[0]) || (endDateInfo[0] > endDateInfo[0])
  84                         || (startDateInfo[1] < endDateInfo[1]) || (endDateInfo[1] > startDateInfo[1])) {
  85                 endDate = getMonthLength(startDateInfo[0], startDateInfo[1]);
  86                 addEventHashToGlobalDateHash(eventHash, startDateInfo, startDate, endDate);
  87
  88                 startDate = 1;
  89                 endDate = parseInt(endDateInfo[2]);
  90                 addEventHashToGlobalDateHash(eventHash, endDateInfo, startDate, endDate);
  91         }
  92         //For events that are within a single month, just populate the event days normally.
  93         else {
  94                 addEventHashToGlobalDateHash(eventHash, startDateInfo, startDate, endDate);
  95         }
  96         return;
  97   });
  98
  99   for (year in globalDateHash) {
 100     for (month in globalDateHash[year]) {
 101       var mt = makeMonthTable(globalDateHash[year][month], year, month);
 102       $('#jhCalendar').append(mt);
 103     }
 104   }
 105 }
 106
 107
 108 /**
 109  * Adds EventHash Object representing Event Data on a specific Day to the GlobalDateHash Object.
 110  * If the startDateDay and endDateDay are not equal, the event will be added to all Days in between.
 111  */
 112 function addEventHashToGlobalDateHash(eventHash, dateInfo, startDate, endDate) {
 113         // ParseDT returns an Array with three parts:
 114         // First [0] is the Year, Second [1] is the Month, Third [2] is the Day.
 115         //  If the startDate is not equal to endDate, it's a multi-day event and we must loop through
 116         // and add the event for each day in the span globalDateHash.
 117         for (var i = trimStartingZero(startDate); i <= trimStartingZero(endDate); i++) {
 118                 // If the Year doesn't exist in the globalDateHash, add Object for it.
 119                 if (globalDateHash[ dateInfo[0] ] == null) {
 120                         globalDateHash[ dateInfo[0] ] = new Object();
 121                 }
 122                 // If the Month doesn't exist in the globalDateHash, add Object to represent it.
 123                 if (globalDateHash[ dateInfo[0] ][ dateInfo[1] ] == null) {
 124                         globalDateHash[ dateInfo[0] ][ dateInfo[1] ] = new Object();
 125                 }
 126                 // If the Day doesn't exist in the globaDateHash, add Array to store Events on this day.
 127                 if (globalDateHash[ dateInfo[0] ][ dateInfo[1] ][ i ] == null) {
 128                         globalDateHash[ dateInfo[0] ][ dateInfo[1] ][ i ] = new Array();
 129                 }
 130                 // Add this Event to the Array List of Events for this Day.
 131                 globalDateHash[ dateInfo[0] ][ dateInfo[1] ][ i ].push(eventHash);
 132         }
 133 }
 134
 135 //Create Table of the specified Month for the specified Year, with events.
 136 function makeMonthTable (monthHash, year, month) {
 137   currentMonthLength = getMonthLength(year, month);
 138   previousMonthLength = getMonthLength(year, month-1);
 139   var today = new Date;
 140   var todayYear = today.getFullYear();
 141   var todayMonth = today.getMonth() + 1;
 142   var todayDay = today.getDate();
 143   var days = new Array(currentMonthLength+1); // We are going to index this array starting at 1.  Because I said so.
 144
 145   // Create an HTML Table to Represent the Month and set necessary Attributes.
 146   var monthTable =  document.createElement('table');
 147   $(monthTable).addClass('calTable');
 148
 149  // Create thead with rows for month/year, full day names and abbreviated day names
 150   var thead = document.createElement("thead");
 151   $(monthTable).append(thead);
 152
 153   var titleRow = document.createElement('tr');
 154   $(thead).append(titleRow)
 155
 156   var titleTH = document.createElement('th')
 157   $(titleRow).append($(titleTH).addClass('calHeader').attr("colspan", 7));
 158   $(titleTH).html(monthNames[trimStartingZero(month)-1] + " " + year);
 159
 160
 161   var headerRow = document.createElement('tr');
 162         for (var i = 0; i < dayNames.length; i++) {
 163                 $(headerRow).html($(headerRow).html() + '<th scope="col" >' + dayNames[i] + '</th>');
 164         }
 165   $(thead).append($(headerRow).addClass('longDays'));
 166
 167   var abbrevHeaderRow = document.createElement('tr');
 168         for (var i = 0; i < dayAbbrevs.length; i++) {
 169                 $(abbrevHeaderRow).html($(abbrevHeaderRow).html() + '<th scope="col" >' + dayAbbrevs[i] + '</th>');
 170         }
 171   $(thead).append($(abbrevHeaderRow).addClass('abbrevDays'));
 172
 173   // create tbody and fill with days
 174   var tbody = document.createElement("tbody");
 175   $(monthTable).append(tbody);
 176
 177   for (var i = 1; i <= currentMonthLength; i++) {
 178     days[i] = document.createElement('td');
 179     if (todayYear == year && todayMonth == month && todayDay == i) {
 180       days[i].className += ' calDayToday';
 181     }
 182     $(days[i]).append('<div class="calDayLabel">' + i + '</div>');
 183   }
 184
 185   // populate days here
 186
 187   for (var day in monthHash) {
 188     var eventString = '';
 189     for (var i = 0; i < monthHash[day].length; i++) {
 190       dayTD = days[day-0];
 191         $(dayTD).addClass('calEventDay');
 192         eventString += '<p><strong>' + monthHash[day][i].summary + '</strong> ';
 193         if (monthHash[day][i].description) {
 194                 eventString += monthHash[day][i].description;
 195         }
 196         eventString += '</p>';
 197         $(dayTD).append('<div class="event">' + eventString + '</div>');
 198     }
 199
 200   }
 201   var dateToCheck = new Date();
 202   dateToCheck.setYear(year);
 203   dateToCheck.setDate(1);
 204   dateToCheck.setMonth(month-1);
 205   var dayOfFirstOfMonth = dateToCheck.getDay();
 206
 207   var row = tbody.appendChild(document.createElement("tr"));
 208   // Loop through empty Days before first Day of Month and fill with 'outOfRange' Cells.
 209         for (var i = 0; i < dayOfFirstOfMonth; i++) {
 210                 $(row).append('<td class="outOfRange"><div class="calDayLabel"> ' + (previousMonthLength - (dayOfFirstOfMonth - i-1)) + '</div></td>');
 211         }
 212
 213   for (var i = 1; i <= currentMonthLength; i++) {
 214     if (row.childNodes.length == 7) {
 215       row = tbody.appendChild(document.createElement("tr"));
 216     }
 217     if(row.childNodes.length == 0 ||row.childNodes.length == 6){
 218         $(days[i]).addClass('weekend');
 219         }
 220     row.appendChild(days[i]);
 221   }
 222   // fill in next month's days to end
 223   newmonth = 1;
 224   while (row.childNodes.length < 7) {
 225       $(row).append('<td class="outOfRange"><div class="calDayLabel">' + newmonth + '</div></td>');
 226         newmonth++;
 227   }
 228   return monthTable;
 229 }
 230
 231 $(document).ready(findHCalendarEvents);