Calendar Buttons

When I started rewriting my calendar script and got as far as the toCalendar method, there was still one part of my original calendar script that was missing. The original script provided four links at the bottom to allow the calendar to be changed to a different month or year. One of the benefits of the new code over the old is that the calendar code could be used in many different ways and not just in the one variant that the old version of my script allowed for.

Of course that variant that my original script allowed is also a legitimate one for the new script. We can do a bit better than the way that one worked though and set up the links separately so that we can be more flexible in just where these links appear. Instead of having the links as an actual part of the toCalendar method we'll instead set up a separate function called addButtons() that will return a dicumentFragment containing the four links for going back a year or a month or going forward a year or a month. We'll supply this function with both the date object and the id of the element where the calendar is displayed so that it can update the date and then replace the displayed calendar with the new one. Since I modified the toCalendar method to be able to highlight holidays, we'll also pass in the array of holidays to allow any holidays in that array that match the new calendar to be highlighted.

To be as flexible as possible, these new links are attached to a different id in the web page to that of the calendar. This allows you to place the links where ever you want in the page - they do not necessarily have to be under the calendar as they were in the original script. Doing this also makes the code simpler since it can update the calendar without having to recreate the links.

As most of the functionality we need for each of the four links will be the same we can define an sp() function to create a span and pass in a text string to display as the link and the function we want to have run when the link is clicked. We can also define an updCal() function that performs the common part of the processing to be performed after one of our 'links' is clicked since apart from changing the date by different amounts or different directions, the rest of the processing is the same.

This gives us the following code to generate our four 'links' to allow the calendar to be changed:

addButtons = function(dt,cal,hol) {
"use strict";
var d, updCal, sp;
updCal = function(dt,cal,hol) {
var t, d, calid;
t = new Date();
calid = document.getElementById(cal);
   dt.getFullYear()!==t.getFullYear() || dt.getMonth()!==t.getMonth()));
sp = function(txt,f) {
var s, a, t;
s = document.createElement('span');
s.className = 'calbutton';
a = document.createElement('span');
t = document.createTextNode(txt);
a.appendChild(t); = '#00f'; = 'underline'; = 'pointer';
a.onclick = f;
return s;
d = document.createElement('div');
  function() {dt.setFullYear(dt.getFullYear()-1);updCal(dt,cal,hol);}));
  function() {dt.setMonth(dt.getMonth()-1);updCal(dt,cal,hol);}));
  function() {dt.setMonth(dt.getMonth()+1);updCal(dt,cal,hol);}));
  function() {dt.setFullYear(dt.getFullYear()+1);updCal(dt,cal,hol);}));
return d;

Each of our 'links' is defined inside a span with class=calButton" so we can apply styles to that class in order to determine the relative positioning of the 'links'.

.calbutton {display:inline-block; width:4.5em;}

All we need to do now is to append these 'links' into the web page. We can even use id="calButton" in our page and it will not interfere with the class of the same name.

holidays = ['2012-01-01','2012-12-25'];


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow