Vue Cal

You can define specific time ranges that are highlighted or restricted using specialHours or businessHours. These can be applied globally to weekdays or overridden for specific schedules.

Special Hours Configuration:

• from / to: Minutes from the start of the day.
• class: CSS class for the range.
• label: Text label for the range.
• allowEvents: If false, events may not overlap this range (prevents creation, drag-and-drop, or resize).

Structure: specialHours is a Partial<Record<VueCalWeekdays, VueCalSpecialHoursConfig | VueCalSpecialHoursDay>>.

• Global Weekday Rule: specialHours: { mon: [{ from: 0, to: 480, allowEvents: false }] }
• Schedule-Specific Rule: Use VueCalSpecialHoursDay to provide schedules overrides for specific VueCalScheduleIds.

const config: VueCalConfig = {
  specialHours: {
    mon: {
      default: [
        { from: 0, to: 480, class: 'closed-period', allowEvents: false }
      ],
      schedules: {
        'room-1': [{ from: 600, to: 1000, label: 'Open' }]
      }
    }
  }
};

The state object returned by useVueCal contains the following reactive properties that govern the calendar's behavior:

• uid: Unique ID for the instance.
• emit: The component's emit function.
• texts: Localized text definitions.
• dateUtils: Date utility functions localized to the instance.
• now: The current Date object.
• config: The merged configuration object (from props and attributes).
• eventsManager: The manager handling calendar events.
• view: Details about the current view (e.g., visible events and view dimensions).
• dnd: The drag-and-drop module state.
• touch: Gesture-related states, including:
  • isDraggingCell: Boolean indicating if a cell is being dragged.
  • isDraggingEvent: Boolean indicating if an event is being dragged.
  • isResizingEvent: Boolean indicating if an event is being resized.
  • currentHoveredCell: The cell currently being hovered during an event resize operation.

VueCal uses scoped slots to allow deep customization of its internal parts. Most slots receive a params object containing relevant data for that specific part of the calendar.

Header & Navigation Slots

• #header: Replaces the entire header component. Receives params.
• #previous-button: Customizes the previous button. Receives params.
• #next-button: Customizes the next button. Receives params.
• #today-button: Customizes the today button. Receives params.
• #title: Customizes the main title. Receives params.
• #title.day, #title.days, #title.week, #title.month, #title.year, #title.years: Specific title templates for different views. Receives params.
• #schedule-heading: Customizes the schedule heading. Receives params.

Body & Content Slots

• #cell: Replaces the entire cell rendering. Receives params.
• #cell-date: Customizes the date display within a cell. Receives params.
• #cell-content: Customizes the content area of a cell. Receives params.
• #cell-events: Customizes how events are rendered within a cell. Receives params.
• #event: Customizes the rendering of an event. Receives params.
• #event.all-day: Customizes the rendering of all-day events. Receives params.
• #event-count: Customizes the display of the event count. Receives params.
• #now-line: Customizes the current time indicator line. Receives params.
• #time-cell: Customizes the time labels in the time column. Receives params.
• #current-time-label: Customizes the current time label. Receives params.
• #weekday-heading: Customizes the weekday headings. Receives params.

DIY Mode

• #diy: If provided, VueCal will skip its default internal rendering and instead render the content of this slot. The slot receives the internal vuecal instance as a prop, allowing you to build a completely custom UI while leveraging the library's logic.

Vue Cal provides hooks to validate or reject event resizing via the eventListeners configuration. This is useful for enforcing business rules (e.g., preventing meetings from being moved to certain times or overlapping specific schedules).

Available Listeners:

• resize-start: Fired when the user starts dragging a resizer.
• resize: Fired during the resize movement. If this returns false, the resize is rejected and the event reverts to its last accepted state.
• resize-end: Fired when the user releases the resizer. If this returns false, the event reverts to its original state before the resize attempt.

Implementation Pattern:

// In your Vue Cal configuration
const config = {
  eventListeners: {
    event: {
      resize: async ({ e, event, overlaps }) => {
        // Return true to accept, false to reject
        return !overlaps.some(ev => ev.schedule === event.schedule);
      },
      'resize-end': async ({ e, event, original, overlaps }) => {
        // Final validation
        return true;
      }
    }
  }
}

You can control which views are available in the calendar using the views prop.

• Default views: If no views prop is provided, the calendar uses all standard views: day, days, week, month, year, and years.
• Date Picker mode: If the datePicker prop is active, the default available views are restricted to month, year, and years.
• Customizing views: You can pass an array of view names or an object to define custom dimensions (columns and rows) for specific views.

Available standard views and their default dimensions:

• day: 1 col, 1 row
• days: 10 cols, 1 row
• week: 7 cols, 1 row
• month: 7 cols, 6 rows
• year: 4 cols, 3 rows
• years: 5 cols, 5 rows (covers a 25-year range)

// Example: Providing a custom set of views with specific dimensions
const views = {
  day: { cols: 1, rows: 1 },
  week: { cols: 7, rows: 1 },
  month: { cols: 7, rows: 8 } // Customizing month to have 8 rows
};