http://plnkr.co/edit/O3H0i0JVZU8iyVkfJvVv?p=preview

I can't seems to get fullcalendar to work with ui-calendar.

If you uncomment the jquery section at the bottom of script.js, the calendar will show up instantly.

This is my setup:

.calendar{'ui-calendar' => 'config', 'ng-model' => 'availabilities', 'calendar' => 'calendar'}

$scope.availabilities = [function (start, end, callback) {
    Availabilities.query().$promise.then(function(availabilities) {
        callback(availabilities);
    });                                                                                                                                        
}];

// `Availabilities` is an Angular $resource object.

I was supposing that given this setup, whenever I do new Availabilities({ ... }).$save(), the calendar would auto-update with the new event being drawn, but this was not the case. I still need to manually do $scope.calendar.fullCalendar('clientEvents', event.id) etc. to get the event to appear. Is this a bug?

Hi,

I have a dropdown that modifies a ng-model with an id. I then use this id to modify the url parameter which the calendar directive then uses to render events. When the user changes the dropdown, how do I let the ui-calendar be aware of the change, destroy the events that were there, and then repopulate the events based on the new url with the new id?

In the function that is fired in the ng-change event on the dropdown I have:

        $scope.caregiverSchedule.fullCalendar('refetchEvents');

which does not seem to be working for me. If I pass in:

        $scope.caregiverSchedule.fullCalendar('destroy');

then the calendar is destroyed.

If I display the changed url in the template, I can see that it indeed has changed.

I love this calendar and I love Angular! I just can't seem to get my head around this now.

Current in demo calendar is duplicates in page:
first instance has events
second instance is completely events-free.

How i can remove second instance? i just need one calendar with events.

Thank you

I copied down the example source for the calendar from angular-ui.github.io and started toying around with some of the options from FullCalendar.

I made a list of draggable items and then configured my calendar to allow drag and drop functionality like so:

  <div class="span8 calendar large-calendar" 
  ng-model="eventSources" 
  ui-calendar="calendarConfig"> 


$scope.calendarConfig = {
  editable: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek'
  },
  droppable: "*",
  drop: function(date, allDay, jsEvent, ui) {
    console.log($scope.events);
    $scope.events.push({
      title: angular.element(this).text(),
      start: date
    });
    $scope.$digest();
  },
  weekends: false
};

The only way I found to have the calendar refresh was by manually calling $scope.$digest() to fire the watchers on $scope.events.

My understanding was angular-ui-calendar was supposed to be watching for changes to the model. Am I missing something or is this unexpected/buggy behavior? Many thanks.

I’m trying to set up a calendar according to the instructions. The calendar itself shows up on the page, but it doesn’t display any events.

Code in template:

<div ui-calendar ng-model="eventSources">

Code in my controller:

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$scope.eventSources = [
    {
        "title": 'All Day Event',
        "start": new Date(y, m, d)},
    {
        "title": 'Long Event',
        "start": new Date(y, m, d - 5),
        "end": new Date(y, m, d - 2)}];

When I loop through eventSources in the template it works:

    <li ng-repeat="e in eventSources">
        {{e.title}} {{e.start}}
    </li>

The calendar doesn’t show anything, though. There are no errors in console, too. Does any of you has an idea of what’s going on here?

I can't figure what is the problem, but the calendar doesn't load and I see the following error a couple of times in my console:
TypeError: Cannot call method 'getDay' of undefined

When using ui-calendar with the latest version of JQuery, an exception is thrown with regard to $.curCSS not being a function. This is due to that function being removed from JQuery in 1.8.0.

I did everything the guide said, and I even copied some of the code from the demo.
All the requirements are included, and I added

<div ui-calendar="calendarConfig" ng-model="eventSources" />

But everything I run I get the error in the title.

http://jsfiddle.net/fECuY/4/

Resizing an event doesn't currently does not work. Any insights on this would help, will work on patch.

The calendar attribute is not passing the calendar object to scope. I am getting "TypeError: Cannot call method 'fullCalendar' of undefined" when calling $scope.myCalendar.fullCalendar('render'). Code:

<div ng-controller="CalendarCtrl">
  <div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar"></div> 
</div>

angular.module('CalendarApp')
  .controller('CalndarCtrl', function ($scope) {
    $scope.calendarOptions = {};
    $scope.eventSources = [];
    $scope.myCalendar.fullCalendar('render');
});

I can tell that ui-calendar="calendarOptions" and ng-model="eventSources" is mapping correctly to their respective $scope objects. If I change their values, they are reflected in the calendar. However, the actual calendar object is not.

Is this a bug, am I misunderstanding the ReadMe, or is there something more I need to do to inject the calendar object into the controller's scope?

~ line 19: semicolon needs to be replaced with comma - getting console error 'extraEventSignature is undefined'

var sourceSerialId = 1, 
      eventSerialId = 1,
      sources = $scope.eventSources;
      extraEventSignature = $scope.calendarWatchEvent ? $scope.calendarWatchEvent : angular.noop;

~ line 165: same deal - console error 'eventSourcesWatcher is undefined'

var sources = scope.eventSources,
              sourcesChanged = false;
              eventSourcesWatcher = controller.changeWatcher(sources, controller.sourcesFingerprint),
              eventsWatcher = controller.changeWatcher(controller.allEvents, controller.eventsFingerprint),
              options = null;

Hi!

I've tried to use calendar event sources in extended form, each source representing an event group or type. The initial events are shown fine but when adding new events they do not how up in the calendar. They will only show up if another event source, an array, is changed by adding or removing an event.

Here's a plunker trying to illustrate what I mean.

http://embed.plnkr.co/am4yao/preview

Has anyone else solved this in some creative and effective way or is there something obvious I missed of how this is supposed to be done?

We can probably track individual changes, and instead of re-rendering everything (i.e. refetchEvents) we could only re-render the events that changed, and call updateEvent.

We already have a change tracker. That tracker would need to learn to track event fingerprints (now it just knows how to track ids, can be abstracted). We would then watch the array of event fingerprints, and while comparing 2 arrays is slower than comparing 2 strings, I suspect most overhead lies in DOM rendering.

What do you guys think?

I'm trying to wrap ui-calendar inside another directive. I basically moved the working code in a ng-controller into the directive. The code worked fine in the controller, but when I include the directive instead of ui-calendar direct, I got the JS errors: https://gist.github.com/chengyin/5660043

I might have misused directive. If a sample code is needed, I can create it.

Thank you.

How to replicate:

bower install angular-ui-calendar#0.8.0

The following errors are in the src/calendar.js file:

l17: sources = $scope.eventSources; <-- there should be a , instead of a ;
l163: sourcesChanged = false; <-- there should be a , instead of a ; too !

This seems to be fixed on the #0.8.0 version on the github repo, but bower's hasn't been updated…

It is very annoying since it breaks JS evaluation once the file has been minified.

I strongly recommend that you to add a "use strict;" flag on the top of the library and run jsHint systematically in order to avoid such mistakes in the future!

Best regards,

Issue that has been relocated from the main angularUI project.

This can be demonstrated on the demo at http://angular-ui.github.io/ui-calendar/

To recreate the issue

1. delete the last event in the list on the left hand side
2. click the add event button
3. click the arrow to move to a different month
4. finally click the arrow to move back to the month you were just on

You'll notice the event no longer appears in the calendar. I tested this in Chrome and Opera.

hi,
i am trying to define an event when I click on next/prev button, (something like load next month event on any press), could not find solution, do you any idea?

thanks

itay

The documentation says that if you pass a calendar attribute you can access that attribute in the scope e.g.

<div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar">

But in my angular code when I try to access $scope.myCalendar it's undefined. Do I understand this feature incorrectly?

What do you guys think about turning the current version into 1.0.0?

I'd like to add custom angular attributes to the events, such as "bs-popover" from http://mgcrea.github.io/angular-strap/#/popover .

Trying multiple things, but nothing is taking, any thoughts how to do this correctly? Much appreciated.

I'm using ui-calendar in my app but while going to previous dates/ years/ months there is no limit to it. It is showing negative year -300, -200 and what's weird part is I can even select date like "1 Jan -300", I don't think any such date exist.

If possible please fix it.
thanx.

I keep receiving an infinite digest error from angular when I try to make the simplest calendar following the example.

$scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        }
      }
    };

and here's my view

<div ui-calendar ng-model="uiConfig.calendar"></div>

and the error...

Error: [$rootScope:infdig] http://errors.angularjs.org/undefined/$rootScope/infdig?p0=10&p1=%5B%5B%22f…0newVal%3A%20%5B40%2C41%2C3%5D%3B%20oldVal%3A%20%5B36%2C37%2C3%5D%22%5D%5D
    at Error (<anonymous>)
    at http://localhost:8000/app/js/angular/angular.min.js:6:453
    at h.$digest (http://localhost:8000/app/js/angular/angular.min.js:104:218)
    at h.$apply (http://localhost:8000/app/js/angular/angular.min.js:106:100)
    at k (http://localhost:8000/app/js/angular/angular.min.js:63:281)
    at x (http://localhost:8000/app/js/angular/angular.min.js:67:171)
    at XMLHttpRequest.v.onreadystatechange (http://localhost:8000/app/js/angular/angular.min.js:68:314) ```

Is there a way to make the ng-model have late binding for the calendar. Currently I've got an application which makes a substantial server-side API request. The calendar is always rendered before I have received the data causing errors to occur and nothing to be on the calendar.

Hello,

I am at a loss for why this doesn't work when trying to render external events onto the calendar:

var Events = $resource('/api/events');
$scope.events = function (start, end, callback) {
    var events = Events.get(function() {
        $scope.events = {
            events: events,
            color: 'orange'
        }
        callback($scope.events);
    });
};

$scope.eventSources = [ $scope.events ];

$scope.uiConfig = {
    calendar:{
        height: 450,
        editable: true,
        header:{
            left: 'month basicWeek',
            center: 'title',
            right: 'today prev,next'
        },
        dayClick: function( date, allDay, jsEvent, view ) { 
            alert("HI");
        },
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize
    }
}

and on the html page

<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>

I know the resource is working properly since I can see the data in the 'Network' panel of the Chrome console. The calendar itself is also working. However, no events show up on the calendar.

Hi all,

In case you didn't know, a v2 beta of the Full Calendar has been released last month, and i was wondering whether a new branch could/should be started aiming to support the v2? FYI, compatibility with the 1.x versions has been broken.

You will find the improvements brought by the v2 here:
http://arshaw.com/fullcalendar/wiki/Upgrading-to-2/

Mehdi-Loup

We do need to make people aware that there is a breaking change in the new version. Since it was decided to go with a child scope in the new calendar we are no longer attaching the calendar to the scope object. This is because there is no way to have multiple calendars in the same scope and control them differently and it technically smashes the current scope which is bad, so we decided to go with a child scope so that all of the options can still be passed in.

The only difference is now you cannot call $scope.calendar.fullCalendar('changeView', 'agendaDay') anymore.

We need to come up with a way to solve this so that we can call methods like this from the scope without having to attach id's to the directive and make the user use jQuery.

My calendar disappears when navigated from page to page. I am trying to use the render on top of the controller to stop this happening.

$scope.myCalendarx.fullCalendar('render');

This doesn't provide the desired behaviour.

$scope.uiConfig = {
calendar:{
defaultView: 'agendaDay',
height: 450,
firstDay: 1,
weekends:false,
editable: true,
handleWindowResize:true,
header:{
left: 'prev,next today',
center: 'title',
right: 'month agendaWeek agendaDay'
},
dayClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
windowResize:$scope.alertOnWindowResize
}
};

note that If i do a page refresh using timeout, the calendar gets refreshed.

sample js fiddle - http://jsfiddle.net/fECuY/4/

I have been trying for a day or two to implement this directive into my app.
I'm going to display events fetched from a remote API and also wants to store the data in localStorage(for use in offline mode) before displaying it in the calendar.
I've built a service with an async function "get( callback )" which in turn uses $http.get() and then calls the callback with the fetched events as parameters. I can list the events successfully with ng-repeat but the calendar does not display any events.
I understand that i need to call $scope.apply() after storing the data in the scope ($scope.eventSource[0].events = data) but can't seem to do it in the correct way?

The readme says to "wrap it in scope.$apply like in the example above" but i can't seem to find the example?

Can someone please show me an example updating the model with the $http.get function?

To add further information i have tried;

$scope.$apply(function () {
  $scope.eventSource[0].events = data;
});

and

$scope.eventSource[0].events = data;
$scope.$apply();

which both gives me the error "Error: $digest already in progress".

All help is appreciated!

I Need to add resource view in our angular-ui calendar. I have found this link which has already implemented resource day view in arshaw fullcalendar using jQuery, but I am unable to integrate jQuery code to angular fullcalendar code.

https://github.com/ikelin/fullcalendar

So please give me some solution for this.

@yourilima was there a specific reason that you chose to have an empty controller?
I forgot to ask you before we merged it in. I have a commit ready to push, because it looks odd to me and I have tested it and it works the same without it. I was just wondering why you decided to put it there?

/*** RELATED QUESTION #43 ***/

Hi everyone,

Arshaw full-calendar offers the possibility to drop objects on the calendar. It is simple to retrieve the dropped element with the keyword this (http://arshaw.com/fullcalendar/docs/dropping/drop/)

Unfortunately, the keyword this in the $scope.uiConfig refers to window object as the ui-calendar is an angular directive.

Could anyone help figure out how to retrieve a dropped object in drop function of the $scope.uiConfig

Thank you!

Mehdi-Loup

TypeError: Object [object Object] has no method 'fullCalendar'

Pretty non-descriptive.

When checking whether events are dirty, we currently just check for the combined length of the sources. This works only when events are added or removed, but not when they are modified.

It is, in fact (http://jsperf.com/angular-calendar-events-fingerprint/3), possible to watch any change on the events.

Bower is causing the build to fail. Has anyone seen this issue?

I posted an issue about it here bower/bower#214

It looks like others are having issues as well.

I am encountering a problem where events are displayed twice on the first page if they are retrieved after a back-end REST call.

Details at http://stackoverflow.com/questions/22099582/angular-ui-calendar-populated-twice/22110027?noredirect=1#22110027

Interestingly, if I change the current month and come back, it doesn't show me duplicates anymore.

We've been using this directive for a while now and it works wonderfully.

However, I am currently having an issue with events not rendering on the calendar in safari (it also seems to be having the same issue in ie9, although i am not as concerned with that).

Perhaps you guys would be willing to help?

Here is the relevant code:

 '$scope.events = {
            events: function(start, end, callback) {
                EventsService.get({}, function(data) {
                    var events = data.data;
                    callback(events);
                });
            }
        };

        $scope.eventsSource = [$scope.events];


        $scope.uiConfig = {
            calendar:{
                loading: function(isLoading) {$scope.eventsLoading = isLoading},
                eventAfterRender: function(event, element, view) {console.log('render');},
                ignoreTimezone: true,
                height: 180,
                header: {left: 'prev', right: 'next', center: 'title'}
            }
        };'

in chrome, the console logs 'render' for each event that is rendered. however, in safari this doesn't get logged. this plunker works fine in safari, so I guess I am doing something wrong. any help would be greatly appreciated.

here is a plunker replicating the issue. open it in chrome: works great. in safari: not so great.

As @ggayan says, there's a bug that happens when you edit an event and immediately try to delete it. We've just found the cause of this bug.
In the applyChanges function, there's a comparison between an event's newToken and removedToken to determine if the event has been changed or removed. The problem is that we are trying to remove the event before angular knows that it (and its token) changed. When angular compares removedToken with newToken what it's really comparing is the outdated token with the current token, and so, it marks the removed event as changed and re-renders it.
A more reliable way to check if an event has been changed would be to verify if the new token of the event is in the addedTokens. If an event has changed, its old token should be in the removedTokens and its new token in the addedTokens.
We added some console log for these 'zombie' events in the plunkr.

Moved from discussion in #20

I’m trying to set up a calendar according to the instructions. The calendar itself shows up on the page, but it doesn’t display any events.

Code in template:

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar">

Code in my controller:

var date = new Date();
    var d = date.getDate();
    d = ("0" + d).slice(-2)
    var m = date.getMonth();
    m = ("0" + m).slice(-2)
    var y = date.getFullYear();
![capture](https://f.cloud.github.com/assets/5212483/955159/7667b86a-0425-11e3-8e29-12bd3c81a8ca.PNG)

$scope.eventSources = [
        {
            title  : 'Visite : E Leclerc Vannes',
            type   : 'gms',
            start  : y+'-'+m+'-'+d+' 09:00:00',
            end    : y+'-'+m+'-'+d+' 10:00:00',
            allDay : false
        }, {
            title  : 'Visite : Carrefour St Herblain',
            type   : 'gms',
            start  : y+'-'+m+'-'+d+' 14:00:00',
            end    : y+'-'+m+'-'+d+' 15:00:00',
            allDay : false
        }, {
            title  : 'Appel : Auchan St Sébastien/Loire',
            type   : 'gms',
            start  : y+'-'+m+'-'+d+' 15:00:00',
            allDay : true
        }, {
            title  : 'Visite : Boucherie charcuterie Leroy',
            type   : 'rhf',
            start  : y+'-'+m+'-'+d+' 16:00:00',
            end    : y+'-'+m+'-'+d+' 17:00:00',
            allDay : false 
        }
    ];

When I loop through eventSources in the template it works:

    <li ng-repeat="e in eventSources">
        {{e.title}} {{e.start}}
    </li>

The calendar doesn’t show anything, though. There are no errors in console, too. Does any of you has an idea of what’s going on here?

Is it possible to provide a function to supply the events as described here: http://arshaw.com/fullcalendar/docs/event_data/events_function/

I couldn't figure out how to do it. If not, how do you know which data-range to provide events for?

Thanks

Hey guys,
I'm using the UI calendar inside a boostrap accordion directive like this:

 <accordion>
            <accordion-group heading="{{viewModel.localizedResources.calendar}}">
                <div ui-calendar="viewModel.calendarConfig" 
                     ng-model="viewModel.calendarEventSources"
                     class="calendarItemList"
                     calendar="calendar">
                </div>                 
            </accordion-group>
  </accordion>

It seems the ui-calendar has rendering issues inside a container hidden with display:none, which the accordion uses to hide/show it's content.

Does anybody know a fix or a workaround for this issue ?

Thanks.

Hey @joshkurz

Do you think you can move the ui-calendar directive over here?

• Refer to ui-select2 and ui-date repos for reference
• Don't mess with angular-ui repo (for now)
• Clone from angular-ui and push to ui-calendar so the old history is preserved and pull-request merging can be done easily
• Use git mv and git rm to restructure the folder
  • source (unminified) goes in the root of the project, with a ui- prefix.
  • cut out the block of demo and put it into docs/
• Copy the component.json from one of the reference repos and run bower install
• Copy the .travis.yml from inside of components/angular-module and enable travis
• Instead of ui.directives module, use ui.calendar and instead of ui.config do uiCalendarConfig

Some of these may change down the road, but for now lets start breaking up the project where we can.

Hey guys, I'm using ui-calendar in on project and I render an event with this code:

$scope.createEventOnClick = function( date, allDay, jsEvent, view ){
      end_date = new Date(date);
      end_date.setMinutes(date.getMinutes()+60);
      $scope.newEvent = {title: "", start_date: date, start: date, end_date: end_date, end: end_date, allDay: allDay };
      $scope.myCalendar.fullCalendar('renderEvent', $scope.newEvent);
      $scope.$apply(function(){
        $('#newEventForm').show();
      });
    };

This way, when the user clicks in one calendar slot, the event is rendered and the for for editing the event also appears.
Then comes my question. Is there any way of binding the title input of the form to the newly rendered event?

 $scope.$watch('myCalendar.fullCalendar.view', function(newVal,oldVal){
      console.log("fullCalendar Watch:",newVal, oldVal);
    });

newVal and oldVal are always undefined.
I'm not even sure that myCalendar is on the scope. :/

<div ui-calendar="options.calendar"
     calendar="myCalendar"
     ng-model="eventSources">
</div>

I've implemented runtime-switchable localization in my application, e.g. there are some buttons on the UI with which you can change the application language. All UI elements reflect the selected language except the calendar. It seems that changing calendar UI properties after initialization has no effect. Is that right or I'm doing something wrong?

I'm using ng-view and $routeProvider for my views.

My code is like this:

$scope.$on('localizationResourcesUpdated', function(evt) {
    $scope.uiConfig.calendar.dayNames = localizationService.getLocalizedString('dayNames');
    $scope.uiConfig.calendar.dayNamesShort = localizationService.getLocalizedString('dayNamesShort');
    });

I am at a loss at how to implement draggable events such as:

http://arshaw.com/js/fullcalendar-1.6.2/demos/external-dragging.html

into the angular calendar.

When creating a new event in the select event, it is not rendered until the next time I click somewhere on the calendar.

$scope.onSelect = function (start, end, allDay) {
        $scope.events.push({
            title: 'new event',
            start: start,
            end: end,
            allDay: allDay,
            className: ['openSesame']
        });
    }

In order to render the event right away, I'd have to use the renderEvent event and make it sticks. But then it wouldn't be added to the event source. Unless I do add it to the events source too, but then it will render twice obviously...

Is there a way to force the event to render once it's been added to the event source inside the select event handler ?

It'd be great if we can allow setting eventRender, viewRender, etc. directly in the directive:

<div ui-calendar ng-model="eventSources" eventRender="event.render" viewRender="view.render">

This would make the usage feeling more Angular; right now we're forced to put rendering specific logic into controllers which is not an ideal Angular situation.

The only one I don't know how to fix is this one:

The ui-calendar directive expects the eventSources object to be any type allowed in the documentation for the fullcalendar. docs Note that all calendar options are passed directly into fullCalendar, so you will need to wrap listeners to fullCalendar events in scope.$apply, as in example above.

But there is no example above....

I'll send a pull request for the others.