Calendar

A sidebar panel

What is the Calendar

This panel has not been updated for over 5 years. This does not mean that the existing code is buggy, but it does mean that I am no longer actively maintaining it.

The Calendar is a sidebar panel, originally created for usage with Opera. While time progressed I thought it didn’t quite reflect my skills if this only worked in one browser, therefore I also took the time to make it work in Mozilla and Internet Explorer. The process for installing a sidebar on Mozilla is relatively easy (not as easy as in Opera), but near the end of 2003 I discovered that Internet Explorer is also capable of having panels though a registry tweak. Therefore, this panel is fully usable as I originally intended it to be used in those three browsers. Apart from those things, Konqueror and Safari are also capable of displaying it, but without panels/sidebars I do not see much use for it myself.

Calendar preview

Calendar screenshot

Installation instructions

Extract all of the files in the zip file to your hard drive. It doesn’t matter where, as long as you think it’s a good place. Be sure to leave the directory structure intact, to do so, check "Preserve Folder Names" in WinZip.
Open your browser, click the File menu and click Open.
Browse to the location where you saved the files and open the install.html file. Alternatively, you can double click the extracted file directly to make it open in your default browser.
Adjust all of the settings until you like the result. Be sure to make good use of the preview window, but do not click next or forward in it! This will include month and year settings, which will grow to be annoying on the long term. When you’re finished, click the "Ready?" button. Now a link with the text "Click here to finish the installation!" will appear. Click it. Or, if you’re using Mozilla, the Calender panel will get installed immediatly after clicking the button. If you use IE, a text will appear which explains how to continue.
(from here, instructions are Opera only, but I’m sure you can figure it out in your own browser)
Put in a name you like, or just leave the default. Click ok.
Your calendar is now available in Panels. Right click on its selector, click "Customize" and drag it to a place where you like it.
The Calendar is optimized to be displayed in the Panels and its size will change with the size of your Panels. However, it will not resize forever. It has a minimum and a maximum size, which is also a bit dependant on your language. But of course, everything can be customized through CSS.
Enjoy your new panel!

Explanation of the string

String options:

month=[1-12] : month to be in the middle is the month number you fill in, do not add this line to start at the current month
year=[anything] : fill in anything you want, nothing will start at the current year.
startOn=[0-1] : 1 is EU style calendar, 0 is US style.
style=[default|green|red] : layout file, links directly to the css file with the same name. If that css file does not exist, the calendar will not be styled.
lang=[dut|eng|ger|swe] : dut is dutch, eng is english, ger is german and swe is swedish.
clock=[0-2] : 1 is clock on top, 2 is on bottom, 0 is off.

So if you always want it to be green in your hotlist, only add ?style=green to your string. All other options will be default then.

String options explanation:

[number-number] : means you can use any number in between the two numbers stated.
[option|option] : means you can choose between the options listen if you use the default calendar js file.

CSS notes

The entire code is covered by id= "content".

The calendar part (all three together) is covered by a id="calendar".

The three calendar parts are covered by the id’s "cal1", "cal2" and "cal3". Since 0.6 you also have "cal0" and "cal4" which apply only when you use the five calendar display. If you only view one calendar, you can access it through "cal2"

The individual months are covered by the classes "m[1-12]".

All classes which can be used in combination with these div’s can be found in the default.css file.

The options code is covered by a id="options".
The navigation by id="navigation".
Further you have subselectors like "more_options", "more_options_week", "more_options_clock" etcetera. For a better understanding of the structure, check the calendar.js, if you don’t know javascript but do know HTML/CSS it should be easy to understand what’s going on.

The clock code is covered by a id="clock".

Other notes

If you want to change something in the .js files, be sure to take a good look at the comments.

I hope this little calendar has been, or will be, of use to you.