Gathering detailed insights and metrics for ember-fullcalendar
Gathering detailed insights and metrics for ember-fullcalendar
Gathering detailed insights and metrics for ember-fullcalendar
Gathering detailed insights and metrics for ember-fullcalendar
npm install ember-fullcalendar
Module System
Unable to determine the module system for this package.
Min. Node Version
Typescript Support
Node Version
NPM Version
39 Stars
142 Commits
45 Forks
4 Watching
26 Branches
13 Contributors
Updated on 30 May 2024
JavaScript (91.03%)
HTML (5.92%)
Handlebars (3.06%)
Cumulative downloads
Total Downloads
Last day
-20.8%
183
Compared to previous day
Last week
-25.1%
1,125
Compared to previous week
Last month
-30.6%
6,071
Compared to previous month
Last year
39.8%
127,435
Compared to previous year
9
27
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:
1import dayGridPlugin from '@fullcalendar/daygrid'; 2 3let events = Ember.A([{ 4 title: 'Event 1', 5 start: '2016-05-05T07:08:08', 6 end: '2016-05-05T09:08:08' 7}, { 8 title: 'Event 2', 9 start: '2016-05-06T07:08:08', 10 end: '2016-05-07T09:08:08' 11}, { 12 title: 'Event 3', 13 start: '2016-05-10T07:08:08', 14 end: '2016-05-10T09:48:08' 15}, { 16 title: 'Event 4', 17 start: '2016-05-11T07:15:08', 18 end: '2016-05-11T09:08:08' 19}]); 20 21let plugins = [dayGridPlugin]; 22 23{{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:
1 emberFullCalendar: { 2 plugins: ['core', 'daygrid', 'list'], 3 }
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:
1// app/controllers/application.js 2import Ember from 'ember'; 3 4export default Ember.Controller.extend({ 5 actions: { 6 viewSkeletonRender(info, calendar) { 7 this.set('calendar', calendar); 8 }, 9 10 nextMonth() { 11 this.calendar.next(); 12 }, 13 } 14});
1// app/controllers/application.hbs 2 3{{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:
1// app/templates/application.hbs 2{{full-calendar events=events eventClick=(action 'clicked')}}
Add some events:
1// app/routes/application.js 2import Ember from 'ember'; 3 4export default Ember.Route.extend({ 5 model: function() { 6 return { 7 events: Ember.A([{ 8 title: 'Partayyyy', start: new Date() 9 }]) 10 }; 11 } 12});
Register the action in your controller or component:
1// app/controllers/application.js 2import Ember from 'ember'; 3 4export default Ember.Controller.extend({ 5 actions: { 6 clicked({event, jsEvent, view}){ 7 this.showModal(event); 8 } 9 } 10});
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:
1var ENV = { 2 emberFullCalendar: { 3 schedulerLicenseKey: '<your license key>', 4 } 5 // Other options here, as needed. 6};
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.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 3/12 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
114 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More