One of the most powerful feature of CalendarXP is the theme support. Themes are like clothes of the calendar and can be switched back and forth to create different looks in seconds. In addition to using the bundled high quality themes you may also customize your own to perfectly match the tone of your web page.
A theme defines all the customizable options that control the look&feel of the calendar, like colors, fonts, sizes and layout. A theme usually consists of 5 parts - don't be scared, it's actually quite simple to deal with them.
As a simplest example the "supermini" theme has only 3 parts - the supermini.js, supermini.css and a simple calendar tag.
More complicated examples like the "outlookTwin" theme have more - outlookleft/right.js, outlookleft/right.css, plugins.js, button images and the calendar tags, as following:
<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD>
<iframe width=150 height=141 name="gToday:outlookleft:agenda.js:gfFlat_1" id="gToday:outlookleft:agenda.js:gfFlat_1" src="iflateng.htm" scrolling="no" frameborder="0" >
<ILAYER><LAYER name="gToday:outlookleft:agenda.js:gfFlat_1" src="nflateng.htm"> </LAYER></ILAYER>
</iframe></TD>
<TD><iframe width=150 height=141 name="[gToday[0],gToday[1]+1]:outlookright:share[gfFlat_1]:gfFlat_2" id="[gToday[0],gToday[1]+1]:outlookright:share[gfFlat_1]:gfFlat_2" src="iflateng.htm" scrolling="no" frameborder="0" >
<ILAYER><LAYER name="[gToday[0],gToday[1]+1]:outlookright:share[gfFlat_1]:gfFlat_2" src="nflateng.htm"> </LAYER></ILAYER>
</iframe></TD></TR></TABLE>
From above, you can see we actually merged 2 themes (outlookleft and outlookright) to create an integral 2-month calendar.
There are some extra functions in the plugins.js
to synchronize
the 2 calendars so that they behave like one. We also need to supply the context-names
gfFlat_1
and gfFlat_2
in the name & id properties,
so that they can be idendtified and handled by the plugin accordingly.
Generally, you'll need to follow these steps:
themes/outlookTwin
dir and pick up the calendar tag(s)
from the theme template html file.src="/myweb/engines/iflateng.htm"
./myweb/engines/
. If you
place them somewhere else, you'll have to specify the absolute web path in
the name & id properties.Note: The location of the theme files are all relative to the engine file. It's not relative to the web page showing the calendar. Thus, you'd better use the absolute path when they are located in a place outside the engine directory to prevent confusion. A good sample could be:
<IFRAME width=102 height=100 name="gToday:/cal/themes/supermini:/cal/agenda/agenda.js" id="gToday:/cal/themes/supermini:/cal/agenda/agenda.js" src="iflateng.htm" scrolling="no" frameborder="0">
<ILAYER><LAYER name="gToday:/cal/themes/supermini:/cal/agenda/agenda.js" src="nflateng.htm"> </LAYER></ILAYER>
</IFRAME>
Now, it's quite easy to change the look of the calendar. In most cases, just change the "theme-name" in the name & id properties and copy the relevant files to the engine dir (or wherever you theme sits) will do. Please check out the HelloWorld tutorial for examples.
Trick - you may also get it switched by overwritten the current theme with files from another theme but using the current theme name. It could save you a lot of work since the calendar tags in your web page doesn't need to be changed. It's especially useful when you have many calendar pages in your project.
Note that switching between single-panel and multi-panel themes will need add/remove some extra <table> tags and can't get fully benefited from this trick.
Although quite a few high quality themes have been provided with the release package, they wouldn't cover everybody's favor. So let's brief on how to customize it now.
A calendar comprises 3 sections - top, middle and bottom. They are actually 3 table cells in one vertical column.
We have a diagram here illustrating most CSS used in the theme-name.css
file, as following:
The theme-name.js
file is another major option store. There
are more than 60 options in it. The file is self-documented and you may go
through and play with it simply using the Notepad. We only state several important
ones here:
var gBegin=gToday;
var gEnd=[2020,12,10];
gsNavPrev/gsNavNext
to create the month navigators. gsCalTitle
, and use the HTML code in gsNavPrev/gsNavNext
to create the month navigators.gsCalTitle
only.