Content
1. Introduction
2. Connecting the module to a page
3. Managing the calendar module
The Calendar module of Site@School has the following features:
- You can have as many calendars as you want. To use this feature, each calendar must have a unique page name.
- The entries in the calendar can have different forms:
- Caption, with a longer text that becomes visible via a mouse over that shows a popup with the longer text.
- A text that fills the particular day.
- A blank day. With a mouse over the text becomes visible in a popup.
- The same as above, but on multiple consequent days. Easy for holidays.
- More events on one day.
These possibilities enable having little visible text, for example 'Bustrip', and a long text body which becomes visible on a mouse over.
Or, you can have a 'clean' calendar where entries only become visible via mouse over, etc.
- The size and colors of a calendar can be adapted to your school site's layout and colors.
- An [Edit] function to change the module name and the program name to fit your language. See the Module manager chapter for details on how to change the names.
(top)
Before you can use the calendar module, it must be connected to a page on the site. Read the Module manager chapter on how to do this.
(top)
NOTICE: Before you can configure a calendar, you must have made a page with a page name in the page manager.
For example, the page you made was called 'Events'. Remember the name.
Go to the module manager, click on the calendar module. You will see:
![[ ]](pics/mod_cal_start.png)
mod_cal_start.png
Now you can add a calendar or, with the 'Go back' button, return to the module managers main screen.
Click on 'Add Calendar'. You will see:
![[ ]](pics/mod_cal_config.jpg)
mod_cal_config.jpg
Explanation:
- Calendar page name: Put in exactly the same page name as you previously used during the installation of a calendar module on a page with the pagemanager. For example, put in 'Events' (omit the ' and ').
- Introduction text (HTML code): Here you can put a text that will be above the calendar. By using simple HTML tags in the text you can markup the text.
- List of color configurable options: These texts speak for themselves.
- Hexadecimal value: The hexadecimal value of the color.
- Color of hexadecimal value: The color of the hexadecimal value. Changes in the color will be visible after saving the configuration data.
- Color to hexadecimal converter: Moving your mouse over the colors gives their hexadecimal values. You can use this tool to find the hexadecimal value for a color. You must enter the color in the field by typing the value in the field.
- Width of the table in pixels: Adjusting the width makes it possible to exactly fit the calendar on a page on your site.
- Height of the cell in pixels: Adjusting the height makes it possible to exactly fit the calendar on a page on your site.
- Cancel: To cancel your work and return to the previous page.
- Save: To save your work and return to the previous page.
Fill in all the entries and click on 'Save'. You are back at the previous menu and you will see the 'Events' calendar added:
![[ ]](pics/mod_cal_cal_added.png)
mod_cal_cal_added.png
Explanation:
- Garbage can icon: To delete the calendar
- Edit icon: To edit the name, colors, dimensions etc. of the calendar.
- Calendar name: The calendar name is the link to add data to a calendar. See below.
- Calendar name: Click to add entries to the calendar.
- Go back: Click to return to the module manager main screen.
Click on the calendar name. You will see:
![[ ]](pics/mod_cal_add_month.png)
mod_cal_add_month.png
Click on 'Add month'. You will see:
![[ ]](pics/mod_cal_edit_month.jpg)
mod_cal_edit_month.jpg
The calendar events field [3] will be empty. In the picture above the examples mentioned below are used.
Explanation:
- Month: Click on the dropdown menu and select the month of the year.
- Year: Click on the dropdown menu to select a year.
- Events entry field: You can have one or more entries per day or the same entry on a row of days.
Never use double quotes (") in the texts.(Embolden text)
These calendar text entries all have more or less the same form:
<day number> <underscore> word(s) for the event <comma>more text <enter>
Examples:
-
You want on the 7th of October an entry. On the calendar the words 'Staff Meeting' (without the quotes) should be visible. When you move your mouse over 'Staff Meeting', you want the following text to become visible: 'in Mary's classroom. John takes care of the beamer'. To get this result put the following in the text entry field:
7_Staff Meeting, in Mary's classroom. John takes care of the beamer.
|
Do not forget to end the text with an [Enter] (hit the Enter key on your keyboard).
-
Here is another event layout. On the 10th of October you want permanent visible: 'Sportsday. School closed'. Remember, never use double quotes in texts. This result can be obtained with the following entry:
10_Sportsday. School closed.
|
Do not forget to end the text with an [Enter] (hit the Enter key on your keyboard).
When you move your mouse over the day, the same text will be visible in the popup.
-
In the next example you do not want any text visible on the 11th of October, but when you move your mouse over the day you want the event to become visible in the popup. This result can be obtained with:
11_ ,Sports Day. School closed. We meet at 10:00 am on the sports field.
|
As you can see, between the underscore and the comma, there is a space. So nothing will be visible on the day.
Do not forget the [Enter] at the end of the line.
-
It's also possible to make an entry for multiple days. Very easy for your school holidays. The format is:
7-13_Autumn holidays, have a good time!
|
The seventh up to the thirteenth day of the chosen month will have the same entry: 'Autumn holidays'.
On each day the mouse over will reveal "have a good time!'.
In conjunction with the example above is this option:
10_Mary's birthday, Congratulations!
|
also 'Mary's birthday' will be visible. On mouse over on the 10th also the additional texts will be displayed.
NOTICE: This option only works when the '10_Mary...etc' entry is directly under the '7-13_Autumn... etc.' entry.
-
And here are two examples of more entries on one day:
2_9:30 - 10:30 Mrs. Burchak's class goes to the library.
<hr> 9:30 - 2:30 Mr. Bosscher's class goes to the zoo.
|
Here the full texts are visible on the second day. the <hr> tag makes a thin line between the events.
In the example below only the times are visible on the third day. The mouse over reveals the texts:
3_9:30 - 10:30 <hr> 9:30 - 2:30, 9:30 - 10:30 Mrs.
Burchak's class goes to the library.
<hr> 9:30 - 2:30 Mr. Bosscher's class goes to the zoo.
|
- Cancel: To cancel your work and return to the previous menu.
- Save: To save your work and return to the previous menu.
(top)
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2006-04-12