Animated Event Calendar In jQuery - Simple Calendar
File Size: | 59.1 KB |
---|---|
Views Total: | 38225 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.