CODEWITHSUNDEEP
javascriptjqueryhtmlfullcalendar
chuckd
chuckd

Reputation: 14530

JQuery Full Calendar inside div tag not showing until calendar click event is triggered

I have a page that displays different sections Iimages, calendar, info, etc) inside div tags. The div tags get hidden and shown depending on what nav link is clicked on the left side of the page. When I enter the page, the calendar div is hidden then I click on the calendar link to show the calendar and the page comes up but the calendar isn't there, the calendar buttons are visible but no calendar. Once I click on a calendar button, the calendar appears. Posted images below. Do I need to refresh the page/resize or something when the calendar div tag gets selected and hides all other divs and shows the calendar div?

The first pic here is when I first enter the page, the second is after I click the month button.

enter image description here

enter image description here

Here is the div that contains the calendar code

<div id="eventcalendar">
    <div id='calendar' style="width:65%"></div>
</div>

Here is the code that hides/shows the calendar div when the nav link is clicked.

$("#calendarlink").click(function() {
    $("#eventcalendar").show();
    $("#images").hide();
    $("#listing").hide();
    $("#overview").hide();
    $("#details").hide();
    $("#address").hide();
    $("#map").hide();
    $('#calendar').fullCalendar('refresh'); //these don't show calendar
    $('#calendar').fullCalendar('rerenderEvents'); //these don't show calendar
});

Here is the code that renders the calendar (it's inside $(document).ready(function () {})

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaDay',
    editable: true,
    allDaySlot: false,
    selectable: true,
    slotMinutes: 15
});

Note: If I show the calendar when the page first gets opened then the calendar shows. Shown here.

$(document).ready(function () {
$("#overview").show();
$("#details").hide();
$("#listing").hide();
$("#address").hide();
$("#map").hide();
$("#images").hide();
$("#eventcalendar").show();

Upvotes: 0

Views: 2074

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4516

Rearrange your functions so that the calender is activated on non hidden div, then hide it.

Some elements like calender doesn't like to be activated on hidden divs... better activate them on normal divs then hide them ;)

Upvotes: 1

Related Questions