forked from scoutforpets/ember-fullcalendar
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from Foodee/tech-debt/patrickemuller/bump-fullc…
…alendar-to-v6 Bump fullcalendar to v6
- Loading branch information
Showing
10 changed files
with
10,894 additions
and
20,415 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,20 +11,10 @@ This addon works in Ember 2.12+ with no deprecations. | |
|
||
To install it run: | ||
|
||
```ember install ember-fullcalendar``` | ||
```yarn add -D https://[email protected]/Foodee/ember-fullcalendar.git``` | ||
|
||
## Overview | ||
This addon currently supports every option and callback currently available for FullCalendar and FullCalendar Scheduler 4.4. Please see the [FullCalendar documentation](http://fullcalendar.io/docs/) for more information. | ||
|
||
## Upgrading | ||
|
||
If you upgrade from a previous version of `ember-fullcalendar` using FullCalendar 3.x, note the [FullCalendar v4 release notes and upgrade guide](https://fullcalendar.io/docs/upgrading-from-v3). | ||
|
||
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](#usage). | ||
|
||
You no longer need to define `includeLocales` in your environment.js, but instead [import and pass them in the `locales` option](#locales). | ||
|
||
Instead of setting `includeScheduler` use the appropriate Scheduler plugins. | ||
This addon currently supports every option and callback currently available for FullCalendar and FullCalendar Scheduler 6. Please see the [FullCalendar documentation](https://fullcalendar.io/docs#toc) for more information. | ||
|
||
## Usage | ||
|
||
|
@@ -52,33 +42,21 @@ let events = Ember.A([{ | |
}]); | ||
|
||
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 your `config/environment.js` file: | ||
|
||
```javascript | ||
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: | ||
A reference gets passed with every FullCalendar callback as last parameter, so you can use e.g. `viewDidMount` to get the object: | ||
|
||
```javascript | ||
// app/controllers/application.js | ||
import Ember from 'ember'; | ||
|
||
export default Ember.Controller.extend({ | ||
actions: { | ||
viewSkeletonRender(info, calendar) { | ||
viewDidMount(info, calendar) { | ||
this.set('calendar', calendar); | ||
}, | ||
|
||
|
@@ -92,20 +70,42 @@ export default Ember.Controller.extend({ | |
```handlebars | ||
// app/controllers/application.hbs | ||
{{full-calendar viewSkeletonRender=(action "viewSkeletonRender")}} | ||
<FullCalendar | ||
@plugins={{plugins}} | ||
@events={{eventsArray}} | ||
@viewName={{viewName}} | ||
@date={{startDate}} | ||
@viewDidMount={{action "viewDidMount"}} | ||
@timezone="UTC" | ||
@eventRender={{this.eventRender}} | ||
@resources={{this.resources}} | ||
@datesAboveResources={{true}} | ||
@groupByDateAndResource={{true}} | ||
@firstDay={{0}} | ||
@headerToolbar={{false}} | ||
@dayHeaderFormat={{hash weekday="long"}} | ||
@weekday="long" | ||
@slotEventOverlap={{false}} | ||
@slotDuration="00:15:00" | ||
@slotLabelInterval="01:00" | ||
@slotMinTime="06:00" | ||
@slotMaxTime="23:00" | ||
@nowIndicator={{false}} | ||
@selectable={{true}} | ||
@editable={{true}} | ||
@selectHelper={{false}} | ||
/> | ||
``` | ||
|
||
### 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` _(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. | ||
- `viewName` _(replaces `initialView`)_ - 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](https://fullcalendar.io/docs/Calendar-changeView). | ||
|
||
- `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. | ||
- `date` _(replaces `initialDate`)_ - 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: | ||
|
@@ -114,7 +114,11 @@ Add the component to your template: | |
|
||
```handlebars | ||
// app/templates/application.hbs | ||
{{full-calendar events=events eventClick=(action 'clicked')}} | ||
<FullCalendar | ||
@plugins={{plugins}} | ||
@events={{eventsArray}} | ||
@eventClick="{{action 'clicked'}}" | ||
/> | ||
``` | ||
|
||
Add some events: | ||
|
@@ -163,6 +167,3 @@ var ENV = { | |
|
||
## FullCalendar Locales | ||
To use locales, import and pass them in the `locales` option. [See the docs for more info](https://fullcalendar.io/docs/locale) | ||
|
||
## Fastboot Support | ||
This addon now has minimal Fastboot support via #46. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.