Skip to content

Commit

Permalink
Merge pull request #1 from Foodee/tech-debt/patrickemuller/bump-fullc…
Browse files Browse the repository at this point in the history
…alendar-to-v6

Bump fullcalendar to v6
  • Loading branch information
patrickemuller authored Jun 27, 2024
2 parents e1bb995 + 3ebe7dc commit 5facd55
Show file tree
Hide file tree
Showing 10 changed files with 10,894 additions and 20,415 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
/npm-debug.log*
/testem.log
/yarn-error.log
.idea/
.tool-versions
ember-fullcalendar-*

# ember-try
/.node_modules.ember-try/
Expand Down
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2016
Copyright (c) 2024

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
71 changes: 36 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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);
},

Expand All @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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.
99 changes: 74 additions & 25 deletions addon/components/full-calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,40 +41,62 @@ export default Component.extend(InvokeActionMixin, {
'rerenderDelay', 'defaultRangeSeparator',

// toolbar
'header', 'footer', 'titleFormat', 'titleRangeSeparator', 'buttonText', 'buttonIcons', 'customButtons',
'headerToolbar', 'footerToolbar', 'titleFormat', 'titleRangeSeparator', 'buttonText', 'buttonIcons', 'customButtons',

// theme
'themeSystem', 'bootstrapGlyphicons', 'bootstrapFontawesome',

// sizing
'height', 'contentHeight', 'aspectRatio', 'handleWindowResize', 'windowResizeDelay',
'height', 'contentHeight', 'aspectRatio', 'handleWindowResize', 'windowResizeDelay', 'stickyHeaderDates', 'stickyFooterScrollbar',

// views
'views', 'defaultView', 'fixedWeekCount', 'showNonCurrentDates', 'allDaySlot', 'allDayText', 'slotEventOverlap',
'timeGridEventMinHeight',
'views', 'initialView', 'fixedWeekCount', 'showNonCurrentDates', 'slotEventOverlap',
'eventMinHeight', 'allDaySlot',

// views hooks
'allDayClassNames', 'allDayContent', 'allDayDidMount', 'allDayWillUnmount',

// list
'listDayFormat', 'listDayAltFormat', 'noEventsMessage',
'listDayFormat', 'listDaySideFormat',

// list hooks
'noEventsClassNames', 'noEventsContent', 'noEventsDidMount', 'noEventsWillUnmount',

// resource
'resourceGroupField', 'resourceAreaWidth', 'resourceAreaColumns', 'resourcesInitiallyExpanded',
'slotMinWidth', 'datesAboveResources',

// resource hooks
'resourceGroupLabelClassNames', 'resourceGroupLabelContent', 'resourceGroupLabelDidMount', 'resourceGroupLabelWillUnmount',
'resourceGroupLaneClassNames', 'resourceGroupLaneContent', 'resourceGroupLaneDidMount', 'resourceGroupLaneWillUnmount',
'resourceAreaHeaderClassNames', 'resourceAreaHeaderContent', 'resourceAreaHeaderDidMount', 'resourceAreaHeaderWillUnmount',


// timeline
'resourceGroupField', 'resourceGroupText', 'resourceAreaWidth', 'resourceLabelText', 'resourceColumns',
'resourcesInitiallyExpanded', 'slotWidth', 'datesAboveResources',
// slot hooks
'slotLabelClassNames', 'slotLabelContent', 'slotLabelDidMount', 'slotLabelWillUnmount', 'slotLaneClassNames',
'slotLaneContent', 'slotLaneDidMount', 'slotLaneWillUnmount',

// custom views
'duration', 'dayCount', 'visibleRange',

// date & time
'weekends', 'hiddenDays', 'columnHeader', 'columnHeaderFormat', 'columnHeaderText', 'columnHeaderHtml',
'slotDuration', 'slotLabelInterval', 'slotLabelFormat', 'minTime', 'maxTime', 'scrollTime',
'weekends', 'hiddenDays', 'dayHeaders', 'dayHeaderFormat', 'slotDuration', 'slotLabelInterval', 'slotLabelFormat',
'slotMinTime', 'slotMaxTime', 'scrollTime',

// date & time hooks
'dayHeaderClassNames', 'dayHeaderContent', 'dayHeaderDidMount', 'dayHeaderWillMount',

// date navigation
'defaultDate', 'dateIncrement', 'dateAlignment', 'validRange',
'initialDate', 'dateIncrement', 'dateAlignment', 'validRange',

// date nav links
'navLinks', 'navLinkDayClick', 'navLinkWeekClick',

// week numbers
'weekNumbers', 'weekNumbersWithinDays', 'weekNumberCalculation', 'weekLabel',
'weekNumbers', 'weekNumbersWithinDays', 'weekNumberCalculation', 'weekText', 'weekNumberFormat',

// Week numbers hooks
'weekNumberClassNames', 'weekNumberContent', 'weekNumberDidMount', 'weekNumberWillUnmount',

// selection
'selectable', 'selectMirror', 'unselectAuto', 'unselectCancel', 'selectOverlap', 'selectConstraint', 'selectAllow',
Expand All @@ -83,35 +105,40 @@ export default Component.extend(InvokeActionMixin, {
// now indicator
'nowIndicator', 'now',

// how indicator hooks
'nowIndicatorClassNames', 'nowIndicatorContent', 'nowIndicatorDidMount', 'nowIndicatorWillUnmount',

// business hours
'businessHours',

// event model
'eventDataTransform', 'allDayDefault', 'defaultTimedEventDuration', 'defaultAllDayEventDuration', 'forceEventDuration',
'eventDataTransform', 'defaultAllDay', 'defaultTimedEventDuration', 'defaultAllDayEventDuration', 'forceEventDuration',

// event sources
'events', 'eventSources', 'startParam', 'endParam', 'timezoneParam', 'lazyFetching',

// event display
'eventColor', 'eventBackgroundColor', 'eventBorderColor', 'eventTextColor', 'eventTimeFormat',
'displayEventTime', 'displayEventEnd', 'nextDayThreshold', 'eventOrder', 'progressiveEventRendering',
'displayEventTime', 'displayEventEnd', 'nextDayThreshold', 'eventOrder', 'progressiveeventRendering',

// event dragging & resizing
'editable', 'eventStartEditable', 'eventResizableFromStart', 'eventDurationEditable', 'eventResourceEditable',
'droppable', 'eventDragMinDistance', 'dragRevertDuration', 'dragScroll', 'snapDuration', 'allDayMaintainDuration',
'eventOverlap', 'eventConstraint', 'eventAllow', 'dropAccept',

// event popover
'eventLimit', 'eventLimitClick', 'eventLimitText', 'dayPopoverFormat',
'dayMaxEventRows', 'moreLinkClick', 'dayPopoverFormat', 'moreLinkClassNames', 'moreLinkContent', 'moreLinkDidMount',
'moreLinkWillUnmount',

// resource data
'resources', 'refetchResourcesOnNavigate',

// resources
'resourceOrder', 'filterResourcesWithEvents', 'resourceText',
'resourceOrder', 'filterResourcesWithEvents', 'resourceLabelClassNames', 'resourceLabelContent', 'resourceLabelDidMount',
'resourceLabelWillUnmount', 'resourceLaneClassNames', 'resourceLaneContent', 'resourceLaneDidMount', 'resourceLaneWillUnmount',

// international
'locale', 'locales', 'firstDay', 'dir',
'locale', 'locales', 'firstDay', 'direction',

// timezone
'timeZone',
Expand All @@ -128,19 +155,25 @@ export default Component.extend(InvokeActionMixin, {
'windowResize',

// view api
'viewSkeletonRender', 'viewSkeletonDestroy', 'datesRender', 'datesDestroy',
'viewClassNames', 'viewDidMount', 'viewWillUnmount', 'datesSet',

// date & time
'dayRender',
// for injecting classNames
'dayCellClassNames',
// for if you injected DOM content via dayRender
'dayCellContent',
// for if you needed the DOM element in dayRender
'dayCellDidMount',
'dayCellWillUnmount',
'dayMinWidth',

// date clicking & selecting
'dateClick', 'select', 'unselect',

// event sources
'eventSourceSuccess', 'eventSourceFailure', 'loading',

// event display
'eventRender', 'eventPositioned', 'eventDestroy',
// event display hooks
'eventClassNames', 'eventContent', 'eventDidMount', 'eventWillUnmount',

// clicking and hovering
'eventClick', 'eventMouseEnter', 'eventMouseLeave',
Expand All @@ -151,6 +184,15 @@ export default Component.extend(InvokeActionMixin, {

// resource rendering
'resourceRender',

// manipulation
'eventDrop', 'eventResize', 'eventReceive', 'eventLeave', 'eventAdd', 'eventChange', 'eventRemove', 'eventsSet',
'initialEvents',

// resource hooks
'resourceAdd', 'resourceChange', 'resourceRemove', 'resourcesSet',


],

/////////////////////////////////////
Expand Down Expand Up @@ -201,7 +243,14 @@ export default Component.extend(InvokeActionMixin, {
calendarOptions: newOptions
});
}
this.calendar.mutateOptions(updates, removals, false, deepEqual);

Object.entries(updates).forEach(([key, value]) => {
this.calendar.setOption(key, value)
});

Object.entries(removals).forEach(([key, value]) => {
this.calendar.setOption(key, value)
});
},

/*
Expand Down Expand Up @@ -245,11 +294,11 @@ export default Component.extend(InvokeActionMixin, {

// Handle overriden properties
if (this.get('viewName') !== undefined) {
options['defaultView'] = this.get('viewName');
options['initialView'] = this.get('viewName');
}

if (this.get('date') !== undefined) {
options['defaultDate'] = this.get('date');
options['initialDate'] = this.get('date');
}

return options;
Expand Down
10 changes: 0 additions & 10 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,6 @@ module.exports = {
target = target.app;
}

var config = target.project.config(target.env) || {};

var plugins = config.emberFullCalendar.plugins || [
'core',
];

plugins.forEach(plugin => {
this.import(`node_modules/@fullcalendar/${plugin}/main.css`);
});

this._super.included.apply(this, arguments);
}
};
Loading

0 comments on commit 5facd55

Please sign in to comment.