CODEWITHSUNDEEP
jqueryangularjsfullcalendar
user1916783
user1916783

Reputation: 187

jQuery fullCalendar with Angular

I'm trying to use fullCalendar in my Angular app, but it so happens that the calendar itself is not on the main page and needs to be rendered as needed.

I came up with a setTimeout() workaround, but I think there must be a better way and hopefully I'm not the only one who stumbled upon this behavior.

    // only the buttons are displayed, not the calendar
    $("#calendar-me").fullCalendar();

    // works, but haaacky!
    /*
    setTimeout(function(){
        $("#calendar-me").fullCalendar();
    }, 200);
    */

Here is a full CodePen example: http://codepen.io/imehesz/pen/aOmaqZ

Upvotes: 1

Views: 4018

Answers (2)

HolgerT
HolgerT

Reputation: 62

I found another solution to use Fullcalendar with Angular. 

$('#calendar').fullCalendar({
        lang: "de",
        header : false,
        defaultView: 'agendaWeek',
        allDayDefault: false,
        hiddenDays: [0,6],
        minTime: "06:00:00",
        maxTime: "22:00:00",
        scrollTime : "07:00:00",
        //Events - loading from local DB
        events: function(start, end, timezone, callback){
            //$scopes.dates from here
            //Callback returns dates in JSON-Format
            callback($scope.dates);                
        }
    });

If the callback is ready - for example when loading from local/remote database (NO MYSQL) is done - the calendar is refetching the Events. Same procedure when 

$("#calendar").fullCalendar("refetchEvents");

is called. That construction creates a easy and working way to integrate FullCalendar into Angular without any angular-ui.

Upvotes: 0

Dan Moldovan
Dan Moldovan

Reputation: 3591

This is indeed quite hacky. I was fiddling around with fullcalendar a while back and got a a quite hacky solution myself before i found ui-calendar

Upvotes: 3

Related Questions