单击上一个和下一个日期事件未在FullCalendar中渲染

Question

当我单击上一个和下一个日期事件时，未在FullCalendar中渲染。我已经使用了ng全卡伦达角4。

this.WeeklycalendarOptions = {
                editable: false,
                eventLimit: false,
                defaultView: 'agendaWeek',
                nowIndicator: true,
                header: {
                    left: 'prev,title,next agendaWeek,agendaDay',
                    // center: 'title',
                    right: '',
                },
                buttonText: {
                    week: 'Weekly',
                    day: 'Daily'
                },
                // dayClick: this.onDayClick.bind(this),
                // end of calendar option
                // minTime: '09:00:00',
                // maxTime: '18:00:00',
                allDaySlot: false,
                // it will be removed later TSpl t0534
                eventAfterRender: function (event, element, view) {
                    if (event.VehicleType === 'Valet') {
                        $(element).html('<div class="calendar-info-box ' + event.ClassName + '"><div class="info-line"><img class="img-circle" src=' + event.BaseUrl + event.Image + ' alt="" class="info-person" style="width:20px; height:20px;"><i style ="color:white"class="material-icons pull-right">arrow_upward</i> <h1>' + event.VehicleType + '</h1><h2>' + event.title + '</h2></div></div>');
                        $('div.calendar-info-box').parent().css({ 'background-color': '#36BFC7', 'border-color': '#36BFC7' });
                    }
                    // tslint:disable-next-line:one-line
                    else {
                        $(element).html('<div class="calendar-info-box ' + event.ClassName + '"><div class="info-line"><img class="img-circle" src=' + event.BaseUrl + event.Image + ' alt="" class="info-person" style="width:20px; height:20px;"><h1>' + event.VehicleType + '</h1><h2>' + event.title + '</h2></div></div>');
                        $('div.calendar-info-box').parent().css({ 'background-color': '#81c926', 'border-color': '#81c926' });
                    }

                },
                events: this.calendarEvents,
            };

Answer 1

我建议，不要像这样的fullcalendar。

使用它：将它们放在index.html：

<link rel='stylesheet' href='fullcalendar.css' />
<script src='fullcalendar.js'></script>

导入以下几行：

import { Options } from 'fullcalendar';
import * as moment from "moment";
declare var document: any;
declare var $: any;

，而不是您的构造函数：

$(document).ready(function() {
      $('#calendar').fullCalendar({
      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
      droppable: true,
      selectable: true,
      header: {
          left: 'title',
          // center: '',
          right: 'agendaWeek,agendaDay prev,next'
      },
      fixedWeekCount : false,
      defaultDate: new Date(),
      events: [],
      height: 'auto',
      eventLimit: true,
      editable: true,
      defaultView: 'agendaWeek'
});
});

在您的视图部分中放置此行：

<div id="calendar"></div>

并将其用于渲染事件：

let event = {
             id: id,
             title : "meeting",
             start: start_time,
             end: end_time,
             editable: true,
             color: color,
            }
$("#calendar").fullCalendar( 'renderEvent', event, true);

让我知道它是否适合您...