jQuery & CSS Simple Calendar widget to Add Events

Yet another awesome, simple, clean and easy to use CSS and jQuery plugin to create a calendar widget and add events to it.

Plugin Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Plugin Overview

Plugin: simpleCalendar
Author: Brospars
Licence: MIT Licence
Published: 2019-03-02 05:04:49
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 7.02 KB

How to Use it:

1. Load the jQuery, Google fonts and simpleCalendar JavaScript and CSS files into HTML document.

<!--jQuery js-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></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>

3. Create a container (a div element) in which you want to build the calendar widget.

<div id="container" class="calendar-container"></div>

4. Initialize the plugin in jQuery document ready function to activate the calendar widget.

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

});

5. All available options to customize
the working of plugin.

    $("#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
    });

Be the first to comment

Leave a Reply

Your email address will not be published.


*