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, 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.