Abhorred Calendar

Question: What kind of bear is best? Why did I name my very first, super slick jQuery plugin Abhorred Calendar and not big pimpin’ calendar?

Answer: Thanks to the idea (and the time consuming process) of entering time, this has quickly become one of the most hated sites in our team; hence the name. We devs rather code away all day, catch up on some blogs, maybe sports scores or even get up to speed with the “Most Viewed” you-tube videos of the day; heck, we would rather comment our code than enter time. I for one am guilty of that. However, in my defense, I am sure my teammates will vouch for me when i say this process is like a billion gazillion times better than what we had before was, to be subtle, pre-historic.

A little bit of history on how this came to be (please feel free to skip over this if your tech-voracity is getting the better of you): The very first incarnation of this time entry tool and it’s befitting reports happened in Silverlight. Our upper management fancied themselves some iPads, so I thought it would be cool if our VPs, Directors and the likes could get to these reports from their new toy and a few of our snazzy employees could enter time from their new tablet/smart-phone. Web standards to the rescue!!!

Since this was my first time with a whole set of new technologies, my first approach was to build html for the entire calendar on the server side in C# and load the it up using jQuery AJAX helpers on the client upon clicking certain buttons. As I got comfortable with JavaScript, jQuery and HTML (read my previous post for an understanding of where I come from), I decided to get rid of the unnecessary AJAX call to build the calendar and decided to go with a pure client side implementation – Hello Abhorred Calendar!!!!

Alright, enough of this B.S!

As of this writing, these are the features my plugin provides. Please feel free to Fork it.

Themed

• jQueryUI theming support
• Use Arrays or JSON data to populate calendar
• Use provided CSS or roll your own (would love to see what you come up with. Please “Fork” the repo and I will try to “Push” whatever I think is appropriate)
• Can be customized to most time entry scenarios

Initialization is as simple as:

$('#container').abhoredCalendar();

If you want to take some action when the user clicks the “+” (Add) button you will need to provide a callback function as follows:

$('#container').abhoredCalendar({ addButtonClicked: addButtonCallback});
... function addButtonCallback() { alert('This is coming from the add button callback. You clicked: ' + $(this).attr('id')); }

If you want the Calendar to be populate with something meaningful you can pass some data to the initializer in the form of the “data” parameter. The “data” parameter is JSON data in the following form:

{ date : hours }

Dates with no hours can be skipped.

Sample JSON Data:

var data = {"1": "2","5": "10", "17":"4"};

2 hours for the 1st of the month, 10 hours for the 5th of the month, 4 hours for the 17th of the month…… you get the idea.

You can call the “setData” method at any time to update the data on the calendar:

 $('#container').abhoredCalendar.setData(data);

A callback (monthChanged) can be provided which will execute everytime a user clicks “previous month” or “next month” button. This is where you would either hard-code some data or more realistically make an AJAX call to get the data for that particular month.

//CALLBACK function
 var data = {"1": "2","5": "10", "17":"4"}; $('#container').abhoredCalendar({ monthChanged: doMonthChange, data: data }); .......... function doMonthChange(date) { //make AJAX call to get data and pass it to the "setData" function $('#container').abhoredCalendar.setData(data); }

If and when new features are added to this project, I will update this post so that it remains as the main source of documentation for this project.

For complete code, check out Index.html on GitHub.