Skip to main content
stevenson.space allows you to create custom bell schedules beyond the official Stevenson High School schedules. This is useful for creating modified schedules, testing different bell times, or adapting to special events.

​
Understanding Schedule Structure

Before creating custom schedules, it’s important to understand how schedules work in stevenson.space.

​
Schedule Types

Schedules are organized into schedule types (collections) that contain one or more schedule modes:

Schedule Type

A category of schedules (e.g., “Standard Schedule”, “Late Arrival”, “Activity Period”)

Schedule Mode

A specific bell schedule within a type (e.g., “Normal”, “Half Periods”)

​
Schedule Data Structure

Each schedule mode contains three key arrays: 
type SingleDaySchedule = {
  name: string;           // Schedule mode name (e.g., "Normal")
  start: string[];        // Start times for each period
  end: string[];          // End times for each period
  periods: string[];      // Period names/numbers
  isCustom?: boolean;     // Marks user-created schedules
};
All three arrays (start, end, periods) must have the same length, with corresponding indices representing the same period.

​
Example: Standard Normal Schedule

Here’s how the standard Normal schedule is structured: 
{
  "name": "Normal",
  "start": ["8:30", "9:26", "10:18", "11:10", "12:02", "12:54", "13:46", "14:38"],
  "end": ["9:21", "10:13", "11:05", "11:57", "12:49", "13:41", "14:33", "15:25"],
  "periods": ["1", "2", "3", "4", "5", "6", "7", "8"]
}

​
Creating a Custom Schedule

1

Navigate to Settings

Open the Settings page by clicking the gear icon or navigating to /settings.Scroll to the Schedules section.
2

Click 'Add Custom'

In the schedule cards grid, click the Add Custom card with the plus icon.This will navigate you to the /add-schedule route.
3

Configure Your Schedule

Fill in the schedule details:
Enter a unique name for your custom schedule. If it conflicts with an official schedule name, the system will automatically append a number (e.g., “Normal (2)”).
Custom schedules cannot replace official schedules. If you try to use the same name, your custom schedule will be automatically renamed.
Select which schedule type this mode belongs to. Common types include:
  • Standard Schedule
  • Late Arrival
  • Activity Period
  • Early Dismissal
Define each period with:
  • Period name: Number or label (e.g., “1”, “3A”, “Activity”)
  • Start time: In 24-hour format (e.g., “8:30”, “13:46”)
  • End time: In 24-hour format
Use the ! prefix for special periods (e.g., !Activity, !Assembly) to mark them as non-class periods.
4

Save Your Schedule

Click the save button to create your custom schedule.The schedule will be stored in localStorage.customSchedules and synced across your browser sessions.

​
Managing Custom Schedules

​
Viewing Your Schedules

All schedules (both official and custom) appear as cards in the Settings > Schedules section. Custom schedules are marked with isCustom: true internally and display additional management options.

​
Editing Schedules

Custom schedules can be edited directly:
  1. Click the Edit button on the schedule card
  2. Modify the periods, times, or name
  3. Save your changes
The edited schedule will replace the original in the same position within its schedule type.

​
Deleting Custom Schedules

1

Locate the Schedule

Find the custom schedule you want to delete in the Schedules section.
2

Click Delete

Click the Delete button (trash icon) on the schedule card.
3

Confirm Deletion

Confirm the deletion in the popup dialog.
This action cannot be undone. The schedule will be permanently removed from localStorage.

​
Setting a Default Schedule Mode

You can set any schedule mode (official or custom) as your default:
  1. Go to Settings > General
  2. Find the Default Schedule Mode dropdown
  3. Select your preferred schedule mode
  4. This will be used as the default when multiple modes are available for a schedule type
Setting a default is particularly useful if you frequently use “Half Periods” mode instead of “Normal”.

​
Advanced: Storage Format

Custom schedules are stored in localStorage using this structure: 
type CustomSchedules = Record<string, Schedule[]>;

// Example localStorage.customSchedules:
{
  "Standard Schedule": [
    {
      "name": "My Custom Normal",
      "start": ["8:30", "9:30", ...],
      "end": ["9:25", "10:25", ...],
      "periods": ["1", "2", ...]
    }
  ],
  "Activity Period": [
    {
      "name": "Modified Activity",
      "start": [...],
      "end": [...],
      "periods": [...]
    }
  ]
}
The store merges official schedules with custom schedules at runtime, adding isCustom: true to user-created modes.

​
Resetting to Defaults

If you want to remove all custom schedules and return to official schedules only:
1

Open Schedules Settings

Navigate to Settings > Schedules
2

Click 'Restore to Defaults'

Click the Restore to Defaults button in the section header
3

Confirm Reset

Confirm the action in the popup dialog
This will delete ALL custom schedules. This action cannot be undone.

​
Technical Reference

For developers working with the schedule system: 
// Add or replace a custom schedule mode
addCustomScheduleMode({
  scheduleType: 'Standard Schedule',
  scheduleToAdd: {
    name: 'My Schedule',
    start: ['8:30', '9:26', ...],
    end: ['9:21', '10:13', ...],
    periods: ['1', '2', ...]
  },
  scheduleToReplace: 'Old Schedule Name' // optional
});

// Remove a custom schedule
removeCustomScheduleMode({
  scheduleType: 'Standard Schedule', // optional - if omitted, removes from all types
  scheduleToRemove: 'My Schedule'
});

// Reset all custom schedules
resetSchedules();
See src/stores/schedules.ts for the complete implementation of schedule management.

Build docs developers (and LLMs) love

Get started for freeTalk to us