Mobile-friendly Calendar and Schedule Plugin - jQuery Calendar.js
File Size: | 2.34 MB |
---|---|
Views Total: | 29506 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Calendar.js is a powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.
Built with jQuery, Bootstrap 4 or Bootstrap 3, 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 4 or Bootstrap 3 modal component.
Comes with lots of options and API to customize the event calendar as per your needs.
How to use it:
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)
Changelog:
2018-10-04
- Fix problem with weekdey.timeline.intervalMinutes + return Calendar instance when possible
2018-07-11
- Works with Bootstrap 4.
- The Bootstrap 3 version is available here.
2018-07-05
- Bugfix
This awesome jQuery plugin is developed by ArrobeFr. For more Advanced Usages, please check the demo page or visit the official website.