Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fourlabsldn/fl-multi-calendar-2
The best multi-calendar humanity may ever see.
https://github.com/fourlabsldn/fl-multi-calendar-2
Last synced: 5 days ago
JSON representation
The best multi-calendar humanity may ever see.
- Host: GitHub
- URL: https://github.com/fourlabsldn/fl-multi-calendar-2
- Owner: fourlabsldn
- Created: 2016-04-20T14:18:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-21T11:35:18.000Z (over 7 years ago)
- Last Synced: 2024-11-03T11:07:38.414Z (14 days ago)
- Language: JavaScript
- Homepage: http://fourlabsldn.github.io/fl-multi-calendar-2/
- Size: 1.03 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fl-multi-calendar-2
[](https://travis-ci.org/fourlabsldn/fl-multi-calendar-2)
Visualise multiple calendars at once
To use it you will need three elements:
- [x-div](https://github.com/fourlabsldn/x-div) with MultiCalendar as the controller
- The CSS for the calendar (which is in the build folder)
- A configuration object
**Read the [Docs](http://fourlabsldn.github.io/fl-multi-calendar-2/)**
## 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
Today
2016
Show weekends
Karl Marx
Software Developer
Wednesday, Apr 27
09:00 - 18:00
Simple title
LOL
```
# API
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
```
bower install fl-multi-calendar-2 --save
```
## NPM
```
npm install fl-multi-calendar-2 --save
```
## Dependencies
It only depends on the [x-div](https://github.com/fourlabsldn/x-div) web component.
## Tasks
### Demo
Will run a server and open the demo page in the browser
```
npm run demo
```
### Build
```
npm run build
```
### Dev
Runs build, demo and watches changes to build again.
```
npm run dev
```
### Test
```
npm run test
```
## Deploy docs
```
npm run deploy-gh-pages
```