Calendar

A flexible calendar grid component for displaying months. Fully customizable through render callbacks for both header cells (weekday names) and day cells.

Props

PropTypeDefaultDescription
dateDateRequiredThe month to display (uses year and month from this date)
header(props) => JSX.ElementRequiredRender function for weekday header cells
cell(props) => JSX.ElementRequiredRender function for day cells
jssJSS-Custom styles for the calendar grid

Header render props

PropertyTypeDescription
weekdaystringLocalized weekday abbreviation (Mon, Tue, etc.)

Cell render props

PropertyTypeDescription
dateDateThe date for this cell
todaybooleanWhether this date is today
outOfMonthbooleanWhether this date is outside the current month
topbooleanWhether this cell is in the top row
bottombooleanWhether this cell is in the bottom row
leftbooleanWhether this cell is in the leftmost column
rightbooleanWhether this cell is in the rightmost column

Basic usage

Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Calendar
  date={new Date()}
  header={({ weekday }) => (
    <Box padding="small" jss={{ textAlign: "center" }}>
      <Span bold color="secondary" size="small">
        {weekday}
      </Span>
    </Box>
  )}
  cell={({ today, date, outOfMonth }) => (
    <Box padding="small" jss={{ opacity: outOfMonth ? 0.3 : 1 }}>
      {today && <Badge color="highlight" />}
      <Span>{date.getDate()}</Span>
    </Box>
  )}
/>

With today indicator

Mon

Tue

Wed

Thu

Fri

Sat

Sun

27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Calendar
  date={new Date()}
  header={({ weekday }) => (
    <Box>
      <H3>{weekday}</H3>
    </Box>
  )}
  cell={({ today, date, outOfMonth }) => (
    <Box relative={true} jss={{ opacity: outOfMonth ? 0.2 : 1 }}>
      {today && (
        <Badge
          jss={{
            position: "absolute",
            top: "50%",
            transform: "translateY(-50%) translateX(-75%)",
            right: "50%",
          }}
        />
      )}
      <Span>{date.getDate()}</Span>
    </Box>
  )}
/>

Using position props

The cell render props include position information for styling borders and corners:

<Calendar
  date={new Date()}
  header={({ weekday }) => <Span>{weekday}</Span>}
  cell={({ date, outOfMonth, top, bottom, left, right }) => (
    <Box
      jss={{
        opacity: outOfMonth ? 0.3 : 1,
        borderTop: top ? "1px solid var(--divider)" : "none",
        borderBottom: bottom ? "1px solid var(--divider)" : "none",
        borderLeft: left ? "1px solid var(--divider)" : "none",
        borderRight: right ? "1px solid var(--divider)" : "none",
        borderTopLeftRadius: top && left ? 8 : 0,
        borderTopRightRadius: top && right ? 8 : 0,
        borderBottomLeftRadius: bottom && left ? 8 : 0,
        borderBottomRightRadius: bottom && right ? 8 : 0,
      }}
    >
      <Span>{date.getDate()}</Span>
    </Box>
  )}
/>

Date selection

Calendar remains a low-level rendering primitive for schedules and custom month views. Use DateInput for form entry and date selection; it adds locale-aware segments, constraints, a calendar popover, keyboard navigation, and focus management.

Grid layout

The Calendar uses CSS Grid with 7 columns (Mon-Sun). The header row and day cells flow naturally into the grid:

// Custom grid styling
<Calendar
  date={new Date()}
  jss={{
    gap: 4,
    padding: 16,
    backgroundColor: "var(--secondary-background)",
    borderRadius: 12,
  }}
  header={...}
  cell={...}
/>

Localization

Weekday names are automatically localized using Intl.DateTimeFormat with UK English locale (week starts Monday). The calendar always displays Monday through Sunday.