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.