CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Juliver Galleto
Juliver Galleto

Reputation: 9037

full calendar js wont render, shows only header buttons

im using this event calendar plugin but no calendar is rendered except its header button and only a calendar is shown when I click on any of those header button (refer below image)

as you can see on my console, everything has been set correctly (linking script and stylesheet).

declaration of scripts at the bottom part of the html (just to make sure the dom is loaded before the script calls)

<!-- full calendar -->
<script type="application/javascript" src="/core/plugins/fullcalendar/moment.js"></script>
<script type="application/javascript" src="/core/plugins/fullcalendar/fullcalendar.min.js"></script>

and its stylesheet at the top of the html page (inside the tag)

<link rel="stylesheet" type="text/css" href="/core/plugins/fullcalendar/fullcalendar.css" />

and then call it

//calendar
$('#calendar').fullCalendar({
   header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2015-02-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2015-02-01'
            },
            {
                title: 'Long Event',
                start: '2015-02-07',
                end: '2015-02-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-02-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-02-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2015-02-11',
                end: '2015-02-13'
            },
            {
                title: 'Meeting',
                start: '2015-02-12T10:30:00',
                end: '2015-02-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2015-02-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2015-02-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2015-02-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2015-02-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2015-02-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2015-02-28'
            }
        ]

});

but if i resize the window, it shows. any ideas, clues, help, suggestions, recommendation is greatly appreciated. Thank you!

Upvotes: 1

Views: 3760

Answers (6)

Pwntastic
Pwntastic

Reputation: 481

Hey guys I'm having this same issue however when I click on any button the calendar will load. Ive tried everything above but could not get it. I took an option from @Wolfgang Leon and put this together for it to work. I added a countcheck for the calendar because I would be getting mutliple calendars when i switch tabs. 

        render: function() { 

        let calCount = 0;

        $(function(){
            $('#YOUR CAL ID', this.el).fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    ignoreTimezone: false
                },
                defaultView: 'month',
                selectable: true,
                editable: true
            });
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
            var tab = e.currentTarget.hash
            if( tab == '#YOUR TAB ID' && calCount == 0){
                $('#YOUR CAL ID').fullCalendar('render')
            }
        });

    }

I put this inside of my render function after backbone is initialized. ( noob to backbone ). let me know if this helps or if theres a better way I can write this as I'm still learning.

Upvotes: 0

Jainam Shah
Jainam Shah

Reputation: 1

Add this and this will work, It is a problem as due to new tab the display for calendar is none.

$('#Your Tab ID').on('shown.bs.tab', function (e) {
    $("#calendarID").fullCalendar('render');
});

Upvotes: 0

Wolfgang Leon
Wolfgang Leon

Reputation: 703

You might have two problems, either you're missing a defaultView or you need to run 'render' function from fullCalendar object. Try loading the calendar in its simplest way to make sure you have everything working (correct libraries etc), something like:

calendar.fullCalendar({
        defaultView: 'agendaWeek',
        editable:false,
        allDaySlot:false,
        timezone: 'local',
        maxTime: "24:00:00"
    })

If this works but it isn't rendering the calendar then try running this function AFTER calendar being initated. This will force the calendar to be rendered again..

calendar.fullCalendar('render')

Another issue you might be experiencing is that at the rendenring stage of the page the Calendar DOM is hidden ( display:none or calendar.hide() ) then on this case make sure to run the last function after the calendar is being show. Common libraries like bootstrap have tab classes, this is a very common bug. To make sure to render the calendar AFTER a tab is active, do this

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var tab = e.currentTarget.hash

    if( tab == '#tab'){

        calendar.fullCalendar('render')

    }

});

Upvotes: 1

display
display

Reputation: 1

I got this error too- it was due to a CSS tag on the div element.

div{
    display:inline-block;
}

once I removed the inline-block everything appeared.

Upvotes: 0

Abhishek
Abhishek

Reputation: 462

i think the json you are using is not proper have it check at jsonlint...for your consideration i am attaching the modified json in the answer

here is the modified json for full calander :-

[
    {
        "title": "AllDayEvent",
        "start": "2015-02-01"
    },
    {
        "title": "LongEvent",
        "start": "2015-02-07",
        "end": "2015-02-10"
    },
    {
        "id": "999",
        "title": "RepeatingEvent",
        "start": "2015-02-09T16: 00: 00"
    },
    {
        "id": "999",
        "title": "RepeatingEvent",
        "start": "2015-02-16T16: 00: 00"
    },
    {
        "title": "Conference",
        "start": "2015-02-11",
        "end": "2015-02-13"
    },
    {
        "title": "Meeting",
        "start": "2015-02-12T10: 30: 00",
        "end": "2015-02-12T12: 30: 00"
    },
    {
        "title": "Lunch",
        "start": "2015-02-12T12: 00: 00"
    },
    {
        "title": "Meeting",
        "start": "2015-02-12T14: 30: 00"
    },
    {
        "title": "HappyHour",
        "start": "2015-02-12T17: 30: 00"
    },
    {
        "title": "Dinner",
        "start": "2015-02-12T20: 00: 00"
    },
    {
        "title": "BirthdayParty",
        "start": "2015-02-13T07: 00: 00"
    },
    {
        "title": "ClickforGoogle",
        "url": "http: //google.com/",
        "start": "2015-02-28"
    }
]

check if it worked or not

Upvotes: 0

Mario Levrero
Mario Levrero

Reputation: 3367

You need to:

jQuery and Moment must be loaded before FullCalendar's JavaScript.

  • Make the call to fullCalendar when jquery is ready. From the same page of documentation

    $(document).ready(function() {    
    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })
});

I did a plunker with your code where you can check it.

Upvotes: 0

Related Questions