fullCalendar jQuery,每周一重复?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11072616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:10:07  来源:igfitidea点击:

fullCalendar jQuery, repeat every monday?

jqueryfullcalendar

提问by Karem

Normally this is a event in calendar:

通常这是日历中的事件:

            {

                title: 'Test',

                start: '2012-06-08',

                end: '2012-06-08',

                url: 'test/test'

            },

Works fine. Although how can i make 1 event that shows on every Monday in the calendar? Or every tuesday and so on depend on what weekday/number you enter? Whats the param if there exists one?

工作正常。虽然我怎样才能在日历中的每个星期一显示 1 个事件?或者每个星期二等等取决于您输入的工作日/数字?如果存在,参数是什么?

If it does not exists, can I somehow modify and add the feature for making this happen? So you can enter a param like repeatEveryWeekDay: 2 (which is monday), then on all future mondays the data will show there.

如果它不存在,我可以以某种方式修改和添加实现这一目标的功能吗?因此,您可以输入像 repeatEveryWeekDay: 2 (即星期一)这样的参数,然后在所有未来的星期一,数据都会显示在那里。

I tried looking in http://arshaw.com/fullcalendar/docs/event_data/Event_Object/but can't find anything.

我尝试在http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ 中查找,但找不到任何内容。

回答by Christopher Ramírez

fullCalendarpermits that instead of passing an array of events, you can pass a function which, for example, downloads the events from a server, or dynamically generates those events.

fullCalendar允许您可以传递一个函数,而不是传递事件数组,例如,从服务器下载事件,或动态生成这些事件。

Most examples in the documentation use HTTP requests to get events data. But the callback function is still flexible enough to make it work the way you want.

文档中的大多数示例使用 HTTP 请求来获取事件数据。但是回调函数仍然足够灵活,可以按照您想要的方式工作。

Look at the following example I've just written for you:

看看我刚刚为你写的下面的例子:

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            // some original fullCalendar examples
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            }
        ]
    });

    // adding a every monday and wednesday events:
    $('#calendar').fullCalendar( 'addEventSource',        
        function(start, end, callback) {
            // When requested, dynamically generate virtual
            // events for every monday and wednesday.
            var events = [];

            for (loop = start.getTime();
                 loop <= end.getTime();
                 loop = loop + (24 * 60 * 60 * 1000)) {

                var test_date = new Date(loop);

                if (test_date.is().monday()) {
                    // we're in Moday, create the event
                    events.push({
                        title: 'I hate mondays - Garfield',
                        start: test_date
                    });
                }

                if (test_date.is().wednesday()) {
                    // we're in Wednesday, create the Wednesday event
                    events.push({
                        title: 'It\'s the middle of the week!',
                        start: test_date
                    });
                }
            } // for loop

            // return events generated
            callback( events );
        }
    );
});

The above function automatically generates an event for every Monday and Wednesday between two dates. The dates are indicated in startand endparams. Those params are passed by fullCallendar. Events generated by the above function are returned to fullCallendarthrough the callbackfunction in third param.

上述函数为两个日期之间的每个星期一和星期三自动生成一个事件。日期在startend参数中表示。这些参数由fullCallendar. 上述函数生成的事件fullCallendar通过callback第三个参数中的函数返回。

I use DateJSto test if a given date is monday.

我使用DateJS来测试给定的日期是否是星期一。

UPDATE: If you want to mix static events and/or [more than one] repeatable event, you can use addEventSource.

更新:如果您想混合静态事件和/或 [多个] 可重复事件,您可以使用addEventSource

回答by Belgor

A little update to Christopher Ramírez's post. Using fullCalendar at v2.2.3and momentjs at v2.8.4you need to amend couple of lines in the snippet above to make it work:

克里斯托弗·拉米雷斯 (Christopher Ramírez) 的帖子的一些更新。使用 fullCalendar atv2.2.3和 momentjs atv2.8.4您需要修改上面代码片段中的几行以使其工作:

First:

第一的:

function(start, end, callback) {}

to

function(start, end, status, callback) {}

as the third parameter is a boolean and the fourth is the callback function

因为第三个参数是一个布尔值,第四个是回调函数

Then:

然后:

for (loop = start.getTime();
     loop <= end.getTime();
...

to

for (loop = start._d.getTime();
     loop <= end._d.getTime();

as the start and end objects passed to the function are not Date objects and calling .getTime() on them will end up in 'Undefined is not a function' error.

因为传递给函数的开始和结束对象不是 Date 对象,对它们调用 .getTime() 最终会出现“未定义不是函数”错误。

And thats it! This amendments made it work for me.

就是这样!这个修正使它对我有用。

回答by ganeshk

It's the ID field of the event object that determines the repeatability of that event. Use the same ID for all your repeating events for a particular day of the week.

事件对象的 ID 字段决定了该事件的可重复性。对一周中某一天的所有重复事件使用相同的 ID。

回答by warath-coder

The best way I found to solve a repeat event is to setup a JSON call to your backend language (i'm using Django/Python).

我发现解决重复事件的最佳方法是设置对后端语言的 JSON 调用(我使用的是 Django/Python)。

so in the calendar options i would have:

所以在日历选项中我会有:

events: { url: '/event-data', cache: false },

事件: { url: '/event-data', 缓存: false },

Then in my backend I take advantage of the parameters that get sent for the current displayed calendar 'start' and 'end' URL GET variables. I.e.:

然后在我的后端,我利用为当前显示的日历“开始”和“结束”URL GET 变量发送的参数。IE:

hxxp://example.com:8000/event-data?start=2014-09-28&end=2014-11-09&_=1413553318353

hxxp://example.com:8000/event-data?start=2014-09-28&end=2014-11-09&_=1413553318353

a Get request would be sent from the events options, I then build events from a database/source file that lists repeat events along with regular calendar events, and send back just the list of events occurring in that date range in a JSON list.

Get 请求将从事件选项发送,然后我从列出重复事件和常规日历事件的数据库/源文件构建事件,并仅发送回 JSON 列表中该日期范围内发生的事件列表。