Programmatically selecting a period of time in Fullcalendar

前端 未结 1 486
温柔的废话
温柔的废话 2021-01-28 09:22

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

1条回答
  •  耶瑟儿~
    2021-01-28 10:02

    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/

    0 讨论(0)
提交回复
热议问题