An Ember Component for FullCalendar and FullCalendar Scheduler
npm install ember-fullcalendar 
ember-fullcalendar brings the power of FullCalendar and FullCalendar Scheduler to Ember.
This addon works in Ember 2.12+ with no deprecations.
To install it run:
``ember install ember-fullcalendar`
If you upgrade from a previous version of ember-fullcalendar using FullCalendar 3.x, note the FullCalendar v4 release notes and upgrade guide.
To use plugins, you need to pass a plugins array to the full-calendar component and add any plugins you need to the dependencies of your app. The plugin css must be included by adding the plugin to your environment.js.
You no longer need to define includeLocales in your environment.js, but instead import and pass them in the locales option.
Instead of setting includeScheduler use the appropriate Scheduler plugins.
A simple example:
`javascript
import dayGridPlugin from '@fullcalendar/daygrid';
let events = Ember.A([{
title: 'Event 1',
start: '2016-05-05T07:08:08',
end: '2016-05-05T09:08:08'
}, {
title: 'Event 2',
start: '2016-05-06T07:08:08',
end: '2016-05-07T09:08:08'
}, {
title: 'Event 3',
start: '2016-05-10T07:08:08',
end: '2016-05-10T09:48:08'
}, {
title: 'Event 4',
start: '2016-05-11T07:15:08',
end: '2016-05-11T09:08:08'
}]);
let plugins = [dayGridPlugin];
{{full-calendar events=events plugins=plugins}}
`
The CSS of the plugins you are using must be included by defining them in your config/environment.js file:
`javascript`
emberFullCalendar: {
plugins: ['core', 'daygrid', 'list'],
}
To call FullCalendar methods, you need a reference to the calendar object.
A reference gets passed with every FullCalendar callback as last parameter, so you can use e.g. viewSkeletonRender to get the object:
`javascript
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
viewSkeletonRender(info, calendar) {
this.set('calendar', calendar);
},
nextMonth() {
this.calendar.next();
},
}
});
`
`handlebars
// app/controllers/application.hbs
{{full-calendar viewSkeletonRender=(action "viewSkeletonRender")}}
`
Where possible, this addon takes advantage of DDAU (Data Down, Actions Up) to allow your Ember app to interact with FullCalendar from outside of the component. Below are a list of properties that override default FullCalendar properties:
- viewName _(replaces defaultView)_ - allows you to change the view mode from outside of the component. For example, when using header=false, you can use your own buttons to modify the viewName property to change the view of the calendar.
- viewRange - can be used in conjunction with viewName to simultaneously navigate to a new date when switching to a new view. See the docs.
- onViewChange - pass an action to be notified when the view changes. This is different than the viewRender callback provided by FullCalendar as it is only triggered when the view changes and is not when any of the date navigation methods are called.
- date _(replaces defaultDate)_ - allows you to change the date from outside of the component.
Add the component to your template:
`handlebars`
// app/templates/application.hbs
{{full-calendar events=events eventClick=(action 'clicked')}}
Add some events:
`javascript
// app/routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return {
events: Ember.A([{
title: 'Partayyyy', start: new Date()
}])
};
}
});
`
Register the action in your controller or component:
`javascript
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
clicked({event, jsEvent, view}){
this.showModal(event);
}
}
});
`
or, the better option, is to set it in your config/environment.js file like so:`javascript
var ENV = {
emberFullCalendar: {
schedulerLicenseKey: '',
}
// Other options here, as needed.
};
`FullCalendar Locales
To use locales, import and pass them in the