Animated Event Calendar In jQuery - Simple Calendar

A simple, lightweight, dynamic, animated event calendar plugin where you can view the details of the event in a popup by clicking a date slot.

How to use it:

1. Insert the simple calendar plugin's files into the webpage which has jQuery library included.

<link rel="stylesheet" href="simple-calendar.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.simple-calendar.js"></script>

2. Initialize the plugin to generate a default inline calendar on the webpage.

<div id="container"></div>

$(function(){
  $("#container").simpleCalendar();
});

3. Add custom events to the calendar.

$("#container").simpleCalendar({

  // displays events
  displayEvent: true,

  // event dates
  events: [
    // generate new event after tomorrow for one hour
    {
      startDate: new Date(new Date().setHours(new Date().getHours() + 24)).toDateString(),
      endDate: new Date(new Date().setHours(new Date().getHours() + 25)).toISOString(),
      summary: 'Visit of the Eiffel Tower'
    },
    // generate new event for yesterday at noon
    {
      startDate: new Date(new Date().setHours(new Date().getHours() - new Date().getHours() - 12, 0)).toISOString(),
      endDate: new Date(new Date().setHours(new Date().getHours() - new Date().getHours() - 11)).getTime(),
      summary: 'Restaurant'
    },
    // generate new event for the last two days
    {
      startDate: new Date(new Date().setHours(new Date().getHours() - 48)).toISOString(),
      endDate: new Date(new Date().setHours(new Date().getHours() - 24)).getTime(),
      summary: 'Visit of the Louvre'
    }
  ],

  // disable showing event details
  disableEventDetails: false,

  // disable showing empty date details
  disableEmptyDetails: false 

});

4. Determine whether to show Year in the header. Default: true.

$("#container").simpleCalendar({

  displayYear: true

});

5. Localize the month/week names.

$("#container").simpleCalendar({

  months: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december']
  days: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],

});

6. Change the first day of the week. 0 = sunday, 7 = saturday, false = month always begin by first day of the month.

$("#container").simpleCalendar({

  fixedStartDay: true

});

7. Callback functions.

$("#container").simpleCalendar({

  // called after init
  onInit: function (calendar) {}, 

  // called on month change
  onMonthChange: function (month, year) {},

  // called on date selection
  onDateSelect: function (date, events) {}

});

8. Add an event to the calendar.

var container = $("#container").simpleCalendar({
    // ...
});
let $calendar = container.data('plugin_simpleCalendar')
var newEvent = {
  startDate: startDate,
  endDate: endDate,
  summary: 'New event',
}
$calendar.addEvent(newEvent)

9. Set events.

var container = $("#container").simpleCalendar({
    // ...
});
let $calendar = container.data('plugin_simpleCalendar')
var events = [{
  startDate: startDate,
  endDate: endDate,
  summary: 'New event 1'
},
{
  startDate: startDate,
  endDate: endDate,
  summary: 'New event 2'
}]
$calendar.setEvents(events)

Changelog:

2021-11-03

• Add method to set events

2021-09-16

• fixed start date

2021-03-25

• Fixed a bug when setting the start of the week to Sunday

2020-09-09

• Fix to incorrect next month display on first click

2020-07-30

• Implement fixedStartDay using boolean or number

2020-07-29

• Fix to default typo as wenesday for wednesday

2020-07-02

• Fix collision between Simple Calendar and almost every Bootstrap theme
• Add onEventCreate and onDayCreate to simplify further customizations

2020-03-12

• Fire event even if event details are disabled

---

This awesome jQuery plugin is developed by brospars. For more Advanced Usages, please check the demo page or visit the official website.