Skip to main content

​
Overview

The stevenson.space calendar provides a comprehensive view of all school events, special schedules, holidays, and activities. The calendar automatically integrates with the bell schedule system to show which schedule type is active on each day.

​
Accessing the Calendar

1

Navigate to Calendar

Click the “Calendar” card from the home page dashboard
2

View Current Month

The calendar opens to the current month with today’s date highlighted
3

Browse Events

Scroll through dates to see color-coded events and special schedules

​
Calendar Features

​
Desktop View

The desktop calendar provides a full monthly grid view with comprehensive event information:

Monthly Grid

Traditional calendar layout showing all days of the month with events displayed inline

Event Details

Click any event to see full details including time, location, description, and categories

Navigation

Use arrow buttons or keyboard arrow keys to move between months

Event Categories

Filter events by category (Athletics, Fine Arts, Parent Calendar, etc.)

​
Mobile View

On mobile devices, the calendar adapts to a list-based view for easier navigation:
  • Date Selection: Tap dates to view events for that day
  • Swipe Navigation: Swipe left/right to change months
  • Event Cards: Events display as expandable cards with full details
  • Compact Layout: Optimized for smaller screens

​
Event Types

stevenson.space displays various types of school events:
Days with non-standard bell schedules are automatically marked on the calendar:
  • Late Arrival (monthly on select Thursdays)
  • Early Dismissal (before breaks, finals)
  • Activity Period (club meeting days)
  • PM Assembly (school assemblies)
  • No School (holidays, breaks, teacher institute days)
The schedule type is displayed prominently on each date, making it easy to plan your day.
Academic and school-wide events including:
  • Course selection evenings
  • Incoming freshman events
  • Professional development days
  • School breaks and holidays
  • Important deadlines
Sports games, tournaments, and athletic events for all Stevenson teams
Concerts, performances, theater productions, and art exhibitions:
  • Orchestra concerts
  • Band performances
  • Theater productions
  • Art shows
Events specifically for parents and families:
  • Course selection nights
  • Parent-teacher conferences
  • Information sessions
  • Community events

​
Using Event Filters

The calendar supports category-based filtering to help you focus on relevant events:
1

Locate Filter Dropdown

At the top of the calendar, you’ll see a category filter dropdown
2

Select Category

Choose from:
  • All (shows everything)
  • Athletics
  • Fine Arts
  • Parent Calendar
  • Other dynamically loaded categories
3

View Filtered Results

The calendar updates to show only events in the selected category
The filter categories are generated dynamically based on events in the current month, so available options may change as you navigate through different months.

​
Event Details

Click any event to view comprehensive information in a popup:
  • Event Name: Title of the event
  • Date & Time: When the event occurs (all-day or specific times)
  • Location: Where the event takes place (e.g., “Stevenson High School | Performing Arts Center”)
  • Description: Detailed information about the event, including:
    • Zoom links for virtual events
    • Registration information
    • Important notes and instructions
  • Categories: Tags indicating event type (Athletics, Fine Arts, etc.)

​
Example: Consortium Orchestra Concert

Date: January 15, 2026
Time: 7:00 PM
Location: Stevenson High School | Performing Arts Center

Description:
This is our annual 8th-grade sender school concert, showcasing our talented 
incoming students to all our consortium schools.

Categories: Fine Arts

​
Special Schedule Integration

One of the most useful calendar features is the automatic integration with bell schedules:
When a day has a special schedule (Late Arrival, Early Dismissal, etc.), the calendar automatically displays the schedule type on that date. This eliminates duplicate event entries and provides clear, concise information.

​
How It Works

  1. Automatic Schedule Detection: The system checks each calendar date against the schedule database
  2. Event Deduplication: If an event name matches a special schedule (e.g., “PM Assembly Schedule”), the redundant event is removed
  3. Clean Display: Only the schedule type is shown, with any additional unique event information preserved
Example:
  • If the schedule is “Late Arrival” on October 16, 2025
  • And there’s an event called “Late Arrival - Teacher PD”
  • The calendar shows: Late Arrival (schedule) + separate event for “Teacher PD”
Multiple ways to navigate through the calendar:

Arrow Buttons

Click left/right arrows to move between months

Keyboard Shortcuts

Press ← and → arrow keys to navigate (desktop only)

Touch Gestures

Swipe left or right on mobile devices

​
Calendar Data Source

Events are loaded from src/data/events.json and include:
  • Start and end timestamps
  • All-day vs. timed events
  • Event metadata (name, description, location)
  • Categorization for filtering
The calendar data is updated regularly to reflect the current academic year’s events. Special schedule dates are defined in src/data/schedules.json and automatically sync with calendar dates.

​
Upcoming Events on Home Page

For quick access to upcoming events without opening the full calendar:
1

View Home Dashboard

The home page includes an “Upcoming Events” card
2

See Next Events

Displays the next several upcoming events in chronological order
3

Click for Details

Click any event to see full details or navigate to the calendar

​
Tips for Using the Calendar

Check Weekly

Review the calendar weekly to stay informed about special schedules and events

Use Filters

Apply category filters to focus on events relevant to your interests (sports, arts, etc.)

Plan Ahead

Look ahead for early dismissal and late arrival days to adjust your schedule

Set Reminders

Note important events and set external reminders for critical dates

​
Mobile Optimization

The calendar is fully responsive and optimized for mobile use:
  • Touch-Friendly: Large tap targets for dates and events
  • Swipe Navigation: Natural gesture-based month switching
  • List View: Events display in an easy-to-read vertical list on mobile
  • Expandable Details: Tap events to expand and view full information
On mobile, use landscape orientation for a more traditional calendar grid view with better date visibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us