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
• businessHours
• titleFormat
• lang
• timeFormat

Sending Actions to calendar

For the actions to work we need to register a property that will allow us to access FullCalendar element from our controller.

// app/templates/application.hbs
{{full-calendar
events=events
defaultView="agendaWeek"
allDaySlot=false
register-as="accessToFullCalendar"
nowIndicator=true}}

Sending actions from controller to FullCalendar:

// app/controllers/application.js
export default Ember.Controller.extend({
  
  accessToFullCalendar: null,
  
  actions: {
    prev: function() {
      this.get('accessToFullCalendar').send('prev');
    }
  }
});

Timezone

• timezone
• now

Agenda Options

• allDaySlot
• allDayText
• maxTime
• minTime
• scrollTime
• slotEventOverlap
• slotLabelFormat
• slotLabelInterval
• snapDuration

Current Date

• defaultDate

Current Date Actions

• prev
  this.get('accessToFullCalendar').send('prev')

• next
  this.get('accessToFullCalendar').send('next')

• prevYear
  this.get('accessToFullCalendar').send('prevYear')

• nextYear
  this.get('accessToFullCalendar').send('nextYear')

• gotoDate
  this.get('accessToFullCalendar').send('gotoDate', new Date(2014, 1, 1))

• incrementDate
  this.get('accessToFullCalendar').send('incrementDate', {months:1})

Please check dummy app in tests for usage example.

Event Rendering

• eventColor
• eventBackgroundColor
• eventBorderColor
• eventTextColor
• nextDayThreshold
• eventOrder
• eventRender (callback)
• eventAfterRender (callback)
• eventAfterAllRender (callback)
• eventDestroy (callback)

Event Rendering Actions

• renderEvent (method)
  this.get('accessToFullCalendar').send('renderEvent', {title: "New Event", start: new Date(2014, 1, 1)})

• rerenderEvents (method)
  this.get('accessToFullCalendar').send('rerenderEvents')

Supported Callbacks

• eventClick
• eventDragStart
• eventDragStop
• eventDrop
• eventResize
• eventResizeStart
• eventResizeStop
• eventMouseover
• eventMouseout
• 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.

About Icicle Technologies