Meteor项目中FullCalendar事件显示及表单数据同步问题

嘿，我仔细扒了你的代码，发现几个关键问题导致日历事件出不来，咱们一步步调，把模态框里的内容同步到FullCalendar上：

1. 先把FullCalendar的事件格式掰正 #

你现在example模板里的events助手返回的是单个对象，但FullCalendar认的是数组格式，而且日期格式也错了（得是YYYY-MM-DD，你写的2018-28-01月份是28，这肯定识别不了呀）。先改这部分：

Template.example.helpers({
  options: function() {
    return {
      defaultView: 'agendaDay',
      // 直接从Notes集合拉数据转成日历要的格式
      events: Notes.find().fetch().map(note => ({
        id: note._id,
        title: note.text,
        start: note.eventStart, // 后面咱们给表单加这个字段
        allDay: note.allDay || false
      }))
    };
  }
});

2. 给模态框表单加日历需要的字段 #

你现在的表单只有个标题输入框，日历事件得有开始时间、是否全天这些信息呀，把add模板改成这样：

<template name="add">
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h3>Add Calendar Event</h3>
      <form class="add-form">
        <input type="text" name="text" placeholder="Event Title..." required>
        <!-- 加个开始时间的输入框，用datetime-local原生控件就行 -->
        <input type="datetime-local" name="eventStart" required>
        <!-- 加个是否全天的复选框 -->
        <label style="margin-top:1rem;">
          <input type="checkbox" name="allDay">
          <span>All Day Event</span>
        </label>
        <!-- 加个提交按钮，操作更友好 -->
        <button type="submit" class="btn red right">Add Event</button>
      </form>
    </div>
  </div>
</template>

3. 更新表单提交逻辑，存完整的日历数据 #

现在要把新字段存到Notes集合里，改Template.add.events的代码：

Template.add.events({
  'submit .add-form': function(event){
    event.preventDefault();
    const target = event.target;
    
    // 把表单里的字段都拿出来
    const text = target.text.value;
    const eventStart = new Date(target.eventStart.value);
    const allDay = target.allDay.checked;

    // 插入到集合里，现在数据就完整啦
    Notes.insert({
      text,
      eventStart,
      allDay,
      createdAt: new Date()
    });

    // 清空表单+关模态框
    target.reset();
    $('#modal1').modal('close');
    return false;
  }
});

4. 让日历实时响应数据变化 #

Meteor是响应式的，咱们得让日历能实时感知Notes集合的变化，加个autorun监听：

Template.example.onCreated(function() {
  this.autorun(() => {
    // 如果用了发布订阅，这里要加Meteor.subscribe('notes'); 没用到的话忽略就行
    // 把集合数据转成日历事件格式
    const events = Notes.find().fetch().map(note => ({
      id: note._id,
      title: note.text,
      start: note.eventStart,
      allDay: note.allDay || false
    }));
    // 更新日历的事件
    const calendarEl = this.$('.fc-calendar')[0];
    if (calendarEl) {
      const calendar = $(calendarEl).fullCalendar('getCalendar');
      calendar.removeEvents();
      calendar.addEventSource(events);
    }
  });
});

5. 顺便把列表里的日期显示修了（可选） #

你note模板里的data helper用了this.date，但集合里根本没这个字段，改成this.eventStart才行：

Template.note.helpers({
  data:function(){
    return moment(this.eventStart).format("dddd, h:mm A"); // 加个AM/PM更清楚
  }
});

最后走一遍验证流程 #

1. 重启你的Meteor app
2. 点ADD Modal，填事件标题、选开始时间，想弄全天的就勾上
3. 提交之后，日历上应该立刻能看到这个事件，下面的列表里也会显示带时间的条目

这样改完，就能实现你要的表单数据同步到FullCalendar的功能啦！

内容的提问来源于stack exchange，提问作者Danillo Villas Neto