Simple Calendar
A simple and easy plugin to create a calendar and add events to it.
Usage
Including files
You need to include :
- A recent version of JQuery
- The javascript file
jquery.simple-calendar.js - The stylesheet
simple-calendar.css
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-calendar.js"></script>
<link rel="stylesheet" type="text/css" href="simple-calendar.css" />
Simple usage
Inside a $(document).ready(); function you need to call the plugin on a container jquery element :
$(document).ready(function(){
$("#container").simpleCalendar();
});
This initialize the calendar with its default settings.
Usage with options
To customize its settings simply overwrite them like below :
$(document).ready(function(){
$("#container").simpleCalendar({
//Defaults options below
//string of months starting from january
months: ['january','february','march','april','may','june','july','august','september','october','november','december'],
days: ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'],
displayYear: true, // Display year in header
fixedStartDay: true, // Week begin always by monday or by day set by number 0 = sunday, 7 = saturday, false = month always begin by first day of the month
displayEvent: true, // Display existing event
disableEventDetails: false, // disable showing event details
disableEmptyDetails: false, // disable showing empty date details
events: [], // List of events
onInit: function (calendar) {}, // Callback after first initialization
onMonthChange: function (month, year) {}, // Callback on month change
onDateSelect: function (date, events) {}, // Callback on date selection
onEventSelect: function() {}, // Callback on event selection - use $(this).data('event') to access the event
onEventCreate: function( $el ) {}, // Callback fired when an HTML event is created - see $(this).data('event')
onDayCreate: function( $el, d, m, y ) {} // Callback fired when an HTML day is created - see $(this).data('today'), .data('todayEvents')
});
});
Calendar events
Events are json object that contains startDate, endDate, and summary
var events = [{
startDate: Date|timestamp|ISOstring,
endDate: Date|timestamp|ISOstring,
summary: string
}]
Methods
To use methods, first get the plugin instance from the data properties and then use the following methods.
var container = $("#container").simpleCalendar({ ...code });
let $calendar = container.data('plugin_simpleCalendar')
Add event
var newEvent = {
startDate: new Date(new Date().setHours(new Date().getHours() + 48)).toISOString(),
endDate: new Date(new Date().setHours(new Date().getHours() + 49)).getTime(),
summary: 'New event'
}
$calendar.addEvent(newEvent)
Set events
var events = [{
startDate: new Date(new Date().setHours(new Date().getHours() + 48)).toISOString(),
endDate: new Date(new Date().setHours(new Date().getHours() + 49)).getTime(),
summary: 'New event'
},
{
startDate: new Date(new Date().setHours(new Date().getHours() - 24)).toISOString(),
endDate: new Date(new Date().setHours(new Date().getHours() - 23)).getTime(),
summary: 'New event 2'
}]
$calendar.setEvents(events)
2 Feb 28, 2021
38 Jul 5, 2022
6 Sep 7, 2022
144 Jan 6, 2023
3 Sep 28, 2022
1 Aug 22, 2022
10.4k Jan 5, 2023
10 Aug 26, 2022
3 Mar 10, 2022
17 Dec 27, 2022
246 Dec 18, 2022
1 Aug 23, 2022
275 Jan 4, 2023
41 Jan 7, 2023
6 Nov 8, 2022
1 Aug 10, 2022
2 Nov 7, 2021
12 Aug 25, 2022
1.6k Dec 31, 2022