Vector: calendar

The {{ calendar }} vector will generate an HTML calendar. The name part of the vector identifies which page will be called for each day on the calendar to populate that day's contents. Each day's date will be provided to the referenced page in the form of a {{var}} vector.

Several CSS styles are used in the generated HTML. Vectoran does not do any styling of the calendar - it is up to the developer to appropriately style them.
  • table.vectoran_cal - the overall table containing the calendar
  • td.vectoran_cal_header - the table cell containing the header part of the calendar where the month and year are displayed
  • span.vectoran_cal_month - the span that contains the month and year as well as the links for moving between months
  • td.vectoran_cal_day_header - the table cell that contains each day of the week name
  • td.vectoran_cal_day - the table cell for each date on the calendar
  • td.vectoran_cal_day_today - the table cell for the current day
  • td.vectoran_cal_day_inactive - the table cell for each date on the calendar that is not part of the current month. Note: these cells also include vectoran_cal_day in their css class list.
  • span.vectoran_cal_day_number - the span that contains the day of the month number.


{{ calendar: my_calendar_day }}
This vector would generate the calendar and for each day would call {{include:my_calendar_day}}. Before that call is made, it sets the variable cal_day with the date of the current day (the value is accessed via {{var:cal_day}}). So, for instance, if each day simply displayed the date, the contents of the my_calendar_day page would be:

Date: {{ var: cal_day }}

{{ calendar: my_calendar_day | month=2011-01-01 | section=homes }}
This vector would do the same thing as the first example but with some differences. First, the month attribute would set the calendar's default date to January 1, 2011. Second, any additional parameters supplied are set to variables and passed to the included page. For this example, section would be accessed in the my_calendar_day page as {{var:section}}. This is particularly useful if you have a website with multiple calendars that display events for only a certain group.