Why FullCalendar is not showing properly?

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);
	}
});

I have a problem with FullCalendar https://fullcalendar.io/docs, I add some screenshot to explain my problem, When i click the button to show my calendar, but I only see not properly loaded events in calendar and when I click on any buttons of drag this thin strips it get fixed and calendar show everything properly.

Answer 1

I found the solution , the modal is not rendered, when the calendar is being rendered, I must add some delay.

example code: 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");
    }
  
    });