miguelcobain / ember-cli-full-calendar

An Ember wrapper for jQuery FullCalendar

Ember CLI Full Calendar

This is a Ember wrapper for jQuery FullCalendar plugin.

Some of the common properties, methods have been hooked up. The rest will be added as required.

Installation

First, install the npm package:

npm install --save-dev ember-cli-full-calendar

Next, setup the component:

ember g full-calendar

Usage

Use the full-calendar component -

{{full-calendar events=events}}

Supported Options

• events(array, JSON, or function)
• eventSources
• header
• customButtons
• theme
• firstDay
• isRTL
• weekends
• hiddenDays
• fixedWeekCount
• weekNumbers
• height
• editable
• selectable
• dragRevertDuration
• dragOpacity
• dragScroll
• eventStartEditable
• eventDurationEditable
• defaultView
• minTime
• maxTime
• scrollTime
• slotEventOverlap
• businessHours
• titleFormat
• timezone
• lang
• timeFormat
• slotLabelFormat
• defaultDate

Supported Callbacks

• eventClick
• eventDragStart
• eventDragStop
• eventDrop
• eventResize
• eventResizeStart
• eventResizeStop
• eventRender
• eventAfterRender
• eventAfterAllRender
• eventDestroy
• select
• dayClick
• viewRender

Setting Up Callbacks

All supported callbacks can be captured using Ember actions.

Add the component to your template file.

// app/templates/application.hbs
{{full-calendar events=model.events eventClick=(action "clicked") }}

Create the events.

// app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
	model: function() {
		return {
			events: Ember.A([{
				title: "Hackathon", start: Date.now()
			}])
		};
	}
});

Register for the action in your controller.

// app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
	actions: {
		clicked(event, jsEvent, view){
			console.log(`${event.title} was clicked!`)
			// Prints: Hackathon was clicked!
		}
	}
});

I18n

Include the language file.

// ember-cli-build.js
module.exports = function(defaults) {
  var app = ...

  // Include fullcalendar language file
  // Full list of available languages: https://github.com/fullcalendar/fullcalendar/tree/master/dist/lang
  app.import('bower_components/fullcalendar/dist/lang/es.js');
};

Set fullcalendar language

// app/templates/application.hbs
{{full-calendar events=model.events lang="es"}}

License

Available under the MIT License.