Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
ember-fullcalendar
Advanced tools
Readme
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
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.
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:
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:
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:
// 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")}}
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.
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);
}
}
});
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 as schedulerLicenseKey
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.
};
To use locales, import and pass them in the locales
option. See the docs for more info
This addon now has minimal Fastboot support via #46.
FAQs
An Ember Component for FullCalendar and FullCalendar Scheduler
The npm package ember-fullcalendar receives a total of 1,866 weekly downloads. As such, ember-fullcalendar popularity was classified as popular.
We found that ember-fullcalendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.