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
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:
<x-div data-controller="/build/fl-multi-calendar" data-config="myConfigObject"></x-div>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:
// 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:
{
"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:
<!-- MultiCalendar -->
<main class="fl-mc fl-mc-view-weekdays">
<!-- ControlBar -->
<nav class="fl-mc-ctrl">
<input class="fl-mc-ctrl-datePicker" type="week">
<button class="fl-mc-ctrl-back"><i class="icon-chevron-left"></i></button>
<button class="fl-mc-ctrl-forward"><i class="icon-chevron-right"></i></button>
<button class="fl-mc-ctrl-today">Today</button>
<button class="fl-mc-ctrl-refresh"><i class="icon-refresh"></i><i class="icon-check"></i></button>
<p class="fl-mc-ctrl-titleBar">2016</p>
<button class="fl-mc-ctrl-show-weekend">Show weekends</button>
</nav>
<!-- Calendar -->
<section class="fl-mc-cal">
<header class="fl-mc-cal-header">
<h2 class="fl-mc-cal-title">Karl Marx</h2>
<p class="fl-mc-cal-description">Software Developer</p>
</header>
<div class="fl-mc-cal-days">
<!-- Day -->
<div class="fl-mc-cal-day">
<header class="fl-mc-cal-day-header">Wednesday, Apr 27</header>
<div class="fl-mc-cal-day-events">
<!-- Event -->
<div class="fl-mc-cal-day-event fl-mc-event-color-red">
<span class="fl-mc-cal-day-event-time">09:00 - 18:00</span>
<span class="fl-mc-cal-day-event-title">Simple title</span>
<span class="fl-mc-cal-day-event-tooltip">LOL</span>
</div>
</div>
</div>
</div>
</section>
</main>You can control the calendar using the global object multiCalendar, which contains the following methods:
/**
* 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 install fl-multi-calendar-2 --save
It only depends on the x-div web component.
Will run a server and open the demo page in the browser
npm run demo
npm run build
Runs build, demo and watches changes to build again.
npm run dev
npm run test
npm run deploy-gh-pages