It's really simple to implement a calendar by adding the HTML element to your page and passing the date parameter in a HTML5 data attribute:
<div id="calendar" data-date="2017-01-01"></div>
Then defining you calendar in your script tag.
$('#calendar').calendar();
Optionally, you can pass the date parameter to the function instead of the HTML5 data attribute:
<div id="calendar"></div>
$('#calendar').calendar({date: '2017-01-01'});
You can add the optional parameters by passing a JavaScript object. For example, to generate an 'orange' theme calendar, use the color parameter.
$('#calendar').calendar({color: 'orange'});
Parameter options:
- 'date' - The date of the calendar to be instantiated.
- 'color' - One of the available color schemes: yellow, pink, green, orange, purple, blue, turquoise (default) or none.
- 'months' - Override the Month names i.e January, February, March, April, May, June, July, August, September, October, November, December.
- 'days' - Override the day names i.e Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday.
- 'daysMin' - Override the day abbreviation i.e. SUN, MON, TUE, WED, THU, FRI, SAT.
- 'dayLetter' - Override the day letter abbreviation i.e. S, M, T, W, T, F, S.
- 'events' - The formatted array of events.
The passed event array must be in the following format:
var events = [
{start: '2017/09/01', end: '2017/09/07', summary: "Example Event", mask: true},
{start: '2017/09/14', end: '2017/09/20', summary: "Example Event #2", mask: true},
{start: '2017/10/05', end: '2017/10/15', summary: "Example Event #3", mask: true}
];
Each event must have a start date, end date, summary string and a mask boolean. The mask boolean should be true if you want to 'mask'(block off) event dates, or false.
Update Sept 30. 2017 - The Safari Browser doesn't like the date to be formatted as 2017-09-30 - it will throw an Invalid Date error, so use 2017/09/30 instead.
Update Aug 13. 2018 - The default behaviour of the calendar is to use SUNDAY as the week starting day. If you prefer the calendar weeks to start on MONDAY instead, please use the included 'js/calendar-starting-monday.min.js' file instead of the default 'js/calendar.min.js'.
Please make sure you include the calendar.css style sheet in the head of your page, unless you choose to use your own style declarations.