Skip to content

Calendar card

An agenda beside a month you can browse. It measures its own box and fills it, and it needs room for the month.

2 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.

calendar, small size
Small
calendar, medium size
Medium
calendar, large size
Large
calendar, in chat
In chat
calendar, light theme
Light theme
calendar, ring
Ring

Wide draws the same as large. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

calendar · empty, medium size
Medium
calendar · empty, large size
Large
calendar · empty, in chat
In chat
calendar · empty, light theme
Light theme

Small draws the same as medium. Wide draws the same as large. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

Every card also takes the fields all cards share.

FieldTypeWhat it does
type'calendar'
eventsCalendarEvent[]
from?string
to?string
empty?string

One thing on a calendar. All-day events use plain dates, so they land on their day in any time zone.

FieldTypeWhat it does
titlestring
startstringISO time, or YYYY-MM-DD for all day
end?stringthe same form; an all-day end is the day after the last, as in iCal
calendar?stringwhich calendar: gives it a stable colour when color isn’t set
color?string#hex or a CSS colour name
location?string

Calendar