Calendar
Calendar is an iCal-inspired date management application for ryOS that lets you view days, weeks, and months, create events, manage todos, and organize your schedule with color coding. It provides cloud sync, AI integration, and persistent event storage.
Overview
Calendar is an iCal-inspired date management application with day, week, and month views, event creation with color coding, cloud sync, and AI integration. It helps ryOS users track appointments, deadlines, todos, and events in an Apple iCal-inspired interface with brushed metal and Aqua styling. Events sync to the cloud and Ryo can create and manage events via chat. The app supports week view as the primary view, day view for focus, month view for overview, and offers Spotlight search integration for finding events quickly.
Features
- Day, Week & Month Views: iCal-style views with smooth navigation between focused day, weekly schedule, and monthly overview
- Create, Edit, and Delete Events: Double-click a date or use File > New Event to add events; edit and delete with color coding for visual organization
- All-Day & Multi-Day Events: Toggle an event to all-day in the tray editor; all-day events can span multiple days via an inclusive
endDate(timed events clear it and usestartTime/endTimeinstead) - Time Zone Aware: Calendar honors the system time zone set in Control Panels' International pane (defaults to Auto, matching the browser), so "today", the selected date, and clocks reflect that zone
- Cloud Sync: Calendar events sync to the cloud
- AI Integration: Calendar AI tool—Ryo can create and manage events via chat
- Spotlight Search: Calendar events appear in Spotlight search results
- Brushed Metal + Aqua Styling: Matches classic macOS aesthetics
- Mobile-Responsive: Horizontal scrolling in week view on smaller screens
- Today Indicator: Red highlight for the current day
- Translucent Event Colors: Overlap visibility when events conflict
- Sync Menu Items: File menu includes sync options
- Date/Range Label: Displayed in the title bar (moved from bottom toolbar)
- Auto-Save: Events are automatically saved and persist between sessions
User Guide
Getting Started
Launch Calendar from the application launcher. Use the day, week, or month navigation to move between time periods, or click Today to return to the current date. Week view is the default primary view with an iCal-inspired layout.Key Actions
- Add Event: Double-click any date in the week or month view, or use File > New Event
- Sync Events: Use File menu sync options to sync calendar data with the cloud
- Organize with Colors: Select an event and choose a color from the color options
- Remove Events: Select an event and use Edit > Delete Event
- Search Events: Use Spotlight to find calendar events from anywhere in ryOS
Tips & Shortcuts
- Events auto-save as you create and edit them—no manual save needed
- Use colors to distinguish between work, personal, and other event types
- Ask Ryo in chat to create or manage events—AI integration handles the details
Technical Details
Window Configuration
- Default size: 700×520px
- Minimum size: 300×380px
Component Architecture
src/apps/calendar/components/calendar-app/CalendarAppComponent.tsx— Main app with day, week, and month viewssrc/apps/calendar/components/CalendarMenuBar.tsx— Menu bar with File, Edit, View options and syncsrc/apps/calendar/components/tray-details/TrayDetails.tsx— Event/todo detail traysrc/apps/calendar/components/tray-details/EventTrayEditor.tsx— Event create/edit tray editor
Hooks
src/apps/calendar/hooks/useCalendarLogic.ts— Calendar state, navigation, and event management
Utilities
src/apps/calendar/utils/parseIcal.ts— iCal format parsing
State Management
useCalendarStore (src/stores/useCalendarStore.ts) — Zustand store with localStorage persistence for events, calendars, and todos. Its structured payload remains small; large inline-content stores use IndexedDB instead.
Related Apps
- Stickies: For quick reminders alongside scheduled events
- Dashboard: Includes a mini calendar widget that can show your events
- Chats: Ask Ryo to create or manage calendar events via the AI integration
- Control Panels: Sets the International time zone the Calendar follows, and toggles Calendar cloud sync