Calendar & Schedule Widgets

Calendar & Schedule Widgets

Calendar widgets display events and schedules in visual calendar or timeline formats, helping you plan ahead and spot conflicts at a glance. NexusRMS provides personal schedule views, organisation-wide project calendars, and equipment availability calendars — each tailored to a different operational need.

CalendarWidget component

All calendar-type widgets share the CalendarWidget.vue component as their visual foundation. It renders a monthly calendar grid with navigation arrows to move between months. The current month and year are displayed in the header (formatted for British English locale). Each day cell shows the date number and coloured dots representing events on that day — up to three dots are shown, with additional events indicated when a day is selected.

Click any day cell to expand its event list below the grid. The events section shows the event title, time (if available), and a colour-coded left border. If more than three events fall on a single day, a “+N more events” indicator appears. Day names display as full abbreviations on desktop (Sun, Mon, Tue, etc.) and single letters on mobile (S, M, T, etc.).

My Schedule Widget

The My Schedule widget (backed by MyScheduleCalculator) shows the current user’s personal schedule, including project assignments, managed projects, and tasks. The calculator queries two data sources:

• Crew assignments — projects where the user is assigned as crew via the ProjectCrew model, shown with blue dots (#1976D2) and including the call_time if set
• Managed projects — projects where the user is the creator (created_by) or assignee (assigned_to), shown with green dots (#4CAF50), excluding cancelled and completed projects

Duplicate entries are automatically prevented — if a user is both crew and manager on the same project, it appears only once. The default look-ahead is 30 days, configurable via days_ahead. Two views are available:

• My Schedule Today — configured with date_range: “today”, shows today’s events in a timeline format
• My Schedule This Week — configured with view: “week”, shows a 7-day view with event blocks

Events are colour-coded by type — blue for crew assignments and green for managed projects. The widget summary shows total event count, number of project assignments, and details of the next upcoming event.

Project Calendar Widget

The Project Calendar widget (backed by ProjectCalendarCalculator) provides an organisation-wide view of all active projects plotted on a monthly calendar. This is a full-width widget best suited for operations dashboards. Key features include:

• Month view — configurable via view: “month”, showing all projects across the calendar grid
• Conflict detection — when show_conflicts is enabled (as in the Operations Dashboard template), overlapping projects on the same dates are highlighted, helping you identify resource bottlenecks
• Click to navigate — click on any project event to navigate directly to its detail page

In the Operations Dashboard template, the Project Calendar is placed as a full-width widget in row 2, spanning all 12 grid columns with a height of 4 grid units for maximum visibility.

Equipment Availability Calendar Widget

The Equipment Availability Calendar widget (backed by EquipmentAvailabilityCalendarCalculator) displays equipment availability over a configurable period. Events are colour-coded by availability status:

• Available — shown in green, indicating the equipment is free for booking
• Booked — shown in blue, indicating the equipment is allocated to a project
• Maintenance — shown in amber, indicating the equipment is undergoing maintenance

The widget can be filtered by equipment category to focus on specific types of gear. This is particularly useful for warehouse teams and project managers who need to check availability before confirming bookings.

Calendar in the Operations Dashboard template

The Operations Dashboard template (template ID: operations_dashboard) features the Project Calendar as its centrepiece. The layout places it in row 2 as a full-width widget with conflict detection enabled. Below the calendar, row 3 contains the Equipment Availability heat map (a different visualisation of similar data using the heat_map widget type with equipment_bookings data source). This combination gives operations managers both a timeline view and a density view of resource allocation.

Calendar in the Crew Dashboard template

The Crew Dashboard template (template ID: crew_dashboard) places two My Schedule widgets side by side in row 1:

• Left column (6 of 12 grid columns) — “My Schedule Today” with date_range: “today”
• Right column (6 of 12 grid columns) — “My Schedule This Week” with view: “week”

This layout is targeted at crew members and freelancers who need to see their immediate schedule at a glance. The two widgets together provide both a detailed daily view and a broader weekly overview without requiring any scrolling.

Calendar in the Warehouse Dashboard template

The Warehouse Dashboard template (template ID: warehouse_dashboard) takes a different approach. Instead of calendar widgets, it uses list-format widgets for upcoming deliveries (upcoming_deliveries type) and pending check-ins (list_widget with check_ins data source) in a three-column layout. Row 4 then displays the Equipment Availability heat map as a full-width visualisation. This format is optimised for the warehouse workflow, where staff need quick, scannable lists of what’s coming in and going out rather than a month-view calendar.

Mobile calendar behaviour

On small screens, the calendar grid compresses to fit the viewport. Day name headers switch to single-letter abbreviations. The event dots become slightly smaller (3px instead of 4px), and the event detail section below the grid is limited to 80px in height to prevent excessive scrolling. The month title and navigation arrows remain fully functional for touch interaction.

Tips for calendar widgets

• Use full-width calendar widgets (all 12 grid columns) for the best overview — cramped calendars are difficult to read
• Enable conflict detection on the Project Calendar to catch double-bookings before they become problems on site
• Combine the Project Calendar with the Upcoming Deliveries list widget for comprehensive planning — the calendar shows the big picture while the list highlights the next 7 days
• Crew members should use the My Schedule Today widget as their first point of reference each morning — it shows call times and project assignments for the day
• Click on any event in the calendar to jump directly to the project, saving you from navigating through the sidebar menu