为什么 FullCalendar 没有正确显示？

Question

//example data for events

[
  {
    "jobId": 0,
    "eventId": 79,
    "title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>asfdasfsd<\/span>",
    "start": "\/Date(1533542400000)\/",
    "end": "\/Date(1533551400000)\/",
    "color": "#FFCC00"
  },
  {
    "jobId": 0,
    "eventId": 80,
    "title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>sfsdgs<\/span>",
    "start": "\/Date(1533637800000)\/",
    "end": "\/Date(1533646800000)\/",
    "color": "#FFCC00"
  },
  {
    "jobId": 0,
    "eventId": 81,
    "title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>dfdf s ddfsda ds fds  2222<\/span>",
    "start": "\/Date(1533722400000)\/",
    "end": "\/Date(1533727800000)\/",
    "color": "#FFCC00"
  },
  {
    "jobId": 0,
    "eventId": 84,
    "title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>gdgdfgsd<\/span>",
    "start": "\/Date(1533808800000)\/",
    "end": "\/Date(1533812400000)\/",
    "color": "#FFCC00"
  }
]

$('#calendar').fullCalendar({
 locale: 'pl',
 defaultView: 'agendaWeek',
 header: {
  left: 'prev,next today',
  center: 'title',
  right: 'agendaDay,agendaWeek,month,listWeek,year'
 },
 height: 'auto',
 footer: false,
 weekends: false,
 slotEventOverlap: false,
 timezone: 'local',
 editable: true,
 selectable: true,
 events: {
  url: '@Url.Action("GetGraphicCalendarEvents", "Schedule")',
  textColor: 'black'
 },
 eventRender: function (event, element, view) {
  var title = element.find('.fc-title, .fc-list-item-title');
  title.html(title.text());
 },
 eventDrop: function (event) {
  updateEventDate(event);
 },
 eventResize: function (event) {
  updateEventDate(event);
 },
 select: function (startDate, endDate) {
  $.ajax({
   url: "@Url.Action("GraphicCalendarAddView", "Schedule")",
   type: "post",
   data: {
    orderId: $("#OrderId").val(),
    start: startDate.format("YYYY-MM-DD HH:mm:ss"),
    end: endDate.format("YYYY-MM-DD HH:mm:ss")
   },
   success: function (result) {
    if (result.hasOwnProperty("Success") && !result.Success) {
     //error
    } else {
     //success
    }
   },
   error: function (jqXHR, status, err) {
    //error
   }

  });
 },
 eventClick: function (event) {
  updateEventView(event);
 }
});

我在使用 FullCalendar https://fullcalendar.io/docs 时遇到问题，我添加了一些屏幕截图来解释我的问题，当我单击按钮以显示我的日历时，但我只看到日历中没有正确加载的事件，当我单击在拖动此细条的任何按钮上，它会得到修复并且日历会正确显示所有内容。

Answer 1

我找到了解决方案，模态框没有渲染，当日历渲染时，我必须添加一些延迟。

示例代码：https://codepen.io/anon/pen/WKPyEN?editors=0010

 $(function() {
  
     $(".graphicPlanninngLetter").on("click", function() {
    openCalendarWithView("GraphicPlanning");
    });

    function openCalendarWithView(action) {
    showPopup("Test", "<div id='calendar'></div>");
    setTimeout(function() {
      $('#calendar').fullCalendar({
        locale: 'pl',
        defaultView: 'agendaWeek',
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'agendaDay,agendaWeek,month,listWeek,year'
        },
        allDaySlot: false,
        height: 'auto',
        footer: false,
        weekends: false,
        slotEventOverlap: false,
        timezone: 'local',
        editable: true,
        selectable: true,
        events: 'https://fullcalendar.io/demo-events.json',
        eventRender: function (event, element, view) {
          var title = element.find('.fc-title, .fc-list-item-title');
          title.html(title.text());
        },
      });
    }, 300)
    }

    function showPopup(title, content, button, selector) {
    if (selector == undefined)
      selector = "#popup";
    $(selector + " .popupTitle").html(title);
    $(selector + " .popupBody").html(content);
    $(selector + " .popupButtons .additionalButtons").empty().append(button);
    $(selector).modal("show");
    }
  
    });

为什么 FullCalendar 没有正确显示？

Why FullCalendar is not showing properly?

fullcalendar

fullcalendar-scheduler