Component

Calendar

Generates a calendar table

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

2018

26 December	Wednesday	Boxing Day
2 January	Tuesday	New Year’s Day (substitute day)

How to call this component

<%= render "components/calendar", {
  caption: "Upcoming bank holidays in England and Wales",
  year: 2018,
  events: [
    {
      title: "Boxing Day",
      date: "2018-12-26 00:00:00 +0000"
    },
    {
      title: "New Year’s Day",
      date: "2018-01-02 00:00:00 +0000",
      notes: "Substitute day"
    }
  ]
} %>

Accessibility acceptance criteria

Caption must contain a complete description of the data contained in the table

Other examples

With headings (preview)

2018

Date	Day of the week	Name
26 December	Wednesday	Boxing Day
2 January	Tuesday	New Year’s Day (substitute day)

<%= render "components/calendar", {
  caption: "Upcoming bank holidays in England and Wales",
  year: 2018,
  headings: [
    {
      text: "Date"
    },
    {
      text: "Day of the week"
    },
    {
      text: "Name"
    }
  ],
  events: [
    {
      title: "Boxing Day",
      date: "2018-12-26 00:00:00 +0000"
    },
    {
      title: "New Year’s Day",
      date: "2018-01-02 00:00:00 +0000",
      notes: "Substitute day"
    }
  ]
} %>