Programmatically selecting a period of time in Fullcalendar

Question

I'm using Fullcalendar in my asp.net application.

If we need to select a month, or a year in Fullcalendar, there is a method as select. We can pass startDate and endDate to that method and select that period.

I need to programmatically select weekends in a month. also need to select week days in a month.

How can i achieve this ?

What i have tried so far :

Here is the Demo.

Answer 1

So I've got your answer (I needed something very similar and stumbled across this when looking for help). We need to think outside of FullCalendar and the DOM for a minute. FullCalendar uses MomentJS, and this is about to come in handy (this wasn't included in your example, and you need it for the following). First, you need to create an array of either weekends or weekdays. I did so for the next 365 days (next full year).

Example of Array of weekends using MomentJS:

$('#weekends').click(function() {

    weekend_array = new Array();
    var cal = $('#calendar').fullCalendar('getCalendar'); 
    var curr_moment = moment(cal);


    for(k=0; k<365; k++) // for the next 365 days (next year)
    {
        // if weekend
        if(curr_moment.day()==0 || curr_moment.day()==6) // 0 being Sunday, 6 being Saturday
        {
            weekend_array.push(curr_moment.format("YYYY-MM-DD")); // format to match the data-date attr
        }

        curr_moment= curr_moment.add(1, 'days');

    }

    console.log("Number of weekend days: " + weekend_array.length);
    console.log(weekend_array);

    var dates = weekend_array
    HighlightDates(dates);

    // help DOM restore checked dates on click
    $('#daymode').val('weekend');

});

So you have your weekend array for the next year. Now, we need to highlight the dates. Issue is that as soon as you click the arrows to view the next month, the selected dates are cleared (since we're working in the DOM) so i created the select dates in a function that can be called for weekdays, weekends or button click:

function HighlightDates(dates){
    $('.fc-day').each(function () {
            var thisdate = $(this).attr('data-date');
            var td = $(this).closest('td');

            if ($.inArray($(this).attr('data-date'), dates) !== -1) {
                td.addClass('fc-state-highlight');
            } else {
                td.removeClass('fc-state-highlight');
            }
        });
}

I hope this helps, working demo of everything. :D http://jsfiddle.net/z8Jfx/255/