HomeBook an Intro CallStartup Program
Documentation
Start typing to search…

Calendar Interface

Learn how to use the OnSched dashboard calendar to view, manage, and organize appointments visually.

Environment tip: All examples use v3.onsched.com for production. Replace the host with api-stage.onsched.com when calling the staging environment.

What Is the Calendar Interface?

The OnSched dashboard includes a calendar view for visualizing appointments across time. This interface allows you to:

  • View appointments in day, week, or month layouts
  • Filter by location, service, or resource
  • Create appointments directly from time slots
  • Edit or cancel existing bookings
  • Monitor availability at a glance

The calendar is primarily used through the OnSched dashboard, though the same data can be accessed via API for building custom calendar interfaces.

When to Use the Calendar

Dashboard Users

Use the calendar interface when you need to:

  • Visualize schedules – See how appointments are distributed
  • Identify gaps – Find open time slots for manual bookings
  • Manage walk-ins – Book customers who call or arrive in person
  • Coordinate resources – View multiple resources side-by-side
  • Check conflicts – Verify appointments don't overlap

API Integration

If you're building a custom interface, use:

  • GET /v3/appointments/filter – Retrieve appointments by date range, location, service, or resource
  • GET /v3/availability – Show open slots
  • Your own calendar UI library (FullCalendar, React Big Calendar, etc.)

Calendar Views

Day View

Shows appointments for a single day in hourly increments:

Best for:

  • Detailed day management
  • Viewing minute-by-minute schedules
  • Finding small gaps between appointments
  • Same-day booking management

Features:

  • Hourly time grid
  • Appointments sized by duration
  • Color-coded by status or service
  • Resource columns (if filtering)

Week View

Displays 7 days with appointments across the week:

Best for:

  • Weekly planning
  • Identifying busy vs slow days
  • Resource capacity planning
  • Multi-day availability patterns

Features:

  • Days as columns
  • Hours as rows
  • Scrollable time range
  • Quick navigation between weeks

Month View

Shows entire month with appointment counts per day:

Best for:

  • High-level overview
  • Long-term planning
  • Identifying booking trends
  • Seasonal capacity review

Features:

  • Full month at once
  • Appointment count badges
  • Click to drill into day
  • Quick month navigation

Filtering the Calendar

By Location

Select a location to show only appointments at that location:

  • Useful for multi-location businesses
  • Each location manager sees only their appointments
  • Location-scoped services appear only in relevant location calendars

By Service

Filter to specific services:

  • "Show only haircut appointments"
  • Compare booking volume across services
  • Focus on high-value services

By Resource

View a specific resource's schedule:

  • Check individual staff member availability
  • Identify over/under-utilized resources
  • Coordinate multi-resource appointments

Combined Filters

Apply multiple filters simultaneously:

  • Location: Downtown + Service: Massage + Resource: Sarah
  • See Sarah's massage appointments at downtown location

Filters apply to both the calendar view and underlying API calls.

Creating Appointments from Calendar

Click to Create

Most calendar interfaces allow creating appointments by:

  1. Clicking an open time slot
  2. Selecting service and customer
  3. Confirming resource assignment
  4. Submitting the booking

This triggers the same API flow as POST /v3/appointment.

Drag-to-Schedule

Some calendar implementations support:

  • Dragging to select time range
  • Auto-populating start/end times
  • Quick booking flow

Check your dashboard's capabilities.

Avoiding Conflicts

The calendar interface should:

  • Validate availability before confirming
  • Show warnings for overlapping appointments
  • Respect resource schedules and out-of-office blocks
  • Check external calendar sync (if enabled)

Managing Appointments

Viewing Details

Click an appointment to see:

  • Customer information
  • Service and resources assigned
  • Notes and custom fields
  • Status (booked, confirmed, cancelled)
  • Related records (previous appointments, customer history)

Editing Appointments

Modify appointments via calendar:

  • Reschedule: Drag to new time or click edit
  • Change resources: Reassign to different staff/equipment
  • Update details: Modify notes, customer info, custom fields
  • Confirm: Mark appointment as confirmed

Changes trigger PUT /v3/appointment/:id API calls.

Canceling Appointments

Cancel from calendar:

  • Click appointment → Cancel
  • Optionally notify customer
  • Appointment marked as cancelled (status: CN)
  • Webhooks fire (if configured)

Triggers PUT /v3/appointment/:id/cancel.

Color Coding

Calendars typically use color to convey information:

By Status

  • Booked (BK): Blue
  • Confirmed (confirmed: true): Green
  • Hold (IN): Yellow
  • Cancelled (CN): Red/Gray

By Service

  • Each service gets a unique color
  • Easily identify service types at a glance
  • Useful for service-heavy schedules

By Resource

  • Each resource assigned a color
  • Track who's busy vs available
  • Coordinate multi-resource appointments

Custom Schemes

Some dashboards allow custom color configurations. Check settings to personalize.

Appointment Density

Calendar interfaces show appointment density:

  • Sparse days: Lots of white space (low bookings)
  • Dense days: Tightly packed slots (high bookings)
  • Overbooked: Overlapping appointments (potential conflicts—should be rare with proper validation)

Use density to:

  • Balance workload
  • Add more resources during busy periods
  • Promote services during slow times

Time Navigation

Moving Between Dates

Calendars provide navigation:

  • Previous/Next buttons: Move by day, week, or month
  • Date picker: Jump to specific date
  • Today button: Return to current date

Time Zone Display

Calendar times display in:

  • Company timezone (default)
  • Location timezone (if overridden)
  • User-selected timezone (if dashboard supports)

Always verify timezone when coordinating across locations.

Multi-Resource View

For coordinating multiple resources:

Side-by-Side

Display multiple resources as columns:

Time    | Sarah    | Mike     | Conference Room
--------|----------|----------|------------------
9:00 AM | Apt #1   |          |
10:00   | Apt #2   | Apt #3   | Apt #4
11:00   |          | Apt #5   |

Useful for:

  • Team scheduling
  • Resource coordination
  • Identifying bottlenecks

Overlay

Stack resources on same timeline with color coding:

  • All resources visible at once
  • Requires color differentiation
  • Compact for many resources

Integration with API

Syncing Calendar Data

The dashboard calendar pulls data from the same API endpoints you use:

  • GET /v3/appointments/filter for appointment lists
  • GET /v3/availability for open slots
  • GET /v3/resources for resource information

Any appointment created via API appears in the dashboard calendar automatically.

Building Custom Calendars

To build your own calendar interface:

  1. Fetch appointments for date range:
curl "https://v3.onsched.com/v3/appointments/filter?\
startDate=2025-12-01&\
endDate=2025-12-07&\
LocationId=LOCATION_ID" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
  1. Fetch availability for open slots:
curl "https://v3.onsched.com/v3/availability?\
startDate=2025-12-01&\
endDate=2025-12-07&\
LocationId=LOCATION_ID&\
ServiceId=SERVICE_ID" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
  1. Render with calendar library:

Popular options:

  • FullCalendar (JavaScript)
  • React Big Calendar (React)
  • Vue Cal (Vue.js)
  • Angular Calendar (Angular)
  1. Handle interactions:
  • Click events → Create appointment
  • Drag events → Reschedule
  • Hover → Show details

Use Cases

Front Desk Management

Reception staff use calendar to:

  • Book walk-in customers
  • Answer "when is my appointment?" calls
  • Reschedule cancelled appointments
  • Coordinate same-day changes

Resource Coordination

Managers use calendar to:

  • Balance workload across staff
  • Identify over/under-utilized resources
  • Plan staffing for busy periods
  • Monitor service distribution

Customer Service

Support teams use calendar to:

  • Verify appointment details
  • Troubleshoot booking issues
  • Coordinate multi-appointment requests
  • Manage customer inquiries

Capacity Planning

Business owners use calendar to:

  • Analyze booking patterns
  • Identify peak times
  • Plan marketing campaigns
  • Adjust operating hours

Best Practices

Use Filters Strategically

Don't view everything at once:

  • Filter to relevant location
  • Focus on specific time period
  • Narrow to specific resources when coordinating

Too much data becomes overwhelming.

Update in Real-Time

Keep calendar current:

  • Mark no-shows immediately
  • Confirm appointments as they arrive
  • Cancel promptly when customers call
  • Update notes during appointments

Fresh data improves decision-making.

Color Code Consistently

Establish color conventions:

  • Document what each color means
  • Train staff on color scheme
  • Use status colors (not random)

Consistency reduces confusion.

Check Conflicts Before Booking

Always verify availability:

  • Visual inspection isn't enough
  • Use availability API to validate
  • Check resource schedules
  • Verify external calendar blocks

Prevent double-booking.

Regular Calendar Review

Weekly:

  • Review upcoming week
  • Identify gaps to fill
  • Confirm high-value appointments
  • Coordinate resource coverage

Troubleshooting

Appointments not appearing

Check:

  1. Date range includes appointment time
  2. Filters aren't excluding the appointment (location, service, resource)
  3. Appointment status isn't filtered out (e.g., showing only BK, hiding CN)
  4. Data has synced (refresh calendar)

Wrong time zone

Check:

  1. Company timezone setting
  2. Location timezone override
  3. User timezone preference (if dashboard supports)
  4. Browser timezone interpretation

Can't create appointment from calendar

Check:

  1. Slot is actually available (check with availability API)
  2. Resource is linked to service
  3. Service allows booking at that time
  4. You have permission to create appointments

Calendar showing conflicts

If appointments overlap:

  1. Verify bookingsPerSlot allows multiple bookings
  2. Check if appointments are for different resources
  3. Confirm times don't actually conflict (check UTC conversion)
  4. Report bug if true conflict exists (shouldn't happen with proper validation)

Common Questions

Can customers access the calendar?

Depends on your setup:

  • OnSched dashboard is for business users
  • Build customer-facing calendar with API
  • Some implementations provide read-only customer calendar access

Does the calendar sync with Google/Outlook?

OnSched can sync resource calendars with external services. This blocks OnSched availability when external events exist, but doesn't create a unified calendar view.

See External Calendar Sync.

Can I export calendar data?

Use the appointments API to export:

curl "https://v3.onsched.com/v3/appointments/filter?\
startDate=2025-12-01&\
endDate=2025-12-31" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" > appointments.json

Process exported data in your analytics tool.

Can I print the calendar?

Most web calendars support browser print:

  • Use print preview
  • Adjust page layout
  • Print directly or save as PDF

Check your dashboard's print functionality.

How far ahead can I view?

No technical limit, but:

  • Most dashboards default to 3-6 months ahead
  • Performance degrades with very long ranges
  • Use filters to narrow scope for distant dates

Related Documentation

The calendar interface transforms appointment data into visual insights. Whether using the dashboard or building custom interfaces, calendars make scheduling intuitive and efficient.

Updated 4 days ago