
Calendar.js is a powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.
Built with jQuery, Bootstrap, Moment.js, touchSwip.js, and Bootstrap date picker.
The plugin allows you to dynamically create events (tasks, schedules) on the calendar with support for live filtering.
It comes with 3 view modes: day, week and month.
Clicking the event will display the details in a modal window based on Bootstrap modal component.
Comes with lots of options and API to customize the event calendar as per your needs.
1. Include the necessary JavaScript & CSS files on the webpage.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="/path/to/moment-with-locales.min.js"></script> <script src="/path/to/jquery.touchSwipe.min.js"></script> <script src="/path/to/bootstrap-datetimepicker.min.js"></script>
2. Create a unique container to place your event calendar.
<div id="calendar"></div>
3. Create your own events and day notes to display in the calendar.
moment.locale('en'); var now = moment(); var events = [{ start: now.startOf('week').add(9, 'h').format('X'), end: now.startOf('week').add(10, 'h').format('X'), title: '1', content: 'Hello World! <br> <p>Foo Bar</p>', category:'Professionnal' },{ start: now.startOf('week').add(10, 'h').format('X'), end: now.startOf('week').add(11, 'h').format('X'), title: '2', content: 'Hello World! <br> <p>Foo Bar</p>', category:'Professionnal' }]; var daynotes = [{ time: now.startOf('week').add(15, 'h').add(30, 'm').format('X'), title: 'Leo\'s holiday', content: 'yo', category: 'holiday' }];
4. Generate a basic event calendar in the container you created.
var myCalendar = $('#calendar').Calendar({ events: events, daynotes: daynotes }).init();
5. All configuration options with default values.
$('#calendar').Calendar({ // language locale: 'fr', // 'day', 'week', 'month' view: 'week', // enable keyboard navigation enableKeyboard: true, // default view defaultView: { largeScreen: 'week', smallScreen: 'day', smallScreenThreshold: 1000 }, weekday: { timeline: { fromHour: 7, // start hour toHour: 20, // end hour intervalMinutes: 60, format: 'HH:mm', heightPx: 50, autoResize: true }, dayline: { weekdays: [0, 1, 2, 3, 4, 5, 6], format: 'dddd DD/MM', heightPx: 31, month: { format: 'MMMM YYYY', heightPx: 30, weekFormat: 'w' } } }, month: { format: 'MMMM YYYY', heightPx: 31, weekline: { format: 'w', heightPx: 80 }, dayheader: { weekdays: [0, 1, 2, 3, 4, 5, 6], format: 'dddd', heightPx: 30 }, day: { format: 'DD/MM' } }, // timestamp in the week to display unixTimestamp: moment().format('X'), // event options event: { hover: { delay: 500 } }, // custom colors colors: { events: eventColors, daynotes: daynoteColors, random: true }, // category options categories: { enable: true, hover: { delay: 500 } }, // display the current time now: { enable: false, refresh: false, heightPx: 1, style: 'solid', color: '#03A9F4' } })
6. Available event handlers.
$('#calendar').on('Calendar.init', function(event, instance, before, current, after){ // do something }); $('#calendar').on('Calendar.daynote-mouseenter', function(event, instance, elem){ // do something }); $('#calendar').on('Calendar.daynote-mouseleave', function(event, instance, elem){ // do something }); $('#calendar').on('Calendar.event-mouseenter', function(event, instance, elem){ // do something }); $('#calendar').on('Calendar.event-mouseleave', function(event, instance, elem){ // do something }); $('#calendar').on('Calendar.daynote-click', function(event, instance, elem, evt){ // do something }); $('#calendar').on('Calendar.event-click', function(event, instance, elem, evt){ // do something });
7. API methods.
// returns an array of events objects myCalendar.getEvents() // sets events setEvents(events) // adds new events addEvents(events) // returns an array of day notes objects getDaynotes() // sets day notes setDaynotes(events) // adss new day notes addDaynotes(events) // returns the time getInitTime() // retunrs an array of 2 integers (unix timestamps) getViewInterval() // retunrs an array of 2 integers (unix timestamps) getNextViewInterval() // retunrs an array of 2 integers (unix timestamps) getPrevViewInterval() // the current unix timestamp getTimestamp() // sets a unix timestamp setTimestamp(Integer) // returns the current view getView() // sets view // 'day' or 'week' or 'month' setView('day' or 'week' or 'month') // returns the color of the event category getEventCategoryColor() // retunrs an array of colors object getEventCategoriesColors() // sets color setEventCategoriesColors(colors) // returns the color of the datenote category getDaynoteCategoryColor() // retunrs an array of colors object getDaynoteCategoriesColors() // sets color setDaynoteCategoriesColors(colors) // returns the color of the event getEventColors() // sets color setEventColors(colors) // returns the color of the day note getDaynoteColors() // sets color setDaynoteColors(colors)
This awesome jQuery plugin is developed by ArrobeFr. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 19.06.2018
- Source