Fullcalendar not rendering days

Question

I have a strange problem with Fullcalendar. The calendar is not fully rendered. Only the header is rendered initially and I have to click on any header button to make the calendar render days and events.

HTML + Razor:

<div class="row">
<div class="col-xs-12 col-md-3">
    @Html.DropDownListFor(m => m.User, @Model.UsersDropdown, new { id = "calendar_uid", @class = "form-control" })
</div>
</div>
<div class="row">
<div class="col-xs-12">
    <div id="calendar" data-lang="@Request.UserLanguages[0]"></div>
</div>
</div>

JS:

$("#calendar").fullCalendar({
    header: {
        left: '',
        center: 'title',
        right: 'today prev,next'
    },
    buttonIcons: {
        prev: 'left-single-arrow',
        next: 'right-single-arrow',
        prevYear: 'left-double-arrow',
        nextYear: 'right-double-arrow'
    },
    events: {
        url: SITE_ROOT + '/Calendar/Feed',
        type: 'POST',
        data: {
            uid: $('#calendar_uid').val()
        }
    },


});

$("#calendar_uid").change(function () {
    $("#calendar").fullCalendar('removeEventSource', SITE_ROOT + '/Calendar/Feed');
    var newSource = {
        url: SITE_ROOT + '/Calendar/Feed',
        type: 'POST',
        data: {
            uid: this.value
        }
    };
    $("#calendar").fullCalendar('addEventSource', newSource);

});

To make things stranger if I call $("#calendar").fullCalendar('render'); from firebug console the calender is fully rendered. However if I call it after initialization from my scripts nothing happens. I took a look in the network tab of Firebug as well. No request is sent to the server when the calender is rendered for the first time. The request is sent when I click any of the header buttons. Afterwards everything works fine.

I also tried to copy this fiddle and see if it works locally. I still have the same problem. I need to click any button to make the calendar render completely.

Last but not least my script includes(at the bottom of my page):

<script src="/C5.WebApp/Scripts/jquery-1.11.1.js"></script>
<script src="/C5.WebApp/Scripts/bootstrap.js"></script>
<script src="/C5.WebApp/Scripts/jquery.hideseek.js"></script>
<script src="/C5.WebApp/Scripts/moment-with-locales.js"></script>
<script src="/C5.WebApp/Scripts/fullcalendar.js"></script>


<script>
    moment().format();
</script>
<script src="/C5.WebApp/Scripts/app_calendar.js"></script>
<script src="/C5.WebApp/Scripts/app_contacts.js"></script>
<script src="/C5.WebApp/Scripts/app_newPhone.js"></script>
<script src="/C5.WebApp/Scripts/app_newEmail.js"></script>
<script src="/C5.WebApp/Scripts/app_newAppointment.js"></script>
<script src="/C5.WebApp/Scripts/app_newActivity.js"></script>
<script src="/C5.WebApp/Scripts/application.js"></script>

Just an idea, what happens if you add one of the views to the header (as a button)? It will be hard to help without a jsfiddle or something — Richard Löwenström, Oct 08 '14 at 19:44
Possible duplicate of http://stackoverflow.com/questions/10340362/jquery-fullcalendar-not-rendering — Richard Löwenström, Oct 08 '14 at 19:49

score 0 · Accepted Answer · answered Oct 09 '14 at 06:25

After reading the docs again and again I found the this

Notice that this example calls render whenever any tab is shown, not just the tab that the calendar is within. This is okay, because FullCalendar is smart enough to only render calendars that are visible to the user.

The problem is my calendar was hidden initially and I expected it to be rendered when I remove the hidden class via javascript.

Fullcalendar not rendering days

1 Answers1