为什么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");
    }
  
    });