calendar/app/assets/javascripts/calendar_widget.js

 var CalendarModuleMonth = function(date,dom,subpart,url){
    _this = this;
    var template = dom.find(".month_template"),
        monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
        initialDate = date,
        subpartid = subpart,
        index_url = url,
        fetchInterval = null,
        month = date.getMonth(),
        year = date.getFullYear(),
        firstDay = new Date(year,month,1),
        lastDay = new Date(year,month+1,0),
        today = date.getDate(),
        last_inserted_date = 1,
        monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>");
    monthDom.html(template);

    var renderMonth = function(){
        var num_of_rows = getNumberOfRows(year,month),
            head_title = monthDom.find("h4 span.text"),
            table_body =  monthDom.find("table.table tbody");
        table_body.html("");

        for(var i = 0; i < num_of_rows; i++){
            var tr = null;
            if(i == 0){
                tr = makeRow("first");
            }else if(i == (num_of_rows - 1)){
                tr = makeRow("last");
            }else{
                tr = makeRow("middle");
            }
            if(tr == null){
                break;
            }
            table_body.append(tr);
            head_title.text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
        }
          
    }

    var getNumberOfRows = function(year, month) {
        var day = 1,
            sat_counter = 0,
            sunday_counter = 0, 
            date = new Date(year, month, day);

        while(date.getMonth() === month) {
            if(date.getDay() === 0) {
                sunday_counter++;
            }else if(date.getDay() === 6) {
                sat_counter++;
            }
            day++;
            date = new Date(year, month, day);
        }
        return (sunday_counter == 5 && sat_counter == 5 ? 6 : 5);
    }

    var makeRow = function(position){
        if(last_inserted_date <= lastDay.getDate()){
            var row = $("<tr></tr>");
            switch (position){
                case "first":
                    for(var i = 0;i < 7;i++){
                        var td = $("<td></td>");
                        if(i >= firstDay.getDay()){
                           if(today != 0 && last_inserted_date == today){
                              td.attr("class","w-calendar-today");
                            }
                            td.text(last_inserted_date);
                            td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
                            last_inserted_date++;
                        }
                        row.append(td);
                    }
                break;
                case "middle":
                    for(var i = 0;i < 7;i++){
                        var td = $("<td></td>");
                        if(today != 0 && last_inserted_date == today){
                          td.attr("class","w-calendar-today");
                        }
                        td.text(last_inserted_date);
                        td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
                        last_inserted_date++;
                        row.append(td);
                    }
                break;
                case "last":
                    for(var i = 0;i < 7;i++){
                        var td = $("<td></td>");
                        if(i <= lastDay.getDay()){
                            if(today != 0 && last_inserted_date == today){
                              td.attr("class","w-calendar-today");
                            }
                            td.text(last_inserted_date);
                            td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
                            last_inserted_date++;
                        }
                        row.append(td);
                    }
                break;
            }
        }else{
            var row = null;
        }
        return row;
    }

    var fetchEvents = function(){
      var usd = Math.round(firstDay/1000),
          ued = Math.round(lastDay/1000);
      $.ajax({
        url : "/xhr/calendars/agenda",
        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid},
        dataType : "json",
        type : "get"
      }).done(function(data){
        $.each(data.events,function(index,eve){
          var sd = new Date(eve.start),
              ed = new Date(eve.end),
              timeDiff = Math.abs(ed.getTime() - sd.getTime()),
              dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
          if(eve.allDay){
            dayDiff = 1 ;
          }
          if(dayDiff > 0){
            var inserting_date = (sd < firstDay ? 1 : sd.getDate());
            for(i = 0;i <= dayDiff; i++){
              var dt = inserting_date + "-" + month + "-" + year,
                  td = dom.find("td[data-date-node=" + dt + "]");
              td.addClass("w-calendar-event");
              if(index_url != ""){
                td.on("click",function(){
                  window.location.href = "http://" + window.location.host + index_url + '/' + eve.id + '-';
                })
              }
              inserting_date++;
              if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){
                break;
              }
            }
          }else{
            var dt = sd.getDate() + "-" + sd.getMonth() + "-" + sd.getFullYear();
                td = dom.find("td[data-date-node=" + dt + "]");
            td.addClass("w-calendar-event");
          }
        })
        monthDom.find("i.loading").addClass("hide");
      })
    }

    this.currentMonth = function(){
      renderMonth();
      dom.html(monthDom);
      monthDom.find("i.loading").removeClass("hide");
      fetchInterval = setTimeout(fetchEvents,300);
    }

    this.nextMonth = function(){
      clearTimeout(fetchInterval);
      monthDom.find("i.loading").removeClass("hide");
      month++;
      if(month == 12){
        year++;
        month = 0;
      }
      firstDay = new Date(year,month,1);
      lastDay = new Date(year,month+1,0);
      today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
      last_inserted_date = 1;
      renderMonth();
      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
      fetchInterval = setTimeout(fetchEvents,1000);
    }

    this.prevMonth = function(){
      clearTimeout(fetchInterval);
      monthDom.find("i.loading").removeClass("hide");
      month--;
      if(month == -1){
        year--;
        month = 11;
      }
      firstDay = new Date(year,month,1);
      lastDay = new Date(year,month+1,0);
      today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
      last_inserted_date = 1;
      renderMonth();
      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
      fetchInterval = setTimeout(fetchEvents,1000);

    }
}