Thursday, September 21, 2006

Jcalendar Code & Instructions

Thanks to Tom Switzer and via LinuxQuestions.org, I am able to present to you the code - fully copyable and pasteable - for Jcalendar.

Disclaimer: I strongly urge you to back up your blog template before you make any changes to it. Copy the entire template code into a new file called something obvious like my_blog_template.html and put it somewhere obvious like your personal folder for easy retrieval in case something goes wrong.

Copy and paste the following style rules into your blog template's <style> area; as the last entry is probably a good place, so that it's easy to find:

/* Jcalendar style rules
----------------------------------------------- */
table.calendar {
font-size: x-small;
width: 100%;
}
caption.calendar {
color:#cc0000;
text-transform:uppercase;
letter-spacing:.2em;
}
table.calendar td {
text-align: center;
}
td.calendar_ntm {
color: silver;
}
td.today {
text-decoration: underline;
}

This will give you a basic style, but of course you're free to modify it.

Next, copy this Javascript into the <head> of your blog template. This contains all the inner workings:

<script type="text/javascript">

/** THIS IS MY SELF-UPDATING JAVASCRIPT CALENDAR APP.
* FEEL FREE TO STEAL IT AND PASTE IT INTO YOUR OWN BLOG.
* THERE IS A SCRIPT SECTION PLACED IN THE SIDEBAR PORTION
* WHICH CALLS THE FUNCTIONS HEREIN, SO YOU ALSO NEED TO
* COPY THAT TOO.
* THE STYLE INFO IS JUST ABOVE, BUT YOU CAN DO WHATEVER YOU LIKE :)
* HAVE FUN!
* J.L.
*/

// setup arrays and variables
var d = new Date();
var x;
var months = [ ["January", 31],
["February", 28],
["March", 31],
["April", 30],
["May", 31],
["June", 30],
["July", 31],
["August", 31],
["September", 30],
["October", 31],
["November", 30],
["December", 31] ];

var day_name = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
var today_year = d.getFullYear();
var today_month = d.getMonth();
var today_date = d.getDate();
var today_day = d.getDay();

d.setDate(1); // NOT DEBUGGING! LEAVE THIS IN WHEN DONE

var first_date = d.getDate();
var first_day = d.getDay();

// is it a leap year? TRUE if year % 4 == 0
var leap = false;

function set_feb_days()
{
if((today_year % 4) == 0)
{
leap = true;
months[1][1] = 29;
}
return leap;
}

function open_table()
{
document.write('<table class="calendar">');
}

function write_caption()
{
document.write('<caption class="calendar">' + months[today_month][0] + ' - ' + today_year + '</caption>');
}

function write_header()
{
document.write('<tr>');
for (x in day_name)
{
document.write('<th>' + day_name[x] + '</th>');
}
document.write('</tr>');
}

function write_body()
{
document.write('<tbody>');
var a = 1 - first_day;
var b = 41 + a - (months[today_month][1]);
if(today_month == 0) // if January, set last month to December
{
var last_days = months[11][1];
}
else
{
var last_days = months[today_month - 1][1];
}
var j = 1;
var k = 1;
for(i = 0; i < 6; i++)
{
document.write('<tr>');
for( ; a < 1; a++,j++)
{
document.write('<td class="calendar_ntm">' + (last_days + a) + '</td>');
}
for( ; !(j % 8 == 0) && (a <= (months[today_month][1])); a++,j++)
{
if(a == today_date)
{
document.write('<td class="today"&lgt;' + a + '</td>');
}
else
{
document.write('<td>' + a + '</td>');
}
}
for( ; !(j % 8 == 0) && a > (months[today_month][1]) && k <= b; a++,k++,j++)
{
document.write('<td class="calendar_ntm">' + k + '</td>');
}
j = 1;
document.write('</tr>');
}
document.write('</tbody>');
}

function close_table()
{
document.write('</table>');
}

</script>


Lastly, copy and paste the following Javascript into the sidebar somewhere. If you want to have your calendar appear just under your profile like I have it, paste the code just after the </MainOrArchivePage> tag:

<script type="text/javascript">

set_feb_days();
open_table();
write_caption();
write_header();
write_body();
close_table();

</script>


Well, let me know how you get on. I'd be keen to hear of sucesses, and will try to help with any problems that crop up when 'installing'. Happy hacking!

1 Comments:

Blogger J.L. said...

Update: function write_header():
XHTML validity error causing incorrect rendering in Firefox/Windows. Although the original generated XHTML code was not valid, Firefox/Linux and IE/Win seem to be quite tolerant of this and rendered the code properly anyway.

I have changed code in post above to fix this. Please follow the instructions to copy and paste the <script> block containing the function definitions, located in the <head> section of your blog template.

9:06 PM  

Post a Comment

<< Home