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 "normal" theme has a normal.js, a normal.css, a plugins.js and a simple calendar tag.
We always suggest you put all calendar related files into a separate directory and set the src of the calendar tags to reference them. This makes them more like a self-contained component and is easy for you to maintain in future.
Usually you'll need to follow these steps:
engines
directory to the themes/outlook
directory.agenda.js
file from the HelloWorld demo directory to the themes/outlook
directory.xxxTemplate.htm
in your browser to see how the theme looks like. xxxTemplate.htm
and integrate into your own page.src
property of the calendar tag on your page to have themes/outlook
in the path. You don't need to change anything if your page is also located in the themes/outlook
directory.gfPop.fPopCalendar()
function in the onclick events
of HTML tags so that it can be triggered. Note: The location of the theme files is relative to the location of the engine file, it's NOT relative to the web page containing the calendar. Therefore you'd better use the absolute path to avoid confusion if the theme files are located in a different dir. 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="ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px;">
<LAYER name="gToday:/cal/themes/supermini:/cal/agenda/agenda.js" src="npopeng.htm" background="npopeng.htm"> </LAYER>
</IFRAME>
Note: If you don't want any agenda or holiday, you may skip step 3. However, you MUST also remove the agenda.js parameter from the name & id of the calendar tag.
It's quite easy to change the look of the calendar. In most cases, you just need to change the "theme-name" in the name & id properties and copy the relevant files over. Please check out the HelloWorld tutorial for examples. e.g. change the above calendar sample from supermini theme to normal theme with no agenda file:
<IFRAME width=102 height=100 name="gToday:/cal/themes/normal" id="gToday:/cal/themes/normal" src="ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px;">
<LAYER name="gToday:/cal/themes/normal" src="npopeng.htm" background="npopeng.htm"> </LAYER>
</IFRAME>
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:
Other common options are:
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.
Note: