如何以不同格式显示完整日历中的日期？

Question

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

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

我的收藏 (Requests)，我有 title 和 start 属性。 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", "")); 

以上为您提供了一个等效的日期对象。我们从字符串中删除“at”，因为它会在传递给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