Making pretty calendars with jQuery

Take a look at the working demo or Github repository.

While developing an application earlier this week, I realized that I would need a pretty calendar design. While jQuery calendars already exist, none had the effect that I wanted. Certainly they were customizable - it was just equally easy to make my own.

I wanted the calendar to:

• show events by week in an attractive manner
• expand on click to a day view
• provide navigation functionality
• be easily customizable, especially so with background colors
• meet the needs of basic calendar apps that I will develop in the future

I had made a calendar application ("My Easy Dose Schedule") before, but it wasn't very pretty. I had to create this one from scratch. So I made a jQuery plugin - Pretty Calendar.

Before I begin, you can grab a copy of the full code:

Uncompressed JS: https://www.neelsomani.com/projects/calendar/pretty-calendar.js

Minified JS: https://www.neelsomani.com/projects/calendar/pretty-calendar-minified.js

Uncompressed CSS: https://www.neelsomani.com/projects/calendar/pretty-calendar.css

Minified CSS: https://www.neelsomani.com/projects/calendar/pretty-calendar-minified.css

Basic use

To use Pretty Calendar, first you need to include the JS files (and most likely the CSS file as well). It relies on jQuery.

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

That's all you need in the head of your HTML file. In the body you need a wrapper div which will be filled with the calendar elements. The height and width need to be set - fluid is fine. The div needs an id.

<div id="navWrap" style="width:70%;height:80%;position:absolute;top:10%;margin:0 auto;right:0;left:0;"></div>

In addition to setting the height and width, I centered the div.

Now you can initialize a PrettyCalendar object and add events.

To pass events, you make a two dimensional array. The second dimension contains arrays with a length of 4: the day, time, title, and background color. You can also specify the end time.

<script>
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[0][4] = "6:00pm"; <- optional end time
events[1] = [];
events[1][0] = "Monday";
events[1][1] = "12:00pm";
events[1][2] = "Another event"
events[1][3] = "#8FD8D8";

var prettyCal = new PrettyCalendar(events, "navWrap");
</script>

And there you go! You have a basic PrettyCalendar with two events.

Navigation

You can pass a third parameter to PrettyCalendar:

var prettyCal = new PrettyCalendar(events, "navWrap", true);

and you'll notice that when your mouse hovers over the sides of the calendar, the navigation arrow pops up. To implement navigation, you need to define the functions:

function leftNav(){

}
function rightNav(){

}

You might handle these by adding a window.location which adds a GET parameter, links to another page, etc.

Custom day labels

As an optional fourth parameter, you can pass a 7 element array containing strings 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)";

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

Updating the calendar dynamically

To show a new array of events, you can just use the static method PrettyCalendar.updateEvents(events).

// new event array
var newEvents = [];
newEvents[0] = [];
newEvents[0][0] = "Thursday";
newEvents[0][1] = "1:00pm";
newEvents[0][2] = "New event"
newEvents[0][3] = "red";

PrettyCalendar.updateEvents(newEvents);

Footers

There is a built-in function to add your own footer. Once you have already initialized a PrettyCalendar object:

var prettyCal = new PrettyCalendar(events, "navWrap");
prettyCal.addFooter('&copy; 2014 by <a href="https://www.neelsomani.com/">Neel Somani</a>');

The footer can parse HTML. It will end up in a footer tag below the calendar.

Conclusion

I had a lot of fun making PrettyCalendar. I've had experience in using existing Javascript libraries and plugins, but this was the first real contribution that I've made myself.

Hope it's useful! Keep in mind that this is just the first version; I might add more features if needed.