Why FullCalendar is not showing properly? - 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);
}
});
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");
}
});