Calendar tag reference

Quickstart

Put the following code in your dtml:

        <dtml-calendar>
          <dtml-var date fmt="%d">
        </dtml-calendar>

Phew! that was quick!

Show me your true colors

You can specify the color of the background:

        <dtml-calendar bgcolor="#cc99cc">
          <dtml-var date fmt="%d">
        </dtml-calendar>

Linking you, linking me

By now, you have probably worked out whatever that goes between the calendar tags get displayed in each cell.

The following example puts a link on dates less than 14 :

        <dtml-calendar bgcolor="#cc99cc">
          <dtml-if "_int(date.dd())<14">
            <a href="http://www.zope.org"><dtml-var date fmt="%d"></a>
          </dtml-else>
            <dtml-var date fmt="%d">
          </dtml-if>
        </dtml-calendar>

Getting rid of the toolbar

So the toolbar is a bit ugly, but you are no artist either. Let's turn the toolbar off:

        <dtml-calendar controls=no>
          <dtml-var date fmt="%d">
        </dtml-calendar>

Use text links instead of images in the toolbar

A trivial task with the calendar tag:

        <dtml-calendar images=no> 
          <dtml-var date fmt="%d">
        </dtml-calendar>

Mess with the calendar tag's brains

The weekdays attribute takes two digits, the first digit between 0 and 6, the second digit between 1 and 9. Kids, do try this at home:

        <dtml-calendar weekdays=37> 
          <dtml-var date fmt="%d">
        </dtml-calendar>

Notice that the week begins on Wednesday now? And try this too:

        <dtml-calendar weekdays=35> 
          <dtml-var date fmt="%d">
        </dtml-calendar>

No habla ingles?

Built-in internationalization:

        <dtml-calendar lang=es> 
          <dtml-var date fmt="%d">
        </dtml-calendar>

Other languages you can use are: ca, da, de, du, en, es, eu, fi, fr, it, ja, no, pl, pt, ro, ru, zh_TW.

Ouch! So your language is not one of those?

You can still make the calendar show in language setting the following properties with setCalendar:

• monthnames: a list with the names of the months
• shortmonthnames: a list with the abbreviated names of the months
• daynames: a list with the names of the weekdays
• longmonth_year_format: text of left of header in month view
• shortmonth_year_format: text of left of header in week view
• month_day_year_format: text of left of header in day view
• week_format: text of right of header in week view

In the last four properties, you can use the following parameters:

• 'yyyy': for 4-digit year
• 'yy': for 2-digit year
• 'Mmmm': for month name
• 'Mmm': for short month name
• 'mmmm': for lowercase month name
• 'mmm': for lowercase short month name
• 'mm': for 2-digit month
• 'dd': for 2-digit day
• 'ww': for week of year

For example, this bit of code will show a calendar with texts and date formats in basque:

        <dtml-calendar weekdays="17" theme="yb">
          <dtml-call "setCalendar('monthnames',['Urtarrila','Otsaila','Martxoa','Apirila','Maiatza','Ekaina','Uztaila','Abuztua','Iraila','Urria','Azaroa','Abendua'])">
          <dtml-call "setCalendar('shortmonthnames',['Urt','Ots','Mar','Api','Mai','Eka','Uzt','Abu','Ira','Urr','Aza','Abe'])">
          <dtml-call "setCalendar('daynames',['Ig','Al','Aa','Az','Og','Or','La'])">
          <dtml-call "setCalendar('longmonth_year_format','yyyy(e)ko mmmm')">
          <dtml-call "setCalendar('shortmonth_year_format','yyyy/mmm')">
          <dtml-call "setCalendar('month_day_year_format','yyyy(e)ko mmmmren dda')">
          <dtml-call "setCalendar('week_format','ww. astea')">
          <dtml-var date fmt="%d">
        </dtml-calendar>

More properties

Some other properties you can use with setCalendar to change its look and feel:

• leftfgcolor: color of text in left part of header (where the date or date range is shown). Default is the overall bgcolor.
• leftbgcolor: background color on left part of header. Default is black (000000).
• middlebgcolor: background color of middle of header (where the day/week/month buttons are). Defaults to overall bgcolor.
• rightbgcolor: background color of right part of header (where arrows are). Defaults to overall bgcolor.
• cellbgcolor: background color of current day (defaults to overall bgcolor).
• daybgcolor: background color of the day headers, in week, month and year modes (defaults to overall bgcolor).
• mhbgcolor: background color of the month headers, in year mode
• align: day's table horizontal cell alignment, default none.
• valign: day's table vertical cell alignment, default none.
• left: text of left of header. Defaults to date or date range. Can use the parameters mentioned above
• middle: text of middle of header. Defaults to the mode buttons.
• right: text of right of header. Defaults to arrows with rightmiddle inbetween.
• rightmiddle: text between arrows in right of header. Defaults to day buttons, week number, or blank, depending on mode.
• bordercolor: the color of the border and lines drawn around the calendar elements. Defaults to 000000.
• spacing: the spacing between the calendar cells. This also controls the width of the border drawn in bordercolor. Defaults to 2.
• padding: the padding within the calendar cells. Defaults to 4.
• cellattrs: List of attributes for the day cells. Example:

          setCalendar('cellattrs', (('CLASS','day'), ('ID','today')))
  

Try this for example:

        <dtml-calendar mode="month" weekdays="17">
          <dtml-if "date.dow()==6 or date.dow()==0">
            <dtml-call "setCalendar('cellbgcolor', '#ff0000')">
          <dtml-else>                        
            <dtml-call "setCalendar('cellbgcolor', '#ffffff')">
          </dtml-if>                        
          <dtml-var date fmt="%d">
        </dtml-calendar>

Themes

At the moment there is only the "yb" theme:

        <dtml-calendar theme=yb>
          <dtml-var date fmt="%d">
        </dtml-calendar>