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?

If it is just for fun it is okay, otherwise if it is for professional purpose I think you should use jQuery datepicker plugin I suppose. Not sure but I think it is good. — Dhruvenkumar Shah
– Dhruvenkumar Shah, Commented Aug 27, 2012 at 13:48
Thanks for the comment, the calendar will have some additional functionality attached, for example, a day can be clicked which will allow you to complete the details of an event. I'm not sure if the datepicker will grant me that kind of functionality. — Rudolf Lamprecht
– Rudolf Lamprecht, Commented Aug 27, 2012 at 14:17

Odif Yltsaeb · Accepted Answer · 2012-08-27 13:49:19Z

4

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

answered Aug 27, 2012 at 13:49

Odif Yltsaeb

5,68614 gold badges55 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rudolf Lamprecht Over a year ago

Thanks for the link, I will have a look, but still, any advise on doing something from scratch?

Odif Yltsaeb Over a year ago

well basic logic is like that - take one day, subtract one month from that date and then see how many days are in that subtracted period.

Rudolf Lamprecht Over a year ago

That part I understand, my question would be regarding the rendering of the new set of days. When you look at a calendar, the first day doesn't always start on a Sunday in the first block. There might be days of the previous month displayed, and then days of the following month in the same calendar month. I hope I am explaining myself correctly?

Odif Yltsaeb Over a year ago

Well. That information is actually dependant on your computer date and time settings. for example - if your computer date is wrong, then doing new Date() in browser console will show incorrect date (correct accoring to the computer though). In any case - the correct weekday you can get by .getDay() method. To understand which day should be first day of the block though is also quite easy: get first day of the month. Figure out what day it is (by .getDay()), then subtract that amount of days from first day of the month and voila - you get the date which the week begins with.

Rudolf Lamprecht Over a year ago

Another way would be to use new Date(date.getYear(), date.getMonth(), 1). That will get the first day of the month, which you can then use to calculate how many days before and after the month's total days should be displayed. For example, lets use 01 August 2012. First day of the month was a Wednesday, so it's day 4 (array count from 0)

Collectives™ on Stack Overflow

Logic behind creating a custom calendar in jquery and javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related