Calendar

Calendars display dates and events in familiar month-grid form. The CTD Learns App has three calendar variants for different contexts: a full-page calendar on the class schedule page (large cells with event markers), a medium calendar in the mentor dashboard sidebar (smaller cells), and a compact mini-calendar in the admin sidebar (no nav, display only). All three are built on MUI's DateCalendar with separate theme creator functions per variant. Event markers are small blue dots under days that have scheduled events.

Overview

Page Calendar

Full-size calendar on the class schedule page. Large cells with event markers.

Mentor Dashboard

Medium-size calendar in the mentor dashboard sidebar. Slightly smaller cells.

Admin Sidebar

Compact mini-calendar in the admin sidebar. Smallest cells, no navigation arrows.

Page Calendar

Full-size calendar used on the class schedule page. Uses calendarPageStyle theme function.

April 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Property
Value

Min width

504px (31.5rem)

Cell size

63px × 63px (3.938rem)

Padding

30px (1.875rem)

Border

0.5px solidgray200

Border radius

10pxradiusLg

Header font

22px700 weight

Day font

14px

Selected day bg

blue tint#309FDE80

Outside month bg

#F1F2F2

Event marker

8px circleinfo (#3B82F6)

Theme function

calendarPageStyle(theme)

Mentor Dashboard Calendar

Medium calendar for the mentor dashboard. Uses mentorDashboardCalendarPageStyle theme function.

April 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Property
Value

Width

96% of container

Cell size

39px × 39px (2.44rem)

Day font

8.7px (0.54rem)

Event marker

4px circleinfo

Theme function

mentorDashboardCalendarPageStyle(theme)

Admin Sidebar Calendar

Compact mini-calendar in the admin sidebar. Navigation arrows and view switcher are hidden. Uses adminPageCalendarStyle theme function.

April 2026

S
M
T
W
T
F
S
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
Property
Value

Width

256px (16rem)

Cell size

auto (small)

Day font

8.7px (0.542rem)

Header font

15px400 weight

Nav arrows

hidden

View switcher

hidden

Month nav

pointer-events: none (display only)

Theme function

adminPageCalendarStyle(theme)

Event Markers

Two marker sizes are exported for use in calendar day cells to indicate events on a given date.

Small Calendar Marker
12

4 × 4px

eventMarkStyleSmallCalendar
Big Calendar Marker
12

8 × 8px

eventMarkStyleBigCalendar

Code

Page calendar setup
import { calendarPageStyle } from '@/theme/theme';
import { useTheme } from '@mui/material/styles';
import { ThemeProvider } from '@mui/material/styles';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

function ClassCalendar() {
  const theme = useTheme();
  const calendarTheme = calendarPageStyle(theme);

  return (
    <ThemeProvider theme={calendarTheme}>
      <DateCalendar
        renderDay={(day, _, DayProps) => (
          <Box sx={{ position: 'relative' }}>
            <PickersDay {...DayProps} />
            {hasEvent(day) && (
              <Box sx={eventMarkStyleBigCalendar} />
            )}
          </Box>
        )}
      />
    </ThemeProvider>
  );
}
Theme function pattern
// Each calendar variant exports a theme creator function
// that takes the current theme and returns a new theme
// with component overrides specific to that context:

export const calendarPageStyle = (theme) =>
  createTheme({
    components: {
      MuiDateCalendar: { ... },
      MuiPickersDay: { ... },
      MuiPickersCalendarHeader: { ... },
      MuiDayCalendar: { ... },
    },
  });

// Usage: wrap DateCalendar in a ThemeProvider
// with the generated theme for that variant.
Workflow EditorDo's & Don'ts