Building Dynamic Calendar in HTML
There is an awesome feeling that comes from building a dynamic calendar in HTML. The steps:
- First you have to build a object structure (assuming you are using an OO language) to support the month, weeks, days, and content within each day.
- Then you have to instantiate the structure based on the month rendered and query the database and load the content within it.
- Of course, next comes the actual rendering of the calendar structure in HTML. Use a table? I started there, but then my friends laughed at me (not really, but I think they would if they had seen it). I used the good old div tag.
- Last, you need to style it with CSS. To me, this was the hardest part. Getting the correct float and borders applied to make it look halfway decent was an hour exercise – this is one of my weaker areas I’m trying to improve.
It felt good to finish it and see the results. I know it is relatively trivial to some degree, but still rewarding to see the results.
Of course, I wasn’t finished. I had to add some flashy AJAX popup when the contents of the calendar are clicked.
Overall, I believe adding the calendar view of the data will make the application easier to use for most people. Seeing data in lists works well, but sometimes when that data is date based, there is no better display than a good old calendar.