Animated jQuery Event Calendar Plugin - Pretty Calendar

Pretty Calendar is a lightweight jQuery plugin that loads data from a Javascript array object to create an event calendar widget with a smooth expand/collapse transition effect.

How to use it:

1. Load the jQuery pretty calendar and other resources in the Html document.

<link rel="stylesheet" type="text/css" href="pretty-calendar.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="pretty-calendar.js"></script>

2. Create a container element where you want to place the calendar widget.

<div id="demo"></div>

3. Create an event array. One array which contains individual event arrays. Individual events arrays contain strings with the following: day of week, standard time, event title and background color.

var events = [];
events[0] = [];
events[0][0] = "Sunday";
events[0][1] = "3:00pm";
events[0][2] = "Event 1"
events[0][3] = "#c0c0c0";
events[1] = [];
events[1][0] = "Monday";
events[1][1] = "12:00pm";
events[1][2] = "Event 2"
events[1][3] = "#8FD8D8";
events[2] = [];
events[2][0] = "Thursday";
events[2][1] = "5:00pm";
events[2][2] = "Event 3.1"
events[2][3] = "orange";
events[3] = [];
events[3][0] = "Thursday";
events[3][1] = "5:30pm";
events[3][2] = "Event 3.2"
events[3][3] = "purple";

4. Create a week day array. You can pass an array of custom labels for each day. But prettycalendar defaults to the names of each day

var weekday=new Array(7);
weekday[0]="Sun (Apr 13)";
weekday[1]="Mon (Apr 14)";
weekday[2]="Tue (Apr 15)";
weekday[3]="Wed (Apr 16)";
weekday[4]="Thu (Apr 17)";
weekday[5]="Fri (Apr 18)";
weekday[6]="Sat (Apr 19)";

5. Initialize the plugin.

var prettyCal = new PrettyCalendar(events, "demo", false, weekday);

---

This awesome jQuery plugin is developed by AppticLLC. For more Advanced Usages, please check the demo page or visit the official website.