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

Posted 2021-05-06

我正在使用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!')
    }
});
});

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

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

答案

您当前一直将日期存储为字符串。

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的非常好的详细教程