Question

我正在使用fullcalendar包。我的目标是在日历中显示数据库中的约会。

从他们的文档中，我必须使用events()函数。

我的收藏集（Requests），我有标题和开始属性。 start属性存储如下：

start: 'December 19, 2017 at 9:43 PM'

此刻我被困住了：

Template.appointments.onRendered( () => {
  $( '#calendar' ).fullCalendar({
    events( start, end, timezone, callback ) {


      });
    }
  });
});

我应该如何检索日期和时间并将其显示在日历中？

更新

以下是我的尝试：

Template.appointments.onRendered( () => {
  $( '#calendar' ).fullCalendar({
    events( start, end, timezone, callback ) {
        let data = Requests.find().fetch().map( ( event ) => {
            event.start = new Date(event.start.replace("at", ""));
            event.end = new Date(event.start.replace("at", ""));
            return event;
        });

        if ( data ) {
            callback( data );
        }
    }
});

  Tracker.autorun( () => {
    Requests.find().fetch();
    $( '#calendar' ).fullCalendar( 'refetchEvents' );
});

});

它没有用，我试图删除events函数中的所有代码并更改为以下内容：

Template.appointments.onRendered( () => {
  $( '#calendar' ).fullCalendar({
    events( start, end, timezone, callback ) {
        console.log('WORKS!')
    }
});
});

没有任何内容打印到控制台。为什么事件中的代码没有被执行？

注意：日历已在模板中成功加载但为空。

Answer 1

您目前将日期存储为字符串。

var start_date = new Date(start.replace("at", ""));

以上为您提供了等效的日期对象。我们删除＆＃34; at＆＃34;来自字符串，因为它会在传递给Date构造函数时导致错误。

您的模板及其渲染功能应类似于：

<强> template.html

<template name ="appointments">
    ....
    ....
    <div id = "calendar"></div>
    ....
    ....
</template>

<强> template.js

    Template.appointments.onRendered(function() {

    // each time a reactive entity changes, whatever is inside tracker.autorun is run again.
    Tracker.autorun(function() {


        var eventsArray = [];
        // events.find() is reactive. Any change to the events collection will trigger the autorun to run.
        events.find().forEach(function(event) {
            eventsArray.push({
                title: event.title,
                start: event.startDate, //should be preferably in ISO format
                end: event.endDate //should be preferably in ISO format
            });

        });

        // Each time some data changes, fullCalendar must be notified again.
    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar(eventsArray);
    $("#calendar").fullCalendar('addEventSource', eventsArray);
    $("#calendar").fullCalendar('rerenderEvents');
    });
});

我在我的本地测试应用程序中对上述内容进行了测试，结果正常。

有关fullcalendar和meteor here

的非常详细的教程

如何以不同的格式在fullcalendar中显示日期？

1 个答案: