Calendar View
The Calendar View displays a weekly column-based layout with two modes: Compact (accordion-style) and Expanded (time grid like Google Calendar).
View Modes
Toggle between two display modes using the buttons in the header:
Compact Mode
- Accordion-style layout
- Technicians as collapsible panels
- Shows job cards in a list
- Availability gaps highlighted
- Best for: Quick overview of who's working
Expanded Mode
- Time grid layout (7 AM - 7 PM)
- Jobs positioned by actual time
- Visual duration (height = time)
- Overlapping jobs shown side-by-side
- Best for: Seeing time conflicts & gaps
When you switch between Compact and Expanded, your choice is saved. Next time you visit the Calendar tab, it will remember your preference.
Compact Mode
Layout
Each day shows as a column with:
- Day Header: Day name, date, and job count
- Technician Panels: Collapsible sections for each technician
- Job Cards: Listed within each technician's panel
Availability Gaps
Green tags show when technicians have open time slots:
9:00 AM - 11:00 AM
2:00 PM - 5:00 PM
Click any gap to create a new job at that time with the technician pre-selected.
Expanded Mode
Time Grid Layout
Job Cards
8:30 AM • JB26-0005
Elijah Johnson
test
9:30 AM • JOB-013
Elijah Johnson
Service Call - Elijah
2:45 AM • JB26
Sarah Johnson
Testing 2
Job cards in expanded mode show:
- Time - Scheduled time
- Job Number
- Customer Name
- Job Title
- Location
- Duration
Each job is color-coded by its assigned technician. If no color is set for the technician, a unique color is generated from their name.
Quick Job Creation
In Expanded mode, you can click any open time slot to create a job:
- Click on an empty time slot in any day column
- A tooltip shows "Click to create job at X:00 AM/PM"
- The Job Create form opens with the date and time pre-filled
Hover over any time slot to see it highlight. This shows you're about to click that specific time.
Drag & Drop
Rescheduling works in both Compact and Expanded modes:
In Expanded Mode
- Grab any job card
- Drag vertically to change the time
- Drop on a different day column to change the date
- A dialog shows the calculated new time based on drop position
- Confirm to save the new schedule
In Compact Mode
- Grab any job card from a technician panel
- Drop on a different day or technician panel
- Select the specific time in the confirmation dialog
Tips & Tricks
- Current Time Indicator: In Expanded mode, a red line shows the current time on today's column.
- Today Highlight: Today's column has a blue header for easy identification.
- Job Overlap: When jobs overlap, they display side-by-side so you can see conflicts.
- URL Sharing: The view mode is saved in the URL (?view=expanded), so you can share specific views.