Logic behind creating a custom calendar in jquery and javascript

Question

I am trying to wrap my head around the logic behind a calendar. At the moment, for testing purpose, I have displayed days with a counter (1-31), but 1 starts in the top left corner of the calendar. My question is, what do I need to do to calculate the current months days and display the month's days accordingly. I have included some of my code.

this.RenderCalendar = function () {

        var date = new Date();
        date = new Date(date.getYear(), date.getMonth(), 1);
        month = date.getMonth();

        var calendarHeader = $("<div class=\"calHeader\"></div>");
        var monthLabel = $("<label id=\"calMonth\">" + FRAMEWORK.GetMonthString(month) + "</label>");
        var yearLabel = $("<label id=\"calYear\">" + date.getYear() + "</label>");
        var nextMonth = $("<a href=\"javascript:void(0);\" id=\"nextMonth\" class=\"newMonth nextMonth\" title=\"Next Month\">&gt;&gt;</a>");
        var prevMonth = $("<a href=\"javascript:void(0);\" id=\"prevMonth\" class=\"newMonth previousMonth\" title=\"Previous Month\">&lt;&lt;</a>");

        nextMonth.click(function () {
            var oldTable = $(".calendarTableContainer table").first();
            var newTable = FRAMEWORK.RenderCalendarTableMarkup(month + 1);

            $(".calendarTableContainer").append(newTable);
            $(".calendarTableContainer table").each(function () {
                $(this).css("width", $(this).width() + "px");
            });

            $(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");

            $(".calendarContainer").animate({
                scrollLeft: $("div.calendarContainer").scrollLeft() + ($("div.calendarContainer table").next().width())
            }, 500, function () {
                $(".calendarTableContainer").css("width", "100%");
                oldTable.remove();
                $(".calendarTableContainer table").css("width", "100%");
            });
            var currentMonthIndex = $.inArray($("#calMonth").text(), months);
            $("#calMonth").text(months[currentMonthIndex + 1]);
        });

        prevMonth.click(function () {
            var oldTable = $(".calendarTableContainer table").first();
            var newTable = FRAMEWORK.RenderCalendarTableMarkup(month - 1);

            $(".calendarTableContainer").prepend(newTable);
            $(".calendarTableContainer table").each(function () {
                $(this).css("width", $(this).width() + "px");
            });

            $(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");
            $(".calendarContainer").scrollLeft(oldTable.outerWidth());

            $(".calendarContainer").animate({
                scrollLeft: $("div.calendarContainer").scrollLeft() - ($("div.calendarContainer table").next().width())
            }, 500, function () {
                $(".calendarTableContainer").css("width", "100%");
                oldTable.remove();
                $(".calendarTableContainer table").css("width", "100%");
            });
            var currentMonthIndex = $.inArray($("#calMonth").text(), months);
            $("#calMonth").text(months[currentMonthIndex - 1]);
        });

        calendarHeader.append(nextMonth);
        calendarHeader.append(prevMonth);
        calendarHeader.append(monthLabel);
        calendarHeader.append(yearLabel);
        $("#detailsContainer").append(calendarHeader);

        var calendarContainer = $("<div class=\"calendarContainer\"></div>");
        var calendarTableContainer = $("<div class=\"calendarTableContainer\"></div>");
        calendarContainer.append(calendarTableContainer);

        $("#detailsContainer").append(calendarContainer);
        $(".calendarTableContainer").append(FRAMEWORK.RenderCalendarTableMarkup());

        /*var containerHeight = $("#detailsContainer").height();
        calendarContainer.css("height", containerHeight);
        var calendarHeight = calendarContainer.outerHeight();
        var calHeaderHeight = calendarHeader.outerHeight();
        var calDayOfWeekHeight = $("#trCalDayOfWeekHeader").outerHeight();
        var remainingContainerHeight = calendarHeight - calHeaderHeight - calDayOfWeekHeight;
        $(".calendarContainer tr.trCalWeek").each(function () {
        $(this).css("height", remainingContainerHeight / weekCount);
        });*/
    };

    this.RenderCalendarTableMarkup = function (newMonth) {
        var calendarTable = $("<table id=\"tabCalendar\" class=\"tabCalendarContainer\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\"></table>");
        var calendarDayOfWeekHeader = $("<tr id=\"trCalDayOfWeekHeader\" class=\"trCalDayOfWeek\"></tr>");

        for (var day = 0; day < days.length; day++) {
            var dayOfWeek = $("<td id=\"tdDayName-" + days[day] + "\">" + days[day] + "</td>");
            calendarDayOfWeekHeader.append(dayOfWeek);
        };
        calendarDayOfWeekHeader.find("td").each(function () {
            $(this).css("width", 100 / 7 + "%");
        });
        calendarDayOfWeekHeader.find("td:last").css("border-right", "none");
        calendarTable.append(calendarDayOfWeekHeader);

        weekCount = FRAMEWORK.CountWeeksOfMonth(new Date().getDate(), month, new Date().getYear());
        var dayCount = 1;

        for (var week = 1; week <= weekCount; week++) {
            var calendarWeek = $("<tr id=\"trWeek-" + week + "\" class=\"trCalWeek\"></tr>");
            for (var day = 0; day < 7; day++) {
                var calendarDay = $("<td id=\"tdDay-" + dayCount + "\"><label>" + dayCount + "</label></td>");
                calendarWeek.append(calendarDay);
                if (dayCount <= 30) {
                    dayCount++;
                }
                else { dayCount = 1; }
            };
            calendarWeek.find("td:last").css("border-right", "none");
            calendarTable.append(calendarWeek);
        };

        return calendarTable;
    };

RenderCalendar() gets called on dom ready. Within RenderCalendar, I have next- and previous month buttons which will navigate accordingly with RenderCalendarTableMarkup(), calculate the days and display them accordingly.

Any help please?

Answer 1

why do all this calculating by yourself anyway. Check out http://momentjs.com/