So yesterday I saw this video on Egghead.io, in which Ben demonstrated how to build simple calendar from scratch in such a short time (I am not saying in 7 minutes, as lesson title says because it’s kind of misleading since Ben pasted a lot of code which he prepared before recording the lesson 🙂 ).

When I finished with watching the lesson, I wanted to improve calendar with interactivity so the user can see next or previous month. I immediately see the problem in approach how days are represented with table rows and columns which would not be a problem if all months would always have days sorted in 5 table rows (no less and no more). Sure, I could go with with deleting existing rows and columns and rendering new rows and columns every time user clicks on previous/next button but that’s inefficient.

So I decided to build my own version of simple calendar (javascript-wise, because I added a lot of styling) in which I didn’t use tables rows and columns but divs. These divs (#days div) have width and heigh set and their container has width of #days div times 7 which gives us effect of #days div being sorted in rows and columns. That way updating #days div is much easier and efficient.

You can see working demo here ((I migrated the blog and forget to migrate the code too so the demo went into oblivion. Sorry, guys.)).