{"id":35,"date":"2012-06-25T15:24:46","date_gmt":"2012-06-25T22:24:46","guid":{"rendered":"http:\/\/blog.brianscloud.com\/?p=35"},"modified":"2012-06-25T15:24:46","modified_gmt":"2012-06-25T22:24:46","slug":"building-dynamic-calendar-in-html","status":"publish","type":"post","link":"http:\/\/blog.brianscloud.com\/?p=35","title":{"rendered":"Building Dynamic Calendar in HTML"},"content":{"rendered":"

There is an awesome feeling that comes from building a dynamic calendar in HTML.\u00a0 The steps:<\/p>\n

    \n
  1. 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.<\/li>\n
  2. Then you have to instantiate the structure based on the month rendered and query the database and load the content within it.<\/li>\n
  3. Of course, next comes the actual rendering of the calendar structure in HTML.\u00a0 Use a table?\u00a0 I started there, but then my friends laughed at me (not really, but I think they would if they had seen it).\u00a0 I used the good old div tag.<\/li>\n
  4. Last, you need to style it with CSS.\u00a0 To me, this was the hardest part.\u00a0 Getting the correct float and borders applied to make it look halfway decent was an hour exercise – this is\u00a0one of my\u00a0weaker areas I’m trying to improve.<\/li>\n<\/ol>\n

    It felt good to finish it and see the results.\u00a0 I know it is relatively trivial to some degree, but still rewarding to\u00a0see the results.<\/p>\n

    Of course, I wasn’t finished.\u00a0 I had to add some flashy AJAX popup when the contents of the calendar are clicked.<\/p>\n

    Overall, I believe adding the calendar view of the data will make the application easier to use for most people.\u00a0 Seeing data in lists works well, but sometimes when that data is date based, there is no better display than a good old calendar.<\/p>\n","protected":false},"excerpt":{"rendered":"

    There is an awesome feeling that comes from building a dynamic calendar in HTML.\u00a0 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":1,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":36,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions\/36"}],"wp:attachment":[{"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.brianscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}