simple calendar plugin for jQuery & HTML5
Download the developer or the minified version of jquery.calendar.js and jquery.calendar.css and paste it info your assets directory.
Include both files in your related HTML(5) file. Next you need to create a simple container (for e.g. a div) which will contain the calendar widget.
For creating a simple calendar view, your code should look like this
<div id="pnlCalendar"></div>
<script>
$(function () {
$('#pnlCalendar').calendar();
});
</script>
You can customize the displayed calendar widget with different configuration settings. Apply these settings when you're initializing the jQuery plugin on your object.
Following options are currently available:
- color: specify the design color as hexadecimal integer. The plugin calculates different shades itself. Default is #308B22
- months: an array of month names. Change them for e.g. to ['Jan', 'Feb', ...] or whatever you want. Must be exactly 12 items!
- days: an array of day names. Change them for e.g. to ['Mon', 'Tue', ...] or whatever you want. Must be exactly 7 items!
When a user clicks on a date to select it as current date, the plugin is firing the onSelect-Event. You can react to this event by specifying the onSelect property in the options when you're initializing the plugin on your object.
The code should look like this
<div id="pnlCalendar"></div>
<script>
$(function () {
$('#pnlCalendar').calendar({
onSelect: function (event) {
// ok, come on, let's go!
}
});
});
</script>
The event function expects a parameter - here called 'event' - which contains some data from the selected date of the calendar. You can use this object for your special requirements.
{
date: [Date-Object],
label: [24.12.2018]
}
This little project is licensed under the MIT license