Friday, 8 January 2016

jQuery Calendar Plugin with events



Features:
1. Customize to Events, Icons and different background colours with CSS.
2. Ajax support.
3. Events available on click of day and events.
4. Responsive



Usage


1. Simple

The simplest usage of Calendar is to display the calendar with just empty dates.


To configure this on your HTML page to below steps:
1.      Configure dependencies
In the head tag, place below js and css files. Make sure they are present in the folders specified.

  <head>
       <link href="css/calendar.css" rel="stylesheet">
       <script src="js/jquery.min.js"></script>
       <script src="js/moment.js"></script>
       <script src="js/calendar.js"></script>
       <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>

2.      Initialize the Calendar
In the script tag, place the below code snippet.

<script>
  var jsonData=null;
  var currentDate=null;
  $( document ).ready(function(){
       // call createCalendar with null data. This will create a empty calendar with only dates.
       $(".calendar").createCalendar(jsonData);
});

  </script>

Here 2 variables are defined; both are not assigned any value. If you want to open the calendar on a particular month and year. Populate the currentDate variable.

var currentDate='06-03-2016';

3.      Position the calendar
Place the below div, where you want the calendar to appear.

<div class="calendar"></div>

That’s it. You should see the calendar with current month.

2. Populate Calendar



The Calendar date can be populated with background colour, events and icons. All these data can be provided to the calendar from a JSON object.
Let’s first consider the background colour.

3. Background Colour

The JSON String you need to provide is
   "jsondata":[ 
      { 
         "date":"27-12-2015",
         "datetype":"busy"
      }
   ]
}

So now the Initialisation of calendar script becomes.
  var jsonData=null;
  var currentDate=null;

  $( document ).ready(function(){
      var jsonDataString='{"jsondata":[{"date":"27-12-2015","datetype":"busy"}]}';
         jsonData = jQuery.parseJSON(jsonDataString)
         $(".calendar").createCalendar(jsonData,currentDate);
  });
      
After this we also need to add a css class for the colour.
.calendarTable td.busy
{
 background-color: #99ccff;
}
Note here that the busy in the json object matches the css class.
That’s it. You will get your day colored.



If you want 2 days to be of same color. Use this JSON data.
   "jsondata":[ 
      { 
         "date":"27-12-2015",
         "datetype":"busy "
      },
       { 
         "date":"31-12-2015",
         "datetype":"busy "
      }
   ]
}

4. Icons


You can show icons on the day as well. Add iconlist attribute in the jsondata.

   "jsondata":[ 
      { 
         "date":"27-12-2015",
         "iconslist":" appointment,notes"
      }
   ]
}

Multiple icons can be provided with a comma separated list.
In the css provide below classes

div.appointment{
    top: 15px;
    right: 2px;
}

Above style will position the icon on the day.

img.appointment{
content:url("appointment.png");
}

Above style specifies the icon image path

5. Events




Events can be added to the calendar using JSONdata.
   "jsondata":[ 
      { 
         "date":"27-12-2015",
         "events":[ 
            { 
               "eventtype":"reminder",
               "eventtext":"reminder text"
            },
            { 
               "eventtype":"appointment",
               "eventtext":"reminder text"
            }
         ]
      }
      
   ]
}

In the CSS add below classes
div.reminderevent{
       border:1px solid #ccc;
       background-color: #ff0000;
       top: 70px;
   
}


div.appointmentevent{
       border:1px solid #ccc;
       background-color: #00ff00;
       top: 80px;
}

Note the extra event added to the class name as mentioned in the JSONdata.
The above style provides the styling of the event and its position.
The eventtext attribute is used as hover text on the event as shown below.




Ajax Support


The JSONdata can also be populated using ajax REST calls.
Make following changes to script to initialize the calendar.
var jsonData=null;
var currentDate;

  $( document ).ready(function(){
 
  $.ajax({
  url: "http://localhost:8080/json/jan-2016",
  dataType: 'json',
  async: false,
  success: function(data) {
   jsonData=data;
  
   $(".calendar").createCalendar(jsonData);
  }
});

Trigger Events

On clicking on the Next and Prev buttons, new JSONData can be passed to the calendar. Implement the below methods.

Prev Button

function beforePrev(){

$.ajax({
  url: "http://localhost:8080/json/dec-2015",
  dataType: 'json',
  async: false,
  success: function(data) {
   jsonData=data;
  }
});
}

Next Button

function beforeNext(){
$.ajax({
  url: "http://localhost:8080/json/feb-2016",
  dataType: 'json',
  async: false,
  success: function(data) {
   jsonData=data;
  }
});
}

Day Click

Click event on the day can be intercepted by implementing method as below
function dayClickedEvent(dayClicked){

}
Here the dayClicked is the string specifying the date (01-05-2015)          

Destroy Calendar


Call this method to clear the calendar content.
$(".calendar").empty();

Table size

The Calendar is responsive. The initial size of the calendar can be provided by below style class. Mention this class at the bottom of your style tag. The default size is 100px;
.calendarTable td.size {
       height: 70px;
       width: 70px;
}




Download source code from here


No comments:

Post a comment

Share the post