fl-multi-calendar-2

Visualise multiple calendars at once

To use it you will need three elements:
- x-div with MultiCalendar as the controller
- The CSS for the calendar (which is in the build folder)
- A configuration object

Read the Docs

Configuration object

In the HTML, add your x-div element with fl-multi-calendar-2.js as the data-controller
and make sure to add the name of your configuration object name to data-config.
The configuration object must be in the global scope and must be defined before the x-div.

Like this:

`` HTML

`

Your configuration object must specify a URL where the events will be fetched and an
array of objects where each represent the configuration for one calendar in
MultiCalendar.

Example valid configuration object:

` javascript
// Callbacks
function dayHeaderClick(date, events) {
console.log('Day header click.');
console.dir(arguments);
}

function eventClick(eventConfig) {
console.log('Event click.');
console.dir(arguments);
}

function titleClick(calendarConfig) {
console.log('Title click.');
console.dir(arguments);
}

myConfigObject = {
loadUrl: 'http://localhost:5000',
titleBarFormat: 'YYYY', // optional - A valid moment.js format
dayHeaderFormat: 'dddd, MMM DD', // optional - A valid moment.js format
calendars: [{
name: 'Karl Marx',
id: '12345',
description: 'Software Developer', //optional
titleClick: titleClick, //optional
dayHeaderClick: dayHeaderClick, //optional
eventClick: eventClick, //optional
}, {
name: 'Friedrich Hegel',
id: '7899',
description: 'HR Manager', //optional
titleClick: titleClick, //optional
dayHeaderClick: dayHeaderClick, //optional
eventClick: eventClick, //optional
}, {
name: 'Immanuel Kant',
id: '23456',
description: 'Research and Revelopement', //optional
titleClick: titleClick, //optional
dayHeaderClick: dayHeaderClick, //optional
eventClick: eventClick, //optional
}
],
}
`

Event data

Event data sent from the server should follow this structure:

` javascript
{
"12345": [
{
"title": "46 Hanover House, London E14 8RH ",
"description": "Mum's birthday",
"start":"2016-04-25T09:00:00",
"end":"2016-04-25T10:00:00",
"classes": [ // Optional. CSS classes to be attatched to the event object
"fl-mc-event-color-black"
],
}
],
}
`

DOM Events

The main wrapper emmits the following events:

- fl-mc-loading-start - Dispatched when an event request is sent to the server.
- fl-mc-loading-complete - Dispatched after events from the server finished rendering.

Setting filters

You can add filters by calling the setFilter method on the global multiCalendar object.
It accepts an object as a parameter. The attributes and values of this object will be
sent with each request as GET parameters.

Calendar markup

Example calendar markup:
` html



You can control the calendar using the global object multiCalendar, which contains the following methods:

` javascript
/**
* Moves the multi-calendar date forward by a day or by a week
* depending on how many days are being shown.
* @method goForward
* @api public
* @return {void}
*/
multiCalendar.goForward()

/**
* Moves the multi-calendar date back by a day or by a week
* depending on how many days are being shown.
* @method goBack
* @api public
* @return {void}
*/
multiCalendar.goBack()

/**
* Fetches data from the server for the current showing days and updates
* the events.
* @api public
* @method refresh
* @return {void}
*/
multiCalendar.refresh()

multiCalendar.setFilter(...args)

/**
* Shows or hides Saturday and Sunday from the current calendar view.
* If calendar is in mobile mode (oneDay view) it does nothing.
* @api public
* @method showWeekends
* @param {Boolean} show - Whether to show the weekends or not.
* @return {void}
*/
multiCalendar.showWeekends(show)

/**
* Moves all calendars to a view that shows the specified date.
* @api public
* @method goToDate
* @param {String | Date} date [description]
* @param {ControlBar} controlBar [opitonal]
* @return {void}
*/
multiCalendar.goToDate(date, controlBar = this.controlBar)
`

Install

Bower