程控选择在Fullcalendar一段时间 [英] Programmatically selecting a period of time in Fullcalendar

问题描述

我使用 Fullcalendar 在我的 asp.net 应用程序。

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

如果我们需要选择一个月或者一年 Fullcalendar ，有作为的 选择 。我们可以通过的startDate 和结束日期来的方法，并选择时间。

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 ?

我有什么到目前为止已经试过：

下面是演示。

推荐答案

所以，我有你的答案（我需要非常类似的东西，并寻求帮助时，碰到这个偶然发现）。我们需要思考FullCalendar和一分钟的DOM之外。 FullCalendar使用MomentJS，这是即将派上用场了（这不包括在你的榜样，你需要以下）。首先，你需要创建或者周末或平日的数组。我这样做是为接下来的365天（下次全年）。

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).

使用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');

});

所以，你必须为明年的周末数组。现在，我们需要强调的日期。问题是，只要您点击箭头查看下个月，所选择的日期将被清除（因为我们在DOM正在努力），所以我创建了一个功能选择日期，可以被称为平日，周末或按钮点击：

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');
            }
        });
}

我希望这可以帮助，一切工作的演示。 ：D http://jsfiddle.net/z8Jfx/255/

这篇关于程控选择在Fullcalendar一段时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！