ember-fullcalendar
ember-fullcalendar brings the power of FullCalendar and FullCalendar Scheduler to Ember.
Installation
This addon works in Ember 2.12+ with no deprecations.To install it run:
``
ember install ember-fullcalendar
``Overview
This addon currently supports every option and callback currently available for FullCalendar and FullCalendar Scheduler 4.4. Please see the FullCalendar documentation for more information.Upgrading
If you upgrade from a previous version ofember-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.Usage
A simple example: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}}
Plugins
The CSS of the plugins you are using must be included by defining them in yourconfig/environment.js
file:emberFullCalendar: {
plugins: ['core', 'daygrid', 'list'],
}
FullCalendar Methods
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:// 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();
},
}
});
// app/controllers/application.hbs
{{full-calendar viewSkeletonRender=(action "viewSkeletonRender")}}
DDAU
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
(replacesdefaultView
) - allows you to change the view mode from outside of the component. For example, when usingheader=false
, you can use your own buttons to modify theviewName
property to change the view of the calendar.
viewRange
- can be used in conjunction withviewName
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 theviewRender
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
(replacesdefaultDate
) - allows you to change the date from outside of the component.
FullCalendar Callbacks
All FullCalendar and FullCalendar Scheduler callbacks are supported and can be handled using Ember Actions. Here's a simple example:Add the component to your template:
// app/templates/application.hbs
{{full-calendar events=events eventClick=(action 'clicked')}}
Add some events:
// 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:
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
clicked({event, jsEvent, view}){
this.showModal(event);
}
}
});
FullCalendar Scheduler
By default, the addon uses the Free Trial License Key provided by FullCalendar. If you have a paid license key, you may set it by explicitly passing it into the component asschedulerLicenseKey
or, the better option, is to set it in your config/environment.js
file like so:var ENV = {
emberFullCalendar: {
schedulerLicenseKey: '<your license key>',
}
// Other options here, as needed.
};
FullCalendar Locales
To use locales, import and pass them in thelocales
option. See the docs for more info