Calendar Colors and Visibility
In a busy week with five family members' schedules all on screen, reading every event title is not realistic. Color is the signal that lets your brain sort "this is a school event" from "this is a work block" in milliseconds. PrimeCal gives you 16 distinct colors and full control over which calendars are shown at any moment.
The 16 Calendar Colors
PrimeCal offers 16 colors arranged in rainbow order:
| Color | Hex | Good for |
|---|---|---|
| Red | #ef4444 | Urgent, alerts, or a strong personal accent |
| Orange | #f59e0b | A teenager's calendar (Noah's pick) |
| Yellow | #eab308 | Kids, school, or a bright accent (Sue's pick) |
| Lime | #84cc16 | Outdoor activities, gardening, fitness |
| Green | #10b981 | Family shared calendar |
| Emerald | #22c55e | A second green shade for a sibling calendar |
| Teal | #14b8a6 | Health, wellness, medical appointments |
| Cyan | #06b6d4 | Cool accent for hobbies or projects |
| Sky | #0ea5e9 | Travel, vacations, flights |
| Blue | #3b82f6 | Work calendar (Will's pick) |
| Indigo | #6366f1 | A second blue for personal vs. professional |
| Violet | #7c3aed | Creative projects or hobbies |
| Purple | #8b5cf6 | A softer purple accent |
| Pink | #ec4899 | May's personal calendar |
| Rose | #f43f5e | Important personal events or anniversaries |
| Slate | #64748b | Secondary or archived calendars |
Every calendar must have a color; there is no colorless option.
How Color Works in the Calendar Views
Month view: Event cards display as solid color blocks. You can see May's pink personal events, Will's blue work events, and the family green events without reading their titles.
Week view: Event blocks are color-coded in the time grid. When multiple calendars' events appear in the same time slot, the side-by-side columns are each in their calendar's color, making overlaps easy to read.
Focus view: Upcoming event cards are color-coded so you know at a glance which calendar each belongs to.
Sidebar: Each calendar has a checkbox in its own color beside the name - an outline when it is off, filled when it is on. This is the same color used for its events throughout the app.
Event-Level Color Override
Individual events can have their own color, independent of their calendar's color. When you create or edit an event, the Color field lets you choose from the same 16 options.
When an event has a color override, that color is shown in the calendar view instead of the calendar's color. The calendar's color still shows in the sidebar list.
Example: May uses the Late Family calendar (green) for events involving the whole family. But when she creates events specifically for Noah, she sets the event color to Orange — Noah's personal color — so it's immediately clear whose event it is, even though it lives on the shared calendar.
Changing a Calendar's Color
- In the sidebar, find the calendar whose color you want to change.
- Click the three-dot menu (⋮) next to the calendar name.
- Select Edit calendar.
- Click the color you want in the color picker.
- Click Save.
All events on that calendar immediately update to the new color in every view.
Showing and Hiding Calendars
You don't always want to see every calendar at once. PrimeCal lets you toggle calendars on and off without deleting them.
To hide a calendar: Clear the checkbox next to the calendar name in the sidebar (clicking the name works too). All events from that calendar disappear from the main view.
To show it again: Tick the checkbox again. Events return immediately.
To see just one calendar: Open its ⋯ menu and choose Show only this calendar. Show all calendars and Hide all calendars are in the ⋯ menu next to My Calendars.
Hidden calendars still exist — their events are stored and can be shown again any time. Hiding is not deleting.
Hiding a Calendar Group
If you organize calendars into groups (see Calendar Groups), the group's own checkbox switches all of its calendars on or off at once. It shows a dash when only some of them are on. Folding a group away only tidies the list - it does not hide anything.
This is faster than toggling each calendar individually when you want to clear the view down to just one or two calendars.
Practical Tip: The Example Family Color System
The Example family assigns one primary color to each person and keeps it consistent:
| Person | Color | Logic |
|---|---|---|
| Alex | Pink | Alex's personal calendar and her events on shared calendars |
| Jordan | Blue | Jordan's work calendar; Indigo for his personal |
| Robin | Yellow | School calendar and Robin's events on the family calendar |
| Milo | Orange | School and sports, Milo's events on the family calendar |
| Family shared | Green | Anything the whole family shares |
Anyone who opens the Example family calendar can tell instantly whose event is whose. This consistency extends to event-level color overrides: when Alex adds Milo's dentist appointment to the Example Family calendar, she sets the event color to Orange so it reads as "Milo's thing" even in the shared view.
Choose colors that are distinct enough from each other to be readable at a glance. Avoid putting Teal next to Cyan, or Blue next to Indigo, for calendars that often share the same time slots — they may look too similar in a crowded week view.