Calendar
Calendar examples for Felix, built from Felix tokens: white and linen surfaces, turquoise for the selected state, chart-series colors for categories. Follows the light/dark toggle. Demo data is fictitious; "today" in every demo is Wednesday, October 7, 2026.
Month view
Seven-column grid with a segmented view switcher. Today is a filled circle, weekends are slightly tinted, days outside the month are dimmed, and a cell shows at most three chips before a "+N more" link. Multi-day events repeat as connected chips.
Week view
Hourly time grid with an all-day row, a now line, overlapping events split side by side, and a tentative event drawn dashed.
Agenda
Events grouped by day: time column, category bar, title with location, then attendee avatars. Use it as the default view on narrow screens.
Event chips and categories
Five categories, each one color. Variants carry state through shape, not extra colors: all-day is filled, multi-day chips connect, tentative is dashed, declined is struck through, cancelled is faded.
Event card, quick create and conflict
Mini calendar and date pickers
Single date with event dots, range selection with presets, and a time-slot grid.
Availability
Free/busy rows per person with a suggested common slot, plus bookable slots for scheduling links.
Year overview
Heat map of busy days. Five steps from empty to packed.
Anatomy
| Part | Spec |
|---|---|
| Header | Month or range title, previous/today/next controls, segmented view switcher (Day, Week, Month, Agenda) |
| Day cell | White cell, 1px #cfcabf rule (dark mode #35605f); day number top left, weekends tinted |
| Today | Filled circle on the day number, a turquoise #2bf2f1 fill with ink text #082422 |
| Selected day | Same fill on the number plus a turquoise cell outline |
| Event chip | Tinted fill from its category color, 3px left rule in the full color, 12px text, one line |
| Time grid | 48px per hour, event height equals duration, 2px gap between stacked events |
| Now line | 2px orange #f26629 line with a dot on the left edge |
| Agenda row | Time, category bar, title, secondary line, attendee avatars |
| Availability | Row per person: free (empty), tentative (hatched), busy (solid); suggested slot outlined |
Rules
- One color per category, five at most. Never reuse a status color for a category.
- Express state with shape: filled (all-day), dashed (tentative), struck through (declined), faded (cancelled).
- Times in 12-hour or 24-hour format consistently within a view, never mixed.
- Show "+N more" instead of growing a day cell past three chips.
- Always mark today and the current time; selection never replaces them.
- Weekends stay visible; tint them rather than hide them.
- Conflicts are shown inline on the event, with a clear way to keep both or reschedule.