Simple calendar jQuery plugin

August 31, 2019 No comments jQuery Calendar Plugin

1. Introduction

simpleCalendar is a simple jQuery calendar plugin that can be used as a date picker on an HTML form or to present events. The plugin provides many customization options and can be easily integrated with any website.

Simple calendar jquery plugin

2. Plugin Overview

Library simpleCalendar
Author Brospars
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version

Demo

3. How to install and use simpleCalendar jQuery plugin

Follow below steps to install simpleCalendar jQuery plugin.

1. Include a recent version of jQuery and all simpleCalendar CSS and JS files into your website:

<!--jQuery js-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<!--Simple Cale Calender CSS-->
<link rel="stylesheet" href="css/simple-calendar.css">

<!--Simple Calender Js-->
<script src="js/jquery.simple-calendar.js"></script>

2. Inside $(document).ready(); jQuery function call simpleCalendar like in the following example:

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

Below more advanced initialization:

$(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'], //string of days starting from sunday
        minDate : "YYYY-MM-DD",         // minimum date
        maxDate : "YYYY-MM-DD",         // maximum date
        insertEvent: true,              // can insert events
        displayEvent: true,             // display existing event
        fixedStartDay: true,            // Week begin always by monday
        event: [],                      // List of events
        insertCallback : function(){}   // Callback when an event is added to the calendar
    });
});

simpleCalendar plugin after initialization will attach calendar panel to selected #container.

4. Conclusion

In this article, we presented simpleCalendar jQuery plugin designed to present a calendar with an event management system. The plugin can be used in the form as a date picker or event picker.

{{ message }}

{{ 'Comments are closed.' | trans }}