Multi-Week Calendar for Printing, using HTML and JavaScript

TL;DR: dusklight.github.io/multi-week-calendar

I made a simple HTML & JavaScript based multi-week calendar a while back, inspired by Visio's multi-week calendar shape. It serves a very specific purpose – I use it to print a calendar of the current month and the next in a single page. When I was using it locally, I just used IE every time, since I had set print background option on it (my main browser is Chrome). After I added it to Github, I figured I should try it on different browsers, and to my surprise, it failed on Chrome.

One of the main reasons it failed is because I didn't add any validations (don't need it when it was just me using it, though it's on my TODO list), but another reason for Chrome is because Chrome apparently supports date input type, and the date has to be in a specific format when setting the value programmtically – YYYY-MM-DD.

Chrome has a built-in date picker (for input type=date)

So after some researching, added Modernizr to detect support for the input date type, and set the default dates accordingly. I'll probably add jQueryUI date picker in the future so that it's consistent across all browsers, which means I'll need to replace type="date" with type="text", but since it's not for mobile use, should be fine...

Below is the code snippet after adding Modernizr:

...
<input type="date" id="startDate" />
...
var dateFormat = Modernizr.inputtypes.date ? 'YYYY-MM-DD' : 'MM/DD/YYYY';

$('#startDate').val(moment().startOf('month').format(dateFormat));
...

You can try out the calendar via github.io. It's a work-in-progress...