Multiple calendars at one
npm install fl-multi-calendar-2Visualise 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
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 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"
],
}
],
}
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.
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.
Example calendar markup:
` html
Software Developer
Karl Marx
09:00 - 18:00
Simple title
LOL
`
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)
`
bower install fl-multi-calendar-2 --save
`NPM
`
npm install fl-multi-calendar-2 --save
`Dependencies
It only depends on the x-div web component.
Tasks
$3
Will run a server and open the demo page in the browser
`
npm run demo
`$3
`
npm run build
`
$3
Runs build, demo and watches changes to build again.
`
npm run dev
`$3
`
npm run test
`Deploy docs
`
npm run deploy-gh-pages
``