为什么 FullCalendar 没有正确显示？答案

【问题标题】：Why FullCalendar is not showing properly?为什么 FullCalendar 没有正确显示？
【发布时间】：2018-08-03 12:43:28
【问题描述】：

//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 时遇到问题，我添加了一些屏幕截图来解释我的问题，当我单击按钮以显示我的日历时，我只看到日历中未正确加载的事件以及当我单击任何按钮时拖动这条细条即可固定，日历会正确显示所有内容。

【问题讨论】：

没有代码和示例数据，我们怎么可能告诉你你做错了什么？这就像在没有看到汽车的情况下要求我们修复从您的汽车冒出的烟雾的照片。请给我们足够的信息来重现您的问题，以便我们理解它。那么我们将很乐意提供帮助。谢谢。
请提供一些代码。
根据要求，请提供一些示例事件数据。照原样，这仍然无法复制。此外，从屏幕截图看来，您已经自定义了 CSS 或添加了会影响 fullCalendar 的额外 CSS 规则。所以请也证明这一点。自定义 CSS 是导致布局和呈现问题的常见原因。
我没有使用任何额外的 CSS 文件，我必须补充说 FullCalendar 是在弹出窗口中查看的，但我认为这不是造成这种情况的原因？
这里是有这个错误的 Codepen：codepen.io/mpysz/pen/djwwpv

标签： fullcalendar fullcalendar-scheduler

【解决方案1】：

我找到了解决办法，modal没有渲染，在渲染日历的时候，我必须添加一些延迟。

示例代码：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");
    }
  
    });

【讨论】：