Fullcalendar: thin strip events FullCalendar issue

[Magda98]

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 or drag this thin strips it get fixed and calendar show everything properly, I don't use any extra CSS file and FullCalendar is viewed in pop-up. I add screenshot below.

$('#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);
}
});

//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"
  }
]

[acerix]

Would you be able to post a runnable, stripped-down demonstration of the bug? Would really appreciate it because the time saved reproducing will be time spent fixing.

[Magda98]

Here is Codepen

[acerix]

Thanks. The issue is the modal is not rendered yet when the calendar is being rendered. It seems there is no callback to tell when the model is done rendering, but you could add a delay like this:

https://codepen.io/anon/pen/WKPyEN?editors=0010