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; !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...
Read More...
