FANDOM


Example

1
2
3
4
5
6
This is happening
7
8
This is happening
9
10
This is happening
11
12
13
14
That is happening
15
That is happening
16
That is happening
17
18
19
20
This is happening
21
22
23
This is happening
24
This is happening
25
This is happening
26
27
That is happening
28
That is happening
29
30
That is happening
31

Instructions

This calendar is a table consisting of 7 columns (one for each day of the week) and 5 rows (or 6 rows for when a month's dates land on 6 weeks). In edit mode, notice that on the example above there is a 6th row that is hidden with comment lines. Whenever you need the calendar to display the 6th row, simply delete the two comment lines, but don't forget to reinsert them when you need to go back to 5 rows.

Besides copying the wiki markup code for the calendar, you'll also need to copy over two other things: the Calendarblock template and the CSS, both of which are listed below.

Calendarblock template

Find it at Template:Calendarblock. This small template is used to display the date numbers and any content (text, links, small images, etc.) that needs to appear on a block of the calendar. NOTE: when using the template, the date= input is required (simply enter a number), but the note= input is optional. So for every block on the calendar that has a date, you'll need to use the Calendarblock template with the date= input filled. Then simply fill in the note= input for any dates that need content displayed.

CSS

Be sure to copy the following CSS to the wiki to ensure that the parts of the calendar display correctly. If you don't want the calendar to have black borders, change the color of border: on the third line.

/* Calendar style */
.calendar {
   border: 1px solid black;
   margin: 20px auto;
   text-align:center;
   width: 690px;
}
 
.calendarblock {
   height: 100px;
   width: 97px;
   position: relative;
}
 
.calendardate {
   font-weight: bold;
   font-size: 16px;
   left: 7px;
   top: 7px;
   position: absolute;
}
 
.calendarnote {
   bottom: 3px;
   font-size: 13px;
   line-height: 17px;
   position: absolute;
}

Blank calendar code

<table class="calendar" cellspacing="0" border="1"><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
</tr><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
</tr><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
</tr><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
</tr><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<!-- REMOVE THIS COMMENT LINE AND THE ONE BELOW WHENEVER 6 ROWS (WEEKS) ARE NEEDED.
</tr><tr>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
<td class="calendarblock"></td>
THIS IS THE OTHER COMMENT LINE. DON'T FORGET TO REINSERT THESE COMMENT LINES WHEN ONLY 5 ROWS ARE NEEDED. -->
</tr></table>

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.