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!

posted by J.L. at 2:08 am

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