🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, lightweight, dynamic, animated event calendar plugin where you can view the details of the event in a popup by clicking a date slot.

Calendar event-calendar

Documentation

Simple Calendar

preview

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

Events Preview

preview

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'], //string of months starting from january         days: ['sunday','monday','tuesday','wenesday','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         events: [], //List of event         insertCallback : function(){} // Callback when an event is added to the calendar     }); });

You May Also Like