Simple Calendar jQuery Plugin

Language: JavaScript

(function($) {
  function firstOfMonth(d) {
    return new Date(d.getFullYear(), d.getMonth(), 1);
  }
  
  function sameDate(d1, d2) {
    return d1.getFullYear() == d2.getFullYear() &&
      d1.getMonth() == d2.getMonth() &&
      d1.getDate() == d2.getDate();
  }
  
  function renderCalendar(dateForMonth, selectedDate) {
    function dayOfWeekHeaders() {
      var dayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
      output.push('<tr>');
      for (var i = 0; i < 7; i++) {
        output.push('<th>');
        output.push(dayLabels[i]);
        output.push('</th>');
      }
      output.push('</tr>');
    }

    function blankDaysBeforeFirst(dateForFirst) {
      for (var i = 0; i < dateForFirst.getDay(); i++) {
        output.push('<td></td>');
      }
    }

    function blankDaysAfterLast(dayOfWeek) {
      if (dayOfWeek != 6) {
        for (var i = dayOfWeek; i < 6; i++) {
          output.push('<td></td>');
        }
        output.push('</tr>');
      }
    }

    function dayCell(date) {
      if (sameDate(date, selectedDate)) {
        output.push('<td class="selected">');
        output.push(d.getDate());
        output.push('</td>');
      } else {
        output.push('<td><a href=#>');
        output.push(d.getDate());
        output.push('</a></td>');
      }
    }

    var output = [];
    output.push('<table class="calendar">');
    dayOfWeekHeaders();
    output.push('<tr>');
    blankDaysBeforeFirst(dateForMonth);
    var currentMonth = dateForMonth.getMonth();
    var d = firstOfMonth(dateForMonth);
    while (d.getMonth() == currentMonth) {
      var dayOfWeek = d.getDay();
      if (dayOfWeek == 0 && d.getDate() != 1) {
        output.push('<tr>');
      }
      dayCell(d);
      if (dayOfWeek == 6) {
        output.push('</tr>');
      }
      d.setDate(d.getDate() + 1);
    }
    d.setDate(d.getDate() - 1); // Go back to last day of month...
    blankDaysAfterLast(d.getDay());
    output.push('</table>');
    return output.join('');
  }
  
  $.fn.calendar = function() {
    return this.each(function() {
      var $cal = $(this);
      var selectedDate = new Date();
      var displayedMonthDate = firstOfMonth(selectedDate);
      var renderHtml = function() {
        $cal.html(renderCalendar(displayedMonthDate, selectedDate));
        $("a", $cal).click(function(ev) {
          var dayOfMonth = parseInt($(this).text());
          selectedDate = new Date(
            displayedMonthDate.getFullYear(),
            displayedMonthDate.getMonth(),
            dayOfMonth
          );
          renderHtml();
          $cal.trigger('selectedDateChanged', [selectedDate]);
        });
      };
      $cal.bind('showPrevMonth', function() {
        var month = displayedMonthDate.getMonth() - 1;
        displayedMonthDate.setMonth(month);
        renderHtml();
        $cal.trigger('monthChanged', [displayedMonthDate]);
      });
      $cal.bind('showNextMonth', function() {
        var month = displayedMonthDate.getMonth() + 1;
        displayedMonthDate.setMonth(month);
        renderHtml();
        $cal.trigger('monthChanged', [displayedMonthDate]);
      });
      $cal.bind('setSelectedDate', function(ev, date) {
        selectedDate = date;
        renderHtml();
        $cal.trigger('selectedDateChanged', [selectedDate]);
      });
      renderHtml();
    });
  };
})(jQuery);
Reveal More
Added 3 months ago by Segal_normal zdzolton