Choose the right view for your task. The Calendar Views system gives you three different time perspectives and two layout options, so you can optimize your screen for whatever you're trying to accomplish - from handling walk-in customers to planning major events.
The Three Time Views
1 Day View - Maximum Detail
When to use: Busy front desk operations, walk-in management, precise scheduling
What you get: The highest time resolution with clear slot visibility, a real-time current time indicator (red line), detailed availability indicators for each asset, and an optimal environment for interactive booking creation. All asset classes remain visible simultaneously, and the component uses a 45-pixel header height for maximum screen space efficiency.
3 Days View - Coordination Mode
When to use: Event planning, weekend coordination, short-term resource allocation
What you get: A balanced detail and overview perspective with multi-day availability patterns at a glance. This view automatically switches to single asset class selection mode and uses an 81-pixel header height to accommodate the multi-date display. It's perfect for coordinating events that span multiple days and efficient for identifying booking trends and gaps.
Week View - Strategic Planning
When to use: Capacity analysis, maintenance planning, revenue optimization
What you get: Full week visibility with condensed time slots and booking pattern recognition across weekly cycles. Like the 3 Days view, this mode restricts to single asset class viewing and uses the larger header size for date navigation. It provides strategic resource allocation planning capabilities and is optimal for identifying peak and low-demand periods.
Layout Modes
Vertical Layout - Traditional Calendar
How it works: Time flows top to bottom, assets spread horizontally across the top
Best for detailed time slot management, mobile devices and touch interfaces, and asset comparison across time periods.
Visual benefits include clear time progression from top to bottom, booking blocks that appear as horizontal bars, and easy visual scanning of time availability.
Horizontal Layout
How it works: Time flows left to right, assets listed vertically down the left side
Best for wide screen displays and landscape monitors, asset-focused management workflow, and comparing availability across multiple assets.
Visual benefits include asset names clearly visible on the left, booking blocks that appear as vertical bars, and easy comparison between different assets. The component rebuilds its entire grid structure when switching to horizontal layout, optimizing performance for this viewing mode.
Visual Indicators and Status Colors
Availability Color Coding
The component uses a sophisticated color-coding system to communicate availability at a glance:
Green (#04844b) indicates full availability for the time slot with all assets available for booking, representing optimal booking opportunities.
Orange (#ff9a3c) shows partial availability where some assets are booked while others remain available. This reduced capacity suggests considering alternative time slots for large groups.
Red (#c23934) signals no availability in the time slot, meaning all assets are either booked or blocked. Consider alternative dates or times when encountering red indicators.
Booking Type Indicators
Different booking types use distinct colors and styling for immediate recognition:
Regular Bookings (#18628B) display with standard booking styling, showing customer information, product type and duration indicators, plus participant count and special requirements.
Event Bookings (#3A94C8) feature distinct visual styling for event products with group size and event type information, plus extended time block representation for multi-hour events.
Provisional Bookings (#CC7D14) represent tentative bookings awaiting confirmation with visual distinction from confirmed bookings and timeout indicators for automatic release.
Blocked Time (#63BCED) shows maintenance and facility blocks with the reason for blocking, duration, and impact indicators clearly displayed.
Customization Options
Default View Configuration
Saved Preferences include your default view type (1 Day, 3 Days, or Week), preferred layout mode (Vertical or Horizontal), and default asset class selections.
Site-Specific Settings allow different default views for different sites, location-specific asset groupings, and time zone and business hours configuration per site.
- Access Settings: Click the settings icon in the calendar header
- Configure Preferences: Set your preferred view type, layout, and display options
- Select Assets: Choose default asset classes for display
- Enable defaults: Check the 'Make Default View for Site' checkbox
- Save Configuration: Apply settings to make them default for future sessions
- Test Settings: Verify the calendar displays according to your preferences
Advanced View Features
Interactive Selection Tools
The calendar component provides sophisticated interaction capabilities that vary by view type:
Selection Tools include pointer mode for precise cell selection, paint mode for continuous selection across multiple slots, erase mode for removing selections, and rectangle selection for area-based selection. These tools are fully functional in 1 Day view and have optimized behavior in multi-day views.
Performance Optimizations
The component implements multiple caching systems to ensure smooth performance across all view types:
Smart Caching includes DateTime conversion caching for Luxon operations, column offset caching for expensive position calculations, availability status caching for rapid slot lookups, and time subdivision caching for grid generation.
Adaptive Rendering dynamically adjusts grid complexity based on the selected view, with 1 Day view supporting full asset visibility while 3 Days and Week views optimize by limiting to single asset class display.
Troubleshooting View Issues
Common Display Problems
Poor Performance can typically be resolved by reducing the number of displayed asset classes, using shorter time spans (1-day instead of week view), or closing other browser tabs to free up memory. The component's built-in caching systems help, but limiting data scope provides the most immediate improvement.
Layout Issues may require switching between vertical and horizontal layouts, adjusting browser zoom level for optimal display, or checking for browser compatibility with modern web standards. The component rebuilds its grid structure when switching layouts, which can resolve display inconsistencies.
Text or Elements Cut Off usually indicate zoom or resolution issues. Try adjusting browser zoom level, switching to different screen resolution if using an external monitor, or checking for browser accessibility settings that might affect display rendering.
Quick Reference
View Comparison
| View Type | Time Span | Asset Display | Header Height | Best For |
|---|---|---|---|---|
| 1 Day | Single day | All asset classes | 45px | Front desk operations, detailed scheduling |
| 3 Days | 3 consecutive days | Single asset class | 81px | Event planning, weekend coordination |
| Week | 7 consecutive days | Single asset class | 81px | Strategic planning, capacity analysis |
Layout Comparison
| Layout | Time Direction | Asset Position | Booking Display | Optimized For |
|---|---|---|---|---|
| Vertical | Top to bottom | Horizontal header | Horizontal bars | Mobile devices, traditional calendar view |
| Horizontal | Left to right | Vertical sidebar | Vertical bars | Wide screens, asset comparison |
Color Reference
| Color | Hex Code | Meaning | Usage |
|---|---|---|---|
| Green | #04844b | Full availability | All assets free |
| Orange | #ff9a3c | Partial availability | Some assets booked |
| Red | #c23934 | No availability | All assets booked/blocked |
| Blue | #18628B | Regular booking | Standard reservations |
| Light Blue | #3A94C8 | Event booking | Parties, tournaments |
| Cyan | #63BCED | Blocked time | Maintenance, closures |
| Orange | #CC7D14 | Provisional booking | Pending confirmation |