Posted By

jatkins on 10/26/11


Tagged

time calendar date


Versions (?)

Calendar Generator (JavaScript)


 / Published in: JavaScript
 

Released into the public domain.

  1. function find_index(array, string) {
  2. var i = 0;
  3. for(i=0;i<array.length;i++) {
  4. if(array[i]==string) break;
  5. }
  6. return array[i] == string ? i : -1;
  7. }
  8.  
  9. function days_in_month(month, year) {
  10. if(month!=2) {
  11. if(month==9||month==4||month==6||month==11)
  12. return 30;
  13. else
  14. return 31;
  15. }
  16. else
  17. return year%4==""&&year%100!="" ? 29 : 28;
  18. }
  19.  
  20. months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  21. day_names = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  22.  
  23. function render_month(for_month, for_year, direction, direction_to_change, marked_days) { // for direction, 0/undefined = specified month, 1 = next month, -1 = last month
  24. if(typeof for_month=='undefined'||typeof for_year=='undefined')
  25. currentDate = new Date();
  26. if(typeof for_month=='undefined')
  27. for_month = currentDate.getMonth() + 1;
  28. if(typeof for_year=='undefined')
  29. for_year = currentDate.getFullYear();
  30. if(typeof direction=='undefined') direction = 0;
  31. date_for_calendar_for_month = new Date(for_year, for_month-1, 1);
  32. if(direction_to_change=='month')
  33. date_for_calendar_for_month.setMonth(for_month-1+direction);
  34. else if(direction_to_change=='year')
  35. date_for_calendar_for_month.setYear(for_year+direction);
  36. if(direction!=0) {
  37. for_month = date_for_calendar_for_month.getMonth() + 1;
  38. for_year = date_for_calendar_for_month.getFullYear();
  39. }
  40.  
  41. thead_tr = document.createElement('tr'); // render the day headings
  42. thead = document.createElement('thead');
  43. for(day in day_names)
  44. thead_tr.appendChild(generateElement('th', null, null, day_names[day]));
  45. thead.appendChild(thead_tr);
  46.  
  47. tbody = document.createElement('tbody');
  48. this_month = months[for_month-1];
  49. calendar_for_month = generateElement('table', [['class', 'calendarMonth bm'+for_month+'y'+for_year+'e']], [generateElement('caption', null, null, this_month + ' ' + for_year), thead, tbody]);
  50. day_of_the_week = date_for_calendar_for_month.getDay(); // get the day the week starts on (0 = Sun, 6 = Sat)
  51. date_for_calendar_for_month.setMonth(date_for_calendar_for_month.getMonth()-1);
  52. days_in_last_month = days_in_month(date_for_calendar_for_month.getMonth() + 1, date_for_calendar_for_month.getFullYear());
  53. if(day_of_the_week==0)
  54. day_of_the_week = 7; // convert to format used by PHP (1 = Mon, 7 = Sun)
  55. week_tr = document.createElement('tr');
  56. last_month = months[date_for_calendar_for_month.getMonth()];
  57. year_last_month = date_for_calendar_for_month.getFullYear();
  58. for(var n=1;n<day_of_the_week;n++) {
  59. day_of_the_month = days_in_last_month - (day_of_the_week - n - 1);
  60. week_tr.appendChild(generateElement('td', [find_index(marked_days, year_last_month + 'm' + (date_for_calendar_for_month.getMonth()+1) + 'd' + day_of_the_month) != -1 ? ['style', 'background: #fcf;'] : null, ['class', 'previousMonth'], ['title', last_month + ' ' + day_of_the_month + ', ' + year_last_month]], null, day_of_the_month)); // pad row with empty cells until the first day
  61. }
  62. days = days_in_month(for_month, for_year); // get the number of days in the month
  63. day = 0;
  64. while(day<days) {
  65. if(day_of_the_week==8) {
  66. if(day != 0) {
  67. tbody.appendChild(week_tr); // add the previous week to the tbody
  68. week_tr = document.createElement('tr'); // create the tr for the new week
  69. }
  70. day_of_the_week = 1; // reset day of the week to Monday
  71. }
  72. week_tr.appendChild(generateElement('td', [find_index(marked_days, for_year + 'm' + for_month + 'd' + (day+1)) != -1 ? ['style', 'background: #fcf;'] : null, ['title', this_month + ' ' + (day+1) + ', ' + for_year]], null, day+1)); // add the cell for the day
  73. day_of_the_week++; // increment day of the month
  74. day++; // increment date
  75. }
  76. date_for_calendar_for_month.setMonth(date_for_calendar_for_month.getMonth() + 2); // increment month
  77. next_month = months[date_for_calendar_for_month.getMonth()];
  78. year_next_month = date_for_calendar_for_month.getFullYear();
  79. for(var n=day_of_the_week;n<=7;n++) {
  80. day_of_the_month = n + 1 - day_of_the_week;
  81. week_tr.appendChild(generateElement('td', [find_index(marked_days, year_next_month + 'm' + (date_for_calendar_for_month.getMonth()+1) + 'd' + day_of_the_month) != -1 ? ['style', 'background: #fcf;'] : null, ['class', 'nextMonth'], ['title', next_month + ' ' + day_of_the_month + ', ' + year_next_month]], null, day_of_the_month)); // pad row with empty cells until the end of the row
  82. }
  83. tbody.appendChild(week_tr); // add last week to tbody
  84. calendar_for_month.appendChild(tbody); // add tbody
  85. return calendar_for_month; // return table for month
  86. }
  87.  
  88. function change_calendar_date(navigationButton, direction_to_change, back, marked_days) {
  89. thisCalendar = navigationButton.parentNode.parentNode.nextSibling;
  90. thisCalendarDate = thisCalendar.className.match(/bm[0-9]{1,2}?y[0-9]{4}?e/)[0].substring(1).split('y');
  91. newCalendar = render_month(parseInt(thisCalendarDate[0].substring(1)), parseInt(thisCalendarDate[1].substring(0, thisCalendarDate[1].length-1)), typeof back != 'undefined' && back == true ? -1 : 1, direction_to_change, marked_days);
  92. thisCalendar.parentNode.replaceChild(newCalendar, thisCalendar);
  93. return false;
  94. }
  95.  
  96. function render_calendar(start_month, start_year, marked_days) { // marked_days is an array of strings representing dates in the form YYYYmMdD (e.g. April 8, 2011 is 2011m4d8; October 26, 2011 is 2011m10d26 -- basically, leave off leading zeroes)
  97. if(typeof start_month=='undefined'||start_month==null||typeof start_year=='undefined'||start_year==null)
  98. currentDate = new Date();
  99. if(typeof start_month=='undefined'||start_month==null)
  100. start_month = currentDate.getMonth() + 1;
  101. if(typeof start_year=='undefined'||start_year==null)
  102. start_year = currentDate.getFullYear();
  103.  
  104. calendarNavigation = document.createElement('ul');
  105. marked_days = '\'' + marked_days.join('\',\'').replace(/[^0-9\,\'md]/g, '') + '\'';
  106. navigationButtons = [generateElement('a', [['href', '#'], ['onclick', 'return change_calendar_date(this, \'month\', false, ['+marked_days+']);']], null, '&rsaquo;'),
  107. generateElement('a', [['href', '#'], ['onclick', 'return change_calendar_date(this, \'year\', false, ['+marked_days+']);']], null, '&raquo;'),
  108. generateElement('a', [['href', '#'], ['onclick', 'return change_calendar_date(this, \'year\', true, ['+marked_days+']);']], null, '&laquo;'),
  109. generateElement('a', [['href', '#'], ['onclick', 'return change_calendar_date(this, \'month\', true, ['+marked_days+']);']], null, '&lsaquo;')];
  110. for(navigationButton in navigationButtons)
  111. calendarNavigation.appendChild(generateElement('li', [['class', 'navigationButton'+navigationButton]], [navigationButtons[navigationButton]]));
  112.  
  113. calendar = generateElement('div', [['class', 'calendar']], [calendarNavigation, render_month(start_month, start_year, null, null, marked_days)]);
  114. return calendar.outerHTML;
  115. }

Report this snippet  

You need to login to post a comment.