Skip to main content

​
Customization

PlanningSup offers extensive customization options to tailor your calendar experience. All preferences are stored locally and optionally synced across devices when you sign in.

​
Event colors

You can customize the color of each event type: Lecture, Lab, Tutorial, and Other.
1

Open settings

Click the gear icon in the navbar
2

Adjust colors

Under “Couleurs des événements” (Event colors), click each color picker to choose a new color
3

Reset to defaults

Click “Réinitialiser” (Reset) to restore the default color scheme

​
Default colors

// apps/web/src/composables/useSettings.ts
const DEFAULT_COLORS: ColorMap = {
  lecture: '#efd6d8',   // Soft pink
  lab: '#bbe0ff',       // Light blue
  tutorial: '#d4fbcc',  // Light green
  other: '#EDDD6E',     // Yellow
}
These colors are optimized for both light and dark themes.
Colors are stored in localStorage and synced to the server if you’re signed in. See apps/web/src/composables/useSettings.ts:273-289 for the sync logic.

​
Event filtering

​
Blocklist (hide events)

You can hide specific courses from your calendar without deleting them:
1

Open settings

Navigate to “Liste de blocage” (Blocklist)
2

Add event titles

Type or paste event titles to hide (one per line)
Example:
- "Sport"
- "Conférence optionnelle"
3

Save and refresh

The calendar re-fetches events with your blocklist applied server-side
// apps/web/src/composables/useSettings.ts
const blocklist = useLocalStorage<string[]>('settings.blocklist', [])

const queryParams = computed<Record<string, string>>(() => {
  const qp: Record<string, string> = {}
  if (blocklist.value.length > 0) {
    qp.blocklist = blocklist.value.join(',')
  }
  return qp
})
The blocklist is sent as a query parameter to the API, so very long lists may cause performance issues. Limit to ~20-30 items.

​
Highlight events with teacher

Enable this option to dim events without an assigned teacher, making it easier to focus on confirmed courses.
1

Open settings

Find “Surligner les événements avec enseignant” (Highlight events with teacher)
2

Toggle the switch

Events without a teacher will appear grayed out
// apps/web/src/composables/useSettings.ts
const highlightTeacher = useLocalStorage<boolean>('settings.highlightTeacher', false)

if (highlightTeacher.value) {
  qp.highlightTeacher = 'true'
}
This is a backend-only flag that affects the server response, not client-side styling.

​
Merge duplicate events

When multiple plannings contain the same event (e.g., a shared lecture), PlanningSup can merge them into a single calendar entry.
1

Open settings

Find “Fusionner les événements dupliqués” (Merge duplicate events)
2

Enable the toggle

Duplicate events are merged client-side based on:
  • Same start and end times
  • Same title
  • Same event type
// apps/web/src/composables/usePlanningCalendar.ts
const displayedEvents = computed(() =>
  settings.mergeDuplicates.value 
    ? mergeDuplicateEvents(planning.events.value) 
    : planning.events.value,
)
See apps/web/src/utils/events.ts for the merge algorithm.
This is especially useful when combining multiple planning groups that share common courses.

​
Timezone conversion

If you’re traveling or studying abroad, you can convert event times to a different timezone.
1

Open settings

Navigate to “Fuseau horaire” (Timezone)
2

Select a timezone

Choose from IANA timezones like:
  • Europe/Paris (default)
  • America/New_York
  • Asia/Tokyo
3

Events are converted

All times update automatically in the calendar
// apps/web/src/composables/usePlanningCalendar.ts
function mapApiEventToCalendarEvent(
  event: EventWithFullId,
  timezone: NonNullable<AllowedTimezones>,
) {
  const start = event.startDate.toTemporalInstant().toZonedDateTimeISO(timezone)
  const end = event.endDate.toTemporalInstant().toZonedDateTimeISO(timezone)
  // ...
}
PlanningSup uses the Temporal API for accurate timezone handling.
The detected browser timezone is shown below the dropdown. If you leave the field empty, PlanningSup uses your browser’s timezone by default.

​
Custom planning groups

You can save frequently-used planning combinations as custom groups for quick access.
1

Select plannings

In the planning picker, choose the plannings you want to group
2

Create a group

Click “Créer un groupe” (Create group) and give it a name
Example: "Master 2 - All options"
3

Switch groups quickly

Click the group name in the picker to load all associated plannings at once
// apps/web/src/composables/useSettings.ts
interface CustomGroup {
  id: `${string}-${string}-${string}-${string}-${string}` // UUID-v4
  name: string
  plannings: string[]
}

function addCustomGroup({ name, plannings }: { name: string, plannings: string[] }) {
  const customGroup: CustomGroup = {
    id: crypto.randomUUID(),
    name,
    plannings,
  }
  customGroups.value.push(customGroup)
}
Custom groups are stored in localStorage and synced across devices when you’re signed in.
You can have up to 50 custom groups, each containing up to 100 plannings.

​
Theme (light / dark)

PlanningSup automatically detects your system theme preference and applies it to the calendar.
  • Light mode: White background with soft pastel colors
  • Dark mode: Dark gray background with muted colors
To override the system preference:
1

Open settings

Find “Thème” (Theme)
2

Choose a theme

Select Light, Dark, or Auto (system default)
// apps/web/src/composables/useTheme.ts
const theme = useLocalStorage<'light' | 'dark' | 'auto'>('theme', 'auto')

const isDark = computed(() => {
  if (theme.value === 'auto') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  return theme.value === 'dark'
})
The calendar updates instantly when you change the theme: 
// apps/web/src/composables/usePlanningCalendar.ts
watch(uiIsDark, (isDark) => {
  calendarApp.value?.setTheme(isDark ? 'dark' : 'light')
})

​
Show weekends in week view

By default, the week view shows Monday to Friday (5 days). You can enable weekends to see Saturday and Sunday as well.
1

Open settings

Find “Afficher les week-ends” (Show weekends)
2

Toggle the switch

The week view expands to 7 columns
// apps/web/src/composables/useSettings.ts
const showWeekends = useLocalStorage<boolean>('settings.showWeekends', false)
const weekNDays = computed(() => (showWeekends.value ? 7 : 5))
This preference is synced across devices if you’re signed in.

​
Export settings data

All customization settings are stored in localStorage under keys like: 
settings.colors
settings.blocklist
settings.highlightTeacher
settings.showWeekends
settings.mergeDuplicates
settings.customGroups
settings.targetTimezone
You can inspect or backup these values using your browser’s developer tools: 
// View all settings
Object.keys(localStorage).filter(k => k.startsWith('settings.'))

// Export settings as JSON
const settings = {}
for (const key of Object.keys(localStorage)) {
  if (key.startsWith('settings.')) {
    settings[key] = localStorage.getItem(key)
  }
}
console.log(JSON.stringify(settings, null, 2))

​
Next steps

Offline mode

Install the PWA for offline access

Sync preferences

Learn how cross-device sync works

Build docs developers (and LLMs) love

Get started for freeTalk to us