Calendar Documentation

How the calendar operates and how to customize it.

The entirety of the calendar uses a mixture of CSS, page includes, Wikidot modules, HTML, and Javascripting. Customizing the calendar only requires changes in the CSS excerpt. Everything else is based off of the CSS and needs no changes. In fact, it is recommended no other page be altered or else the calendar may not function.

Activating the Calendar

To activate the calendar on any page, use the following code and insert the proper information:

[[include :calendars:calendar

For year, put the current year. For example, 2009.

For leap-year, if the current year is a leap year, then put TRUE. If not, then put FALSE. Note: It is important to use ALL CAPS

For month, place the month you want displayed as its numerical form. The number must be two digits1. For example, February would be written as 02.

For first, put the week day that the 1st of the month appears. This is important since the calendar cannot recognize which day the month begins on, so you must define it yourself. If the first of October was on a Thursday, for example, you would put a Thursday, no abbreviations.

Optional Attributes

The calendar also provides some extra functionalities, which are accessible via additional attributes.

[[include :calendars:calendar

For width, you may put any defined width in pixels, em measurements, or a percentage. If left blank, the width will automatically be 100%, or span the entire width of the screen or block it is in.

For mode, you can alternate between a full-sized calendar (default), or a miniaturised calendar. To use the miniaturised calendar, set mode to MINI for "mini-mode". Note: It is important to use ALL CAPS

Adding Events to the Calendar

The calendar has a neat feature that lets you add events and let others comment on those events. When you hover over the date number, you can find a link that says "Add an Event". Click on that and you can edit an event for that day. Don't forget to title it!

On the calendar, an event will appear on the day you wanted it on. Hover over it, and you will get the summary of the event that you wrote. If you click the event, you will be taken to its event page. If the number of events overflows the date box, hover over the corner of the box and all events will be revealed. To remove an event, simple delete the event page.

You can change the color of the event by adding a tag. Click on the tags button on the bottom of the page, and add the following tag. Do not delete any existing tags!!


Replace the second color with the color you want. Do not use any spaces. An example tag for the color red would be ;background-color:red;.

Responses can be made to the event via the respond box. If you add the tag _no-respond to the list of tags, the box will not render and responses to the specified event cannot be made.

Customizing the Colors

All the colors of the calendar can be customized by editing the CSS. The CSS holds all the information for the colors so that you can easily change orange to blue, or blue to green, and so on.

Border Colors

.calendar {    border-color: red;}
.calendar .weekday,
.calendar .day {    border-color: purple;}
.calendar .calenhover span {    border-color: cyan;}

The above CSS will make your border colors look like this:


Background Colors

.calendar .heading {    background-color: green;}
.calendar .weekday,
.calendar .day {    background-color: red;}
.calendar .day:hover {    background-color: cyan;}
.calendar .event {    background-color: purple;}
.calendar .calenhover span {    background-color: orange;}
.iframe .day {    background-color: blue;}
.iframe .month-day {    background-color: brown;}

The above CSS will make your background colors look like this:


Text Colors

.calendar .weekday {    color: black;}
.calendar .grid a,
.calendar .date a {    color: lightgreen;}
.calendar .event a {    color: pink;}
.calendar .heading {    color: cyan;}
.iframe .year {    color: red;}
.iframe .month {    color: orange;}
.iframe .day {    color: purple;}
.iframe .weekday {    color: green;}
.gobacklink a {    color: blue; }
.MINI.calendar span.calenhover span a { color: maroon;}
.MINI.calendar .day span a {    color: yellow;}
.MINI.calendar span.calenhover a {    color: violet;}

The above CSS will make your text colors look like this on the full calendar:


It will also make the text colors look like this on the mini calendar:


Advanced CSS Customisation


If you have any questions, be sure to contact people on the Wikidot Projects Forum for assistance.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License