angular中使用full-calendar

版本信息

   "@fullcalendar/angular": "^5.11.0",
    "@fullcalendar/common": "^5.11.0",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/list": "^5.11.0",
    "@fullcalendar/moment": "^5.11.0",
    "@fullcalendar/moment-timezone": "^5.11.0",
    "@fullcalendar/rrule": "5.11.0",
    "@fullcalendar/timegrid": "^5.11.0",

html部分

<full-calendar #calendarHost [options]="calendarOptions"></full-calendar>

配置信息

this.calendarOptions = {
      headerToolbar: {
        left: '',
        center: '',
        right: '',
      },
      height: '710px',
      // locale: zhLocale,
      weekends: true, // 日历面板中是否显示周末
      selectable: false, // 日历中的日期是否可以被选中
      selectOverlap: false, // 每个日期是否可以被重复选中多次
      events: [], // 日历面板 所有被选中的数据或者通过api返回的数据
      showNonCurrentDates: true, // 不是本月的日期是否需要在日历中显示
      initialEvents: [], // 默认显示的数据
      eventClick: this.handleEventClick.bind(this), // 单击每个日期时调用的方法，可以用来做删除操作
      eventMouseEnter: this.handleEventMove.bind(this),
      eventMouseLeave: this.handleEventLeave.bind(this),
      select: this.handleDateSelect.bind(this), // 选中每个日期时调用的方法
      eventsSet: this.handleEvents.bind(this), // 获取所有选中的日期，用来传给后端进行保存
      dayMaxEventRows: 4,
      moreLinkContent: this.moreLinkContent.bind(this),
    };

更新组件

setEvents(events) {
    const { calendar: api } = this.calendarHost;
    api.removeAllEvents();
    api.addEventSource({
      events,
    });
  }