Create A Weekly Calendar For Displaying Events - pretty-calendar.js

A weekly calendar can be a great way to display an overview of your events. This jQuery plugin allows you to create a nice looking calendar that displays your events in the current week. It uses plain HTML and CSS to do the display, and make sure it is easily integrates with your website.

How to use it:

1. Download the package and load the Pretty Calendar plugin's files in the document.

<link rel="stylesheet" href="/path/to/pretty-calendar.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/pretty-calendar.js"></script>

2. Create a placeholder for the pretty calendar.

<div id="myCal"></div>

3. Define your events in JS arrays: [dayOfWeek, standardTime, eventTitle, backgroundColor].

var events = [];
events[0] = [];
events[0][0] = "Sunday";
events[0][1] = "3:00pm";
events[0][2] = "Just a sample event"
events[0][3] = "#c0c0c0";
events[1] = [];
events[1][0] = "Monday";
events[1][1] = "12:00pm";
events[1][2] = "Another event"
events[1][3] = "#8FD8D8";
events[2] = [];
events[2][0] = "Thursday";
events[2][1] = "5:00pm";
events[2][2] = "This is what happens when"
events[2][3] = "orange";
events[3] = [];
events[3][0] = "Thursday";
events[3][1] = "5:30pm";
events[3][2] = "two events are side by side"
events[3][3] = "purple";

4. You can pass an array of custom labels for 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 Pretty Calendar.

// PrettyCalendar(eventArray, nameOfCalendarDiv, enableNavigation, customLabelArray)
var prettyCal = new PrettyCalendar(events, "myCal", true, weekday);

6. Update your events.

var newEvents = [];
newEvents[0] = [];
newEvents[0][0] = "Thursday";
newEvents[0][1] = "1:00pm";
newEvents[0][2] = "New event"
newEvents[0][3] = "red";
prettyCal.updateEvents(newEvents);

7. Add a footer to the Pretty Calendar.

prettyCal.addFooter('HTML Content Here');

---

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