Mobile-friendly Calendar and Schedule Plugin - jQuery Calendar.js

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.