Question

I am attempting to identify a jQuery plugin that will display the a full month’s worth of dates length way’s (as below – the numbers reflect days of the month (weekday’s only).

-3 4 5 6 7- -10 11 12 13 14- -17 18 19 20 21- -24 25 26 27 28-

In theory this approach makes the day’s of the month’s columns – several peoples calendars could then be displayed underneath as rows. This is demonstrated below:

---------3 4 5 6 7- -10 11 12 13 14- -17 18 19 20 21- -24 25 26 27 28-
Person A X - - - -   -  -  -  X  -    -  -  -  X  X    -  -  -  -  -
Person B X X X - -   -  X  -  X  -    -  -  X  X  X    X  X  X  -  -

My question is “How can I achieve the above with jQuery? (I have queried Google in an attempt to find a suitable plugin – but I have been unable to identify one)”.

Answer 1

Well, lets get you started.

(function($){
    var getWeekDaysInCurrentMonth = function(){
        // this will operate off of the current month
        // you can make the month an argument
        // and then d.setMonth(m)

        var d = new Date(), 
            daysInMonth = [], 
            currentDay;

        // go to first day of month
        d.setDate(1);
        var firstDay = d.getDate();
        // go to last day of month
        d.setDate(0);
        var lastDay = d.getDate();

        for (var i = firstDay; i <= lastDay; i++){
            d.setDate(i);
            // get the current day of the week in loop
            currentDay = d.getDay();
            // check not sunday or saturday
            if(currentDay !== 0 && currentDay !== 6)
                daysInMonth.push(i);                
        }
        return daysInMonth;
    };

    console.log(getWeekDaysInCurrentMonth());
    // OUTPUT: [1, 2, 3, 6, 7, 8, 9, 10, 13, 
    //            14, 15, 16, 17, 20, 21, 22, 23, 24, 27, 28, 29, 30, 31] 

})(jQuery)​;​

Your next step is to work this function into a jQuery plugin to output some tabular markup. You then will add configuration to your plugin that changes how the markup is displayed, what month is shown first, etc. If you peruse through some of my other jQuery answers you can find examples of creating jQuery plugins (or google).