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 inc: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 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 digits. 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.

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. However, the code itself looks a little complicated, so this guide will tell you what does what.

.calendar .grid a {
    color: #000;
    text-decoration: none;}

This code governs most of the link colors in the calendar specifically the ones that are on the hover from the events. Changing color will change the color of the text. The default is black.
.calendar .date a {    color: #49D;}

This code is the color of the actual dates that appear in the calendar squares. On the calendar, this is the 1, or the 5, or the 27, and so on. Changing the color will change them all. The default is sky blue.
.calendar .heading {
    background-color: #F60;
    font-size: 110%;
    color: #FFF;}

This is the code for the large header that indicates month and year on the top of the calendar. You can change the background color and the color of the text. If you want, you can even alter the size of the header with a larger percentage meaning bigger. The default colors are white on orange.
.calendar .weekday,
.calendar .day {
    border:1px solid #AAA;
    background-color: #FFF;
    vertical-align: top;
    padding: 0 5px;}
.calendar .day:hover {    background-color: #F60;}

This governs the actual boxes that the dates and events go in. By default, each cell has a border and a background color of white. You can change the border to have thicker lines, a dashed or dotted border (change solid to either dotted or dashed), or to change the color from silver to something else. If you change the first background-color, you will be changing the background color of each cell. The .calendar .day:hover controls the color of the cells when the mouse hovers over one. The default when you hover over a cell is orange, but you can change the second background-color to something else. If you make each background-color the same, then hovering over the cell will do nothing.
.calendar .day .max-height {
    overflow: hidden;
    height: 60px;}

Changing height on this will change the height of the cells. The are by default 60 pixels high, but you can increase or decrease the height depending on preference. However, do not change the overflow:hidden if you want the calendar events to function properly.

calendar .event {
    height: 1em;
    display: inline-block;
    overflow: hidden;
    padding: 1px 5px 2px;
    margin:1px 2px 1px;
    background-color: #ADF;
    font-size: 90%;}

This is the code for the events of each date. If a certain day has an event, it will show up on the calendar with this code. You can change the background-color to create a different default background color other than the original blue. Also, you can change the -moz-border-radius and -webkit-border-radius to different values to determined roundness of the events. In Firefox and Safari, the events by default are rounded on the ends. You can change the pixel measurement to 0 to keep the events square or rectangular.
.calendar .calenhover span {
    position: absolute;
    display: none;
    margin: 10px -90px;
    width: 250px;
    background-color: #FFF;
    border: 2px solid #34B;
    padding: .5em;}

This code controls all the hovering blocks created by hovering over a date or event. You can change the color of the background with background-color. The default is white. You may change the border color and width as well with border. The default is a thick blue border. If you want it to be thinner, change 2px to 1px. You can change the width, but it is certainly not recommended since that would throw the centering of the hovertip off.
.calendar .calenhover:hover span {
    display: table-cell;}

This is the toggle for the hovertips. If you replace table-cell with none, then the hovertips will be turned off.

The next few indicate a change that affects an iframed feature. The elements that begin with .iframe are ones that affect the following:


.weekday controls the "Monday". .month-day controls the whole middle part, so you can get rid of the round edges (visible in Firefox and Safari) or change the blue part of the background color. .month affects the text, visible here as "Sep". You can change it from white or change its size. .day changes the "21" and its background. You can change its background from the default yellow to other colors or eliminate the roundness. .year affects the "2009" in the diagram above.

.gobacklink a{    color: #49D; }
.gobacklink a:hover{    background-color:transparent; text-decoration:none; }

This small code figures the "Back" link found on the event pages. The main thing you can do is change the text color.


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

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