@forcecalendar/interface 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -397,11 +397,45 @@ export class ForceCalendar extends BaseComponent {
             }
 
             .fc-month-day:focus-visible,
+            .fc-hour-slot:focus-visible,
             .fc-event:focus-visible {
                 outline: 2px solid var(--fc-primary-color);
                 outline-offset: -2px;
             }
 
+            .fc-event { touch-action: none; }
+
+            .fc-dragging {
+                opacity: 0.6;
+                z-index: 30;
+                pointer-events: none;
+            }
+
+            .fc-drop-target {
+                outline: 2px dashed var(--fc-primary-color);
+                outline-offset: -2px;
+            }
+
+            .fc-resize-handle {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 6px;
+                cursor: ns-resize;
+            }
+
+            .fc-drag-selection {
+                position: absolute;
+                left: 2px;
+                right: 2px;
+                background: color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
+                border: 1px solid var(--fc-primary-color);
+                border-radius: 4px;
+                pointer-events: none;
+                z-index: 20;
+            }
+
             .fc-nav-arrow:focus-visible,
             .fc-btn:focus-visible,
             .fc-btn-today:focus-visible,
@@ -833,6 +867,14 @@ export class ForceCalendar extends BaseComponent {
       }
     });
 
+    // Drag-to-create emits a range: surface it and open the form prefilled
+    this.addListener(this.shadowRoot, 'range-select', e => {
+      this.emit('calendar-range-select', e.detail);
+      if (modal) {
+        modal.open(e.detail.start);
+      }
+    });
+
     // Handle event saving
     if (modal) {
       this.addListener(modal, 'save', e => {

package/src/core/DragController.js

@@ -0,0 +1,362 @@
+/**
+ * DragController - pointer-driven interactions for calendar views.
+ *
+ * Implements drag-to-move (month and time grids), drag-to-resize, and
+ * drag-to-create using Pointer Events only: no HTML5 drag-and-drop (which
+ * misbehaves in shadow roots), no dependencies, Locker Service safe.
+ *
+ * Keyboard users have equivalent paths via the WAI-ARIA grid navigation
+ * (arrow keys + Enter) that every view already implements.
+ */
+
+const DRAG_THRESHOLD_PX = 4;
+const SNAP_MINUTES = 15;
+const PX_PER_MINUTE = 1; // time grids render 60px per hour
+
+/** Snap a minute offset to the grid. Exported for tests. */
+export function snapMinutes(minutes, snap = SNAP_MINUTES) {
+  return Math.round(minutes / snap) * snap;
+}
+
+/** Clamp a start minute so [start, start+duration] stays inside a day. */
+export function clampStartMinutes(startMinutes, durationMinutes) {
+  return Math.max(0, Math.min(startMinutes, 24 * 60 - durationMinutes));
+}
+
+/**
+ * Combine a target day with an original start's time-of-day.
+ * Exported for tests.
+ */
+export function moveDatePreservingTime(targetDay, originalStart) {
+  const next = new Date(targetDay);
+  next.setHours(
+    originalStart.getHours(),
+    originalStart.getMinutes(),
+    originalStart.getSeconds(),
+    originalStart.getMilliseconds()
+  );
+  return next;
+}
+
+export class DragController {
+  constructor(renderer) {
+    this.renderer = renderer;
+    this.container = renderer.container;
+    this.stateManager = renderer.stateManager;
+    this._active = null;
+    this._docListeners = [];
+  }
+
+  /** Month view: drag an event chip onto another day cell. */
+  enableMonthMove() {
+    this.renderer.addListener(this.container, 'pointerdown', e => {
+      if (e.button !== 0) return;
+      const eventEl = e.target.closest('.fc-event');
+      if (!eventEl || !this.container.contains(eventEl)) return;
+      const originCell = eventEl.closest('.fc-month-day');
+      if (!originCell) return;
+
+      this._arm(e, {
+        mode: 'month-move',
+        eventEl,
+        eventId: eventEl.dataset.eventId,
+        onDragMove: ev => this._monthDragMove(ev),
+        onDrop: ev => this._monthDrop(ev)
+      });
+    });
+  }
+
+  /**
+   * Time grids (week/day): drag events vertically/across columns to move,
+   * drag the bottom handle to resize, drag empty grid to create.
+   */
+  enableTimeGrid(columnSelector) {
+    this._columnSelector = columnSelector;
+    this._injectResizeHandles();
+
+    this.renderer.addListener(this.container, 'pointerdown', e => {
+      if (e.button !== 0) return;
+
+      const handle = e.target.closest('.fc-resize-handle');
+      if (handle) {
+        const eventEl = handle.closest('.fc-timed-event');
+        if (!eventEl) return;
+        e.preventDefault();
+        this._arm(e, {
+          mode: 'resize',
+          eventEl,
+          eventId: eventEl.dataset.eventId,
+          originTop: parseFloat(eventEl.style.top) || 0,
+          originHeight: parseFloat(eventEl.style.height) || 30,
+          onDragMove: ev => this._resizeDragMove(ev),
+          onDrop: () => this._resizeDrop()
+        });
+        return;
+      }
+
+      const eventEl = e.target.closest('.fc-timed-event');
+      if (eventEl && this.container.contains(eventEl)) {
+        this._arm(e, {
+          mode: 'time-move',
+          eventEl,
+          eventId: eventEl.dataset.eventId,
+          originTop: parseFloat(eventEl.style.top) || 0,
+          originColumn: eventEl.closest(columnSelector),
+          onDragMove: ev => this._timeMoveDragMove(ev),
+          onDrop: () => this._timeMoveDrop()
+        });
+        return;
+      }
+
+      const column = e.target.closest(columnSelector);
+      if (column && !e.target.closest('.fc-event')) {
+        this._arm(e, {
+          mode: 'create',
+          column,
+          onDragMove: ev => this._createDragMove(ev),
+          onDrop: () => this._createDrop()
+        });
+      }
+    });
+  }
+
+  /** Track from pointerdown; promote to a drag past the threshold. */
+  _arm(e, spec) {
+    this._active = {
+      ...spec,
+      startX: e.clientX,
+      startY: e.clientY,
+      dragging: false
+    };
+    const move = ev => this._onPointerMove(ev);
+    const up = ev => this._onPointerUp(ev);
+    const cancel = () => this._cancel();
+    const key = ev => {
+      if (ev.key === 'Escape') this._cancel();
+    };
+    const doc = this.container.ownerDocument;
+    doc.addEventListener('pointermove', move);
+    doc.addEventListener('pointerup', up);
+    doc.addEventListener('pointercancel', cancel);
+    doc.addEventListener('keydown', key);
+    this._docListeners = [
+      ['pointermove', move],
+      ['pointerup', up],
+      ['pointercancel', cancel],
+      ['keydown', key]
+    ];
+  }
+
+  _onPointerMove(e) {
+    const a = this._active;
+    if (!a) return;
+    if (!a.dragging) {
+      if (
+        Math.abs(e.clientX - a.startX) < DRAG_THRESHOLD_PX &&
+        Math.abs(e.clientY - a.startY) < DRAG_THRESHOLD_PX
+      ) {
+        return;
+      }
+      a.dragging = true;
+      if (a.eventEl) {
+        a.eventEl.classList.add('fc-dragging');
+      }
+    }
+    e.preventDefault();
+    a.onDragMove(e);
+  }
+
+  _onPointerUp(e) {
+    const a = this._active;
+    this._teardownDocListeners();
+    if (!a) return;
+    if (a.dragging) {
+      // Swallow the click that follows a drag so it doesn't select/open
+      const doc = this.container.ownerDocument;
+      const swallow = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+      };
+      doc.addEventListener('click', swallow, { capture: true, once: true });
+      setTimeout(() => doc.removeEventListener('click', swallow, { capture: true }), 0);
+      a.onDrop(e);
+    }
+    this._cleanupVisuals(a);
+    this._active = null;
+  }
+
+  _cancel() {
+    const a = this._active;
+    this._teardownDocListeners();
+    this._active = null;
+    if (a) this._cleanupVisuals(a);
+  }
+
+  _teardownDocListeners() {
+    const doc = this.container.ownerDocument;
+    for (const [name, fn] of this._docListeners) {
+      doc.removeEventListener(name, fn);
+    }
+    this._docListeners = [];
+  }
+
+  _cleanupVisuals(a) {
+    if (a.eventEl) {
+      a.eventEl.classList.remove('fc-dragging');
+      a.eventEl.style.transform = '';
+    }
+    this.container
+      .querySelectorAll('.fc-drop-target')
+      .forEach(el => el.classList.remove('fc-drop-target'));
+    this._selectionEl?.remove();
+    this._selectionEl = null;
+  }
+
+  // ----- month move -----
+
+  _cellAtPoint(x, y) {
+    for (const cell of this.container.querySelectorAll('.fc-month-day')) {
+      const r = cell.getBoundingClientRect();
+      if (x >= r.left && x < r.right && y >= r.top && y < r.bottom) return cell;
+    }
+    return null;
+  }
+
+  _monthDragMove(e) {
+    const a = this._active;
+    a.eventEl.style.transform = `translate(${e.clientX - a.startX}px, ${e.clientY - a.startY}px)`;
+    const cell = this._cellAtPoint(e.clientX, e.clientY);
+    if (cell !== a.dropCell) {
+      a.dropCell?.classList.remove('fc-drop-target');
+      cell?.classList.add('fc-drop-target');
+      a.dropCell = cell;
+    }
+  }
+
+  _monthDrop() {
+    const a = this._active ?? {};
+    const cell = a.dropCell;
+    if (!cell) return;
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event) return;
+    const oldStart = new Date(event.start);
+    const newStart = moveDatePreservingTime(new Date(cell.dataset.date), oldStart);
+    const delta = newStart.getTime() - oldStart.getTime();
+    if (delta === 0) return;
+    this.stateManager.updateEvent(a.eventId, {
+      start: newStart,
+      end: new Date(new Date(event.end).getTime() + delta)
+    });
+  }
+
+  // ----- time-grid move -----
+
+  _columnAtPoint(x) {
+    for (const col of this.container.querySelectorAll(this._columnSelector)) {
+      const r = col.getBoundingClientRect();
+      if (x >= r.left && x < r.right) return col;
+    }
+    return null;
+  }
+
+  _timeMoveDragMove(e) {
+    const a = this._active;
+    const col = this._columnAtPoint(e.clientX) || a.originColumn;
+    a.dropColumn = col;
+    a.deltaMinutes = snapMinutes((e.clientY - a.startY) / PX_PER_MINUTE);
+    const originRect = a.originColumn.getBoundingClientRect();
+    const colRect = col.getBoundingClientRect();
+    a.eventEl.style.transform = `translate(${colRect.left - originRect.left}px, ${a.deltaMinutes * PX_PER_MINUTE}px)`;
+  }
+
+  _timeMoveDrop() {
+    const a = this._active ?? {};
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event || (!a.deltaMinutes && a.dropColumn === a.originColumn)) return;
+
+    const oldStart = new Date(event.start);
+    const duration = new Date(event.end).getTime() - oldStart.getTime();
+    const targetDay = a.dropColumn ? new Date(a.dropColumn.dataset.date) : oldStart;
+    const dayAligned = moveDatePreservingTime(targetDay, oldStart);
+    const startMinutes = clampStartMinutes(
+      dayAligned.getHours() * 60 + dayAligned.getMinutes() + (a.deltaMinutes || 0),
+      Math.round(duration / 60000)
+    );
+    const newStart = new Date(dayAligned);
+    newStart.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
+    if (newStart.getTime() === oldStart.getTime()) return;
+    this.stateManager.updateEvent(a.eventId, {
+      start: newStart,
+      end: new Date(newStart.getTime() + duration)
+    });
+  }
+
+  // ----- resize -----
+
+  _resizeDragMove(e) {
+    const a = this._active;
+    const deltaMinutes = snapMinutes((e.clientY - a.startY) / PX_PER_MINUTE);
+    a.newHeight = Math.max(SNAP_MINUTES, a.originHeight + deltaMinutes);
+    a.newHeight = Math.min(a.newHeight, 24 * 60 - a.originTop);
+    a.eventEl.style.height = `${a.newHeight}px`;
+  }
+
+  _resizeDrop() {
+    const a = this._active ?? {};
+    if (!a.newHeight || a.newHeight === a.originHeight) return;
+    const event = this.stateManager.getEvents().find(ev => ev.id === a.eventId);
+    if (!event) return;
+    const newEnd = new Date(new Date(event.start).getTime() + a.newHeight * 60000);
+    this.stateManager.updateEvent(a.eventId, { end: newEnd });
+  }
+
+  // ----- drag-to-create -----
+
+  _createDragMove(e) {
+    const a = this._active;
+    const colRect = a.column.getBoundingClientRect();
+    const fromY = a.startY - colRect.top;
+    const toY = e.clientY - colRect.top;
+    a.fromMinutes = snapMinutes(Math.min(fromY, toY) / PX_PER_MINUTE);
+    a.toMinutes = snapMinutes(Math.max(fromY, toY) / PX_PER_MINUTE);
+    a.fromMinutes = Math.max(0, a.fromMinutes);
+    a.toMinutes = Math.min(24 * 60, Math.max(a.toMinutes, a.fromMinutes + SNAP_MINUTES));
+
+    if (!this._selectionEl) {
+      this._selectionEl = this.container.ownerDocument.createElement('div');
+      this._selectionEl.className = 'fc-drag-selection';
+      a.column.appendChild(this._selectionEl);
+    }
+    this._selectionEl.style.top = `${a.fromMinutes * PX_PER_MINUTE}px`;
+    this._selectionEl.style.height = `${(a.toMinutes - a.fromMinutes) * PX_PER_MINUTE}px`;
+  }
+
+  _createDrop() {
+    const a = this._active ?? {};
+    if (a.fromMinutes == null) return;
+    const start = new Date(a.column.dataset.date);
+    start.setHours(Math.floor(a.fromMinutes / 60), a.fromMinutes % 60, 0, 0);
+    const end = new Date(a.column.dataset.date);
+    end.setHours(Math.floor(a.toMinutes / 60), a.toMinutes % 60, 0, 0);
+    this.container.dispatchEvent(
+      new CustomEvent('range-select', {
+        detail: { start, end },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  /** Append a resize handle to every timed event (idempotent per render). */
+  _injectResizeHandles() {
+    for (const el of this.container.querySelectorAll('.fc-timed-event')) {
+      if (el.querySelector('.fc-resize-handle')) continue;
+      const handle = this.container.ownerDocument.createElement('div');
+      handle.className = 'fc-resize-handle';
+      handle.setAttribute('aria-hidden', 'true');
+      el.appendChild(handle);
+    }
+  }
+}
+
+export default DragController;

package/src/renderers/BaseViewRenderer.js

@@ -329,6 +329,146 @@ export class BaseViewRenderer {
     }
   }
 
+  /**
+   * WAI-ARIA semantics and keyboard navigation for time grids (week/day
+   * views). The DOM is column-major (a column per day, an hour line per
+   * slot), so each day column is exposed as a row of 24 hour gridcells.
+   * Arrow keys navigate visually: Up/Down moves hours, Left/Right moves
+   * days, Home/End jumps to the day's bounds, PageUp/PageDown navigates
+   * periods, Enter/Space selects the slot's date and time.
+   * @param {string} columnSelector - Selector for the day columns
+   * @param {string} gridLabel - Accessible label for the grid
+   */
+  _enhanceTimeGridAccessibility(columnSelector, gridLabel) {
+    const grid = this.container.querySelector('.fc-time-grid');
+    if (!grid) return;
+    grid.setAttribute('role', 'grid');
+    grid.setAttribute('aria-label', gridLabel);
+    const gutter = this.container.querySelector('.fc-time-gutter');
+    if (gutter) gutter.setAttribute('aria-hidden', 'true');
+
+    const locale = this.stateManager.getState().config.locale || 'en-US';
+    const dayFormatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric'
+    });
+
+    const columns = Array.from(this.container.querySelectorAll(columnSelector));
+    for (const col of columns) {
+      col.setAttribute('role', 'row');
+      const colDate = new Date(col.dataset.date);
+      const colLabel = dayFormatter.format(colDate);
+      col.setAttribute('aria-label', colLabel);
+      for (const slot of col.querySelectorAll('.fc-hour-slot')) {
+        slot.setAttribute('role', 'gridcell');
+        slot.setAttribute('tabindex', '-1');
+        slot.setAttribute(
+          'aria-label',
+          `${colLabel}, ${this.formatHour(Number(slot.dataset.hour))}`
+        );
+      }
+    }
+
+    this._applySlotRovingTabindex(columns);
+
+    if (this._pendingSlotFocus) {
+      const { colIndex, hour } = this._pendingSlotFocus;
+      this._pendingSlotFocus = null;
+      const target = this._slotAt(columns, colIndex, hour);
+      if (target) {
+        this._applySlotRovingTabindex(columns, target);
+        target.focus();
+      }
+    }
+
+    this.addListener(this.container, 'keydown', e => {
+      const slot = e.target.closest('.fc-hour-slot');
+      if (!slot || !this.container.contains(slot)) return;
+      const col = slot.closest(columnSelector);
+      const colIndex = columns.indexOf(col);
+      const hour = Number(slot.dataset.hour);
+      let target = null;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          target = this._slotAt(columns, colIndex, hour + 1);
+          break;
+        case 'ArrowUp':
+          target = this._slotAt(columns, colIndex, hour - 1);
+          break;
+        case 'ArrowRight':
+          target = this._slotAt(columns, colIndex + 1, hour);
+          break;
+        case 'ArrowLeft':
+          target = this._slotAt(columns, colIndex - 1, hour);
+          break;
+        case 'Home':
+          target = this._slotAt(columns, colIndex, 0);
+          break;
+        case 'End':
+          target = this._slotAt(columns, colIndex, 23);
+          break;
+        case 'PageUp':
+        case 'PageDown':
+          e.preventDefault();
+          this._pendingSlotFocus = { colIndex, hour };
+          if (e.key === 'PageDown') {
+            this.stateManager.next();
+          } else {
+            this.stateManager.previous();
+          }
+          return;
+        case 'Enter':
+        case ' ': {
+          e.preventDefault();
+          const date = new Date(col.dataset.date);
+          date.setHours(hour, 0, 0, 0);
+          this._pendingSlotFocus = { colIndex, hour };
+          this.stateManager.selectDate(date);
+          return;
+        }
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      if (target) {
+        this._applySlotRovingTabindex(columns, target);
+        target.scrollIntoView?.({ block: 'nearest' });
+        target.focus();
+      }
+    });
+  }
+
+  /**
+   * Get the hour slot at a column/hour position
+   * @private
+   */
+  _slotAt(columns, colIndex, hour) {
+    if (colIndex < 0 || colIndex >= columns.length || hour < 0 || hour > 23) return null;
+    return columns[colIndex].querySelector(`.fc-hour-slot[data-hour="${hour}"]`);
+  }
+
+  /**
+   * Keep exactly one hour slot tabbable. Defaults to 9:00 AM in the
+   * first column (today's column when present).
+   * @private
+   */
+  _applySlotRovingTabindex(columns, active = null) {
+    const slots = this.container.querySelectorAll('.fc-hour-slot');
+    if (slots.length === 0) return;
+    if (!active) {
+      const todayCol =
+        columns.find(c => this.isToday(new Date(c.dataset.date))) || columns[0];
+      active = todayCol && todayCol.querySelector('.fc-hour-slot[data-hour="9"]');
+      active = active || slots[0];
+    }
+    for (const s of slots) {
+      s.setAttribute('tabindex', s === active ? '0' : '-1');
+    }
+  }
+
   /**
    * Make rendered events keyboard-reachable and screen-reader labeled.
    * Runs after every render, across all views.

package/src/renderers/DayViewRenderer.js

@@ -5,6 +5,7 @@
  */
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
+import { DragController } from '../core/DragController.js';
 import { DateUtils } from '../utils/DateUtils.js';
 
 export class DayViewRenderer extends BaseViewRenderer {
@@ -165,7 +166,7 @@ export class DayViewRenderer extends BaseViewRenderer {
     return `
             <div class="fc-day-column" data-date="${dayDate.toISOString()}" style="position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${hours.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join('')}
+                ${hours.map(h => `<div class="fc-hour-slot" data-hour="${h}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join('')}
 
                 <!-- Now indicator for today -->
                 ${isToday ? this.renderNowIndicator() : ''}
@@ -211,6 +212,14 @@ export class DayViewRenderer extends BaseViewRenderer {
 
     // Common event handlers (event clicks)
     this.attachCommonEventHandlers();
+
+    const locale = this.stateManager.getState().config.locale || 'en-US';
+    const current = this.stateManager.getState().currentDate || new Date();
+    const label = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }).format(current);
+    this._enhanceTimeGridAccessibility('.fc-day-column', label);
+
+    // Drag to move/resize events and drag empty grid to create
+    new DragController(this).enableTimeGrid('.fc-day-column');
   }
 
   _scrollToCurrentTime() {

package/src/renderers/MonthViewRenderer.js

@@ -6,6 +6,7 @@
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DragController } from '../core/DragController.js';
 
 export class MonthViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -228,6 +229,9 @@ export class MonthViewRenderer extends BaseViewRenderer {
 
     // Common event handlers (event clicks)
     this.attachCommonEventHandlers();
+
+    // Drag an event chip onto another day to move it
+    new DragController(this).enableMonthMove();
   }
 
   /**

package/src/renderers/WeekViewRenderer.js

@@ -6,6 +6,7 @@
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DragController } from '../core/DragController.js';
 
 export class WeekViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -144,7 +145,7 @@ export class WeekViewRenderer extends BaseViewRenderer {
     return `
             <div class="fc-week-day-column" data-date="${day.date.toISOString()}" style="border-right: 1px solid var(--fc-border-color); position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${hours.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join('')}
+                ${hours.map(h => `<div class="fc-hour-slot" data-hour="${h}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join('')}
 
                 <!-- Now indicator for today -->
                 ${day.isToday ? this.renderNowIndicator() : ''}
@@ -190,6 +191,15 @@ export class WeekViewRenderer extends BaseViewRenderer {
 
     // Common event handlers (event clicks)
     this.attachCommonEventHandlers();
+
+    const days = this.stateManager.getViewData()?.days || [];
+    const locale = this.stateManager.getState().config.locale || 'en-US';
+    const first = days[0] ? new Date(days[0].date) : new Date();
+    const label = `Week of ${new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric', year: 'numeric' }).format(first)}`;
+    this._enhanceTimeGridAccessibility('.fc-week-day-column', label);
+
+    // Drag to move/resize events and drag empty grid to create
+    new DragController(this).enableTimeGrid('.fc-week-day-column');
   }
 
   _scrollToCurrentTime() {