FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. It is customizable and open source.
1. Initialize the plugin by referencing the necessary files:
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='path/to/jquery.min.js'></script>
<script src='path/to/moment.min.js'></script>
<script src='path/to/fullcalendar.js'></script>
2. Binding component to DOM element.
<div id='calendar'></div>
3. Basic usage may look something like this.
$('#calendar').fullCalendar({
// put your options and callbacks here
})
Refer following links for usage:
Type | URL |
---|---|
Plugin Link | https://fullcalendar.io/ |
Github Page | https://github.com/fullcalendar/fullcalendar |
Template Page | https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-menu-template/full-calender-basic.html |
Disclaimer: FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.
CLNDR is a jQuery plugin for creating calendars. Unlike most calendar plugins, this one doesn't generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it. CLNDR is free of opinions about markup and style: it is the high-speed chassis on which you build the vehicle of your dreams.
1. Initialize the plugin by referencing the necessary files:
<script src='path/to/moment.min.js'></script>
<script src='path/to/underscore-min.js'></script>
<script src='path/to/clndr.js'></script>
2. Binding component to DOM element.
<div id='calendar'></div>
3. Basic usage may look something like this.
// this will use clndr's default template, which you probably don't want.
$('#calendar').clndr();
// so instead, pass in your template as a string!
$('#calendar').clndr({
template: $('#calendar-template').html()
});
// there are a lot of options. the rabbit hole is deep.
$('#calendar').clndr({
template: $('#calendar-template').html(),
events: [{
date: '2013-09-09',
title: 'CLNDR GitHub Page Finished',
url: 'http://github.com/kylestetz/CLNDR'
}],
clickEvents: {
click: function(target) {
console.log(target);
},
onMonthChange: function(month) {
console.log('you just went to ' + month.format('MMMM, YYYY'));
}
},
doneRendering: function() {
console.log('this would be a fine place to attach custom event handlers.');
}
});
Refer following links for usage:
Type | URL |
---|---|
Plugin Link | https://kylestetz.github.io/CLNDR/ |
Github Page | https://github.com/fullcalendar/fullcalendar |
Template Page | https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-menu-template/calendars-clndr.html |