SVG Maker Project - Month Calendar

This project details how to create a month calendar with Scalable Vector Graphics (SVG) which will use the Javascript Date() object functions (methods) to update the calendar to show the current month.

The image to the left shows a typical calendar format where there are only 5 weeks needed. Of course, some months will require a 6th row when their first day starts later in the week. Let's take a look at the SVG code needed to display this image.

The code shows an SVG image using 100% of the width and height of the container the image is placed in and telling the browser to use (0,0) and (800,500) as the coordinates of the container. After some style definitions a grouping with class="calendar" contains the calendar shown.

The <rect> that follows creates the elliptical top that holds the text of the month and year, which is the next line of code - a <text> element. The <text> element has 2 class definitons, so styles from both defintions will be applied. Note that when more than one class is used, it is separated by a space, not a semi-colon like the style properties are.

The next grouping uses the translate transformation to offset all elements contained in the grouping relative to (15,60). The <rect> element that follows draws the large box to contain the calendar. It is 440 pixels high, so it uses the remainder of our viewBox (440+60=500). Next a horizontal line is drawn using the <path> element that is transformed 40 pixels down. It is the line under the text showing the days of the week. That leaves us with 400 pixels to draw the lines separating the weeks of the calendar.

There are 2 groups defined next, one for five weeks (id="FiveRows") and one for six weeks (id="SixRows"), but the six week grouping will be hidden since its class definition is hide and the hide style sets the display property to none - so the browser ignores it. Javascript will change the class attribute as needed as we will see when we add the code to the image.

The next set of <path> elements draw the vertical lines separating the days of the week. And lastly, a grouping of <text> elements display the days of the week.

Basic Calendar Outline

Adding Dates

Adding dates to the image is somewhat painful because each box in the calendar needs a text element to hold the date. For a 5 row calendar that is 5x7=35 text elements and 6x7=42 text elements for a 6 row calendar. But, thanks to copy and paste it can be done much more quickly than if we had to type each one. Once it is set up, the tedious part is done.

The code below gets added to the FiveRows grouping. Similar code is added to the SixRows grouping, but is not shown at this time. It will be included in the final code listing at the end.

A couple of things worth noting. Each row is placed in a group which is transformed with just the y coordinate changing. Also each group has identical <text> elements (except for the text itself). In the final code listing the text elements will contain a space character since the javascript will be filling it in. The space character gives the text element a child node so that the javascript can access the firstChild property of the DOM when the javascript updates it.

Also, each <text> element has a unique id with a "-5" suffix. The SixRow grouping will contain similar code with a "-6" suffix. The significance of that will be obvious when the javascript gets added.

It might look like a lot of code, but with copy and paste, it is created very quickly.

Adding Script

The script shown below sets a few variables, Months is an array of month names, Days is an array of the number of days in each month, and suffix defaults to "-5", the suffix of the text ids for a FiveRow calendar. Then the event listener will call the generateCalendar() function once the image loads.

The function generateCalendar() gets a new Date object, saves the current day in a variable, changes the day to the 1st of the month to get the day of the week of the first day of the month, then sets the day back to today.

After setting month and year variables with the month and 4 digit year, the code does a leap year check and sets the second element in the Days array to 29 if it is a leap year. Fun fact: centuries that are divisible by 400 are leap years, but centuries that are not, are not leap years. Note that the "%" operator is a modulus or remainder operator and "||" is the operator for a "logic OR" and "&&" is the operator for a "logic AND". So that line of code reads, "If the remainder of the year divided by 400 is equal to zero, OR if the remainder of the year divided by 100 is not equal to zero AND the remainder of the year divided by 4 is equal to zero, the set the Days array second entry equal to 29" - the array index is zero relative, so 1 is the second entry and 0 is the first.

Next the code gets the <text> element (node) with id="month", and sets its firstChild nodeValue property to the Months array for the month plus a space plus the year. This put the month and year on the top of the calendar.

The day of the week for the first day of the month is an offset into the calendar. Since the FiveRow calendar has 5x7=35 boxes, if the day of the week offset plus the number of days in the current month exceed 35, we will need to make a SixRow calendar. That is what the code is doing next, setting the class attributes of the FiveRow and SixRow groupings to show or hide to display the correct one. It also sets the suffix variable, which is use later.

Lastly, the code enters a for loop, looping for the number of days in the current month. Each loop it updates a <text> elements with the day of the month. It builds the id of the <text> element by starting with "B", then adding the for loop index plus 1 plus the day of the week offset, then adds the suffix for the number of rows needed for this months calendar. Within the for loop, it also checks the for loop index plus 1 to see if this element is today's date. If so, it sets the style attribute for the day to "fill:red", so today stands out on the calendar.

Entire Code for the Calendar

Copy and paste the code below into your text editor, save the file with a .svg extension, and open it in a browser. Edit the file, then refresh the browser to see the effect of your change. Note the viewBox is changed slightly - from 500 to 505 to give a small margin at the bottom.

Try changing the line of code in the script var dt = new Date(); to var dt = new Date("01/01/2016");. Then try to add a clickable point to move the calendar forward and backward, i.e. draw a small arrow on each end of the calendar title and add an event listener element for a "click" event. Now you can check any date in time. What day of the week were you born on?

SVG Maker Projects - coding SVG images - at STEAMcoded.org