Skip to content
An Ember addon that wraps fullcalendar in a component
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
addon move fullcalendar to addon Oct 8, 2019
app improve documentation Feb 14, 2020
config Add docs (#1) Oct 29, 2019
tests add ci config Oct 29, 2019
vendor Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
.editorconfig add ci config Oct 29, 2019
.ember-cli Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
.eslintignore Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
.eslintrc.js
.gitignore Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
.npmignore Add docs (#1) Oct 29, 2019
.nvmrc Add docs (#1) Oct 29, 2019
.template-lintrc.js Add docs (#1) Oct 29, 2019
.watchmanconfig
CHANGELOG.md improve documentation Feb 14, 2020
CONTRIBUTING.md Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
LICENSE.md Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
README.md
ember-cli-build.js Initial Commit from Ember CLI v3.13.1 Oct 8, 2019
index.js add node assets to add-on configuration Oct 12, 2019
package-lock.json 1.0.1 Feb 14, 2020
package.json
testem.js Initial Commit from Ember CLI v3.13.1 Oct 8, 2019

README.md

@mariana-tek/ember-fullcalendar

CircleCI

An Ember addon that wraps Fullcalendar (v4) in a component.

Compatibility

  • Ember.js v3.4 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Installation

1. Install Ember Addon

ember install @mariana-tek/ember-fullcalendar

This addon includes @fullcalendar/core as a dependency, but does not include any fullcalendar plugins which you will need to install manually.

2. Install additional fullcalendar plugins

As Fullcalendar v4 has a more "a la carte" structure, you will need to install the plugins you plan to use. Documentation can be found at https://fullcalendar.io/docs/initialize-es6 and https://fullcalendar.io/docs/plugin-index.

3. Import stylesheets from plugins that have styles

// ember-cli-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    // ...all your configuration

    // If you install the @fullcalendar/daygrid plugin,
    // you would import it's stylesheet like so:
    app.import('node_modules/@fullcalendar/daygrid/main.css');

    return app.toTree();
};

Usage

Inspired by fullcalendar-react this addon is written as a very lightweight wrapper around Fullcalendar v4. With one exception (getFullCalendarRef) the addon simply passes attributes through to Fullcalendar. If Fullcalendar has a complimentary option it will be utilized, otherwise the attribute will simply be ignored. To use this plugin you will need to be familiar with Fullcalendar's API.

<FullCalendar
    @defaultDate={{this.defaultDate}}
    @defaultView={{this.defaultView}}
    @events={{this.events}}
    @plugins={{this.plugins}}
/>

getFullCalendarRef

<FullCalendar
    @defaultDate={{this.defaultDate}}
    @getFullCalendarRef={{action (mut this ourCalendarRef)}}
/>

Most attributes (e.g. eventClick, slotDuration) can be passed directly to the component. A few parts of Fullcalendar's API (e.g. changeView, gotoDate) will require you to pass an action or function to getFullCalendarRef that stores the reference to fullcalendar so that you can call it directly:

this.ourCalendarRef.gotoDate(new Date(1999, 1, 1))

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.