Calendar Navigation System for Blogger

Serious bloggers will tell you that calendar navigation is pretty useless as a form of navigation. But I still wanted to have that option available to me. And since blogger did not have it, I decided to create one myself.

The result of the system is shown at the top right corner of this blog - not a great script, but serves it perpose well. I created this script - not as a navigation aid but as a way of forcing myself to write more blog entries. This calender only shows the blog of the current month - and no one would like to see a post free month - especally not me. It is my firm belief that this visual aid would force me to increase my post freqency. If not atleast it is a 'customisable visual navigation aid'.

As always the script is open and under the BSD license - you are free to edit it, use it, give it to others and so on. I would be extreamly grateful if you link to my site from your page - but that is an option - not a rule.

The code is given below - copy it and save it to a file.

/*************************************************************************
Script  : Post Calendar
Version : 1.00.A Beta
Author  : Binny V A
E-Mail  : binnyva (at.) hotmail (dot.) com
Website : http://www.geocities.com/binnyva/code/javascript/post_calendar/
Description:
This will implement a calendar navigation for your blogs. The
     blogs made with WordPress, LiveJournal, MoveableType etc
     already has this feature - but not the Blogger. So I made
     this script to be used with Blogger.
****************************************************************************/

//Globals
var  month_names = new Array("January","February","March","April","May","June","July","Augest","September","October","November","December");
var month_days  = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var marked_days = new Array();
var data = "";
var post_index = 0;

//Get today's date - year, month, day and date
var today = new Date();
var year = today.getYear();
year = (year > 2000) ? year : year + 1900;
var date = today.getDate();
var month = today.getMonth();
var day = today.getDay();

//date_string must be in the format of - YYYY-MM-DD or just the date.
function addPost(date_string,link,desc) {
  if(isNaN(date_string)) {
      var day_parts = date_string.split(/\b/);
  } else { //If only the date_string is given, it is valid
      var day_parts = new Array(year,"",(month+1),"",date_string);
  }
  if(day_parts[0] == year && day_parts[2] == (month+1)) {    //Make sure that only the posts of this month will get in -
      marked_days[post_index] = new Post(day_parts[4],link,desc);
      post_index++;
  }
}

//Class
function Post(day,link,desc) {
  this.day = Number(day);
  this.text = "<a class='post-link' href='"+link+"' title='"+desc+"'>"+Number(day)+"</a>";
}

//Functions
function wrt(txt) {
  data += txt;
}

function makeCalendar() {
//Display the table
wrt("<table class='calendar-nav'>");
wrt("<tr><th colspan='7'>"+month_names[month]+" "+year+"</th></tr>");
wrt("<tr class='header'><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>");

//Get the first day of this month
var first_day = today;
first_day.setDate(1);
var start_day = first_day.getDay();

var d = 1;
var flag = 0;
var w = "";
//Create the calender
for(var i=0;i<=5;i++) {
  wrt("<tr>");
  for(var j=0;j<7;j++) {
      if(d > month_days[month]) flag=0;//If the days has overshooted the number of days in this month, stop writing
      else if(j>=start_day &&amp;amp; !flag) flag=1;//If the first day of this month has come, start the date writing

      wrt("<td class='days'>");
      if(flag) {
          w = d;

          //See if there is any posts on that day
          for(var k=0;k<marked_days.length;k++) {
              if(marked_days[k].day == d) { //There is a post
                  w = marked_days[k].text;
              }
          }
       
          wrt(w);
          d++;
      }
      wrt("</td>");
   
  }
  wrt("</tr>");
}
wrt("</table>");

document.getElementById("calendar-navigation").innerHTML = data;
}
window.onload = makeCalendar;

//All posts
//Add your posts data here - in the format
//addPost("YYYY-MM-DD","LINK_TO_THE_POST","POST_TITLE");
addPost("2005-08-09","http://binnyva.blogspot.com/","And now in Firefox - XML parsing.");
addPost("2005-08-10","http://binnyva.blogspot.com/","Bus Strike in Kerala");
addPost("2005-08-13","http://binnyva.blogspot.com/","Finished 'The DaVinci Code'");

Then upload your script to any site - I hope that you got a site to which you can upload this script - if not, I am extreamly sorry - it basically kills the idea.

Then add this line to your blog template in the <head> section.

<script language="javascript" type="text/javascript" src="http://URL-TO-THE-SCRIPT.js"></script>

Then add the below line in the template where you want the calendar to appear.

<div id="calendar-navigation"></div>

The appearence can be altered using the CSS section in your template.

Now here is the hard part. When ever you make a new post, you must one line at the end of the external Javascript file - like this...

addPost("2005-08-23","http://binnyva.blogspot.com/","Calendar Navigation System for Blogger");

I am sorry that it is not a very user friendly to install - I created this for my own use. If a lot of people want to use it, I could make a small system to automate the post adding and script hosting.

Some points before I leave...

This script if for people who know JavaScript - if you don't know javascript, it would be better to give it a pass for now. Another thing is that the script is in Beta - so expect bugs if you are going to use it. The last thing is that this script will show only the post of this month - so only the most recent posts will be shown.

Hope you like it.

UPDATE: I have removed the calender when I redesigned this site. So, in this post, I have included a sample of how it will appear...