Interaction Types

/**
 * Arguments passed to dateClick callback when user clicks on a date
 * Extends DatePointApi with interaction-specific properties
 */
export interface DateClickArg extends DatePointApi {
  /** The HTML element for the day that was clicked */
  dayEl: HTMLElement;
  /** The original mouse event that triggered the click */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

/**
 * Arguments passed to drop callback when external element is dropped
 * Extends DatePointApi with drag-specific properties
 */
export interface DropArg extends DatePointApi {
  /** The HTML element that was dragged and dropped */
  draggedEl: HTMLElement;
  /** The original mouse event for the drop action */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

import { Calendar } from '@fullcalendar/core';
import interactionPlugin, { DateClickArg, DropArg } from '@fullcalendar/interaction';

const calendar = new Calendar(calendarEl, {
  plugins: [interactionPlugin],
  
  dateClick: (info: DateClickArg) => {
    console.log('Clicked date:', info.dateStr);
    console.log('Is all-day:', info.allDay);
    console.log('Day element:', info.dayEl);
    console.log('View type:', info.view.type);
    
    // Create an event at the clicked date
    calendar.addEvent({
      title: 'New Event',
      start: info.date,
      allDay: info.allDay
    });
  },
  
  drop: (info: DropArg) => {
    console.log('Element dropped on:', info.dateStr);
    console.log('Dragged element:', info.draggedEl.textContent);
    
    // Remove the dragged element from its original location
    info.draggedEl.remove();
  }
});

/**
 * Arguments passed to eventDragStart callback
 * Provides context when event dragging begins
 */
export interface EventDragStartArg {
  /** The HTML element of the event being dragged */
  el: HTMLElement;
  /** The event instance being dragged */
  event: EventApi;
  /** The original mouse event that started the drag */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

/**
 * Arguments passed to eventDragStop callback
 * Provides context when event dragging ends (regardless of success)
 */
export interface EventDragStopArg {
  /** The HTML element of the event that was dragged */
  el: HTMLElement;
  /** The event instance that was dragged */
  event: EventApi;
  /** The original mouse event that ended the drag */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

const calendar = new Calendar(calendarEl, {
  plugins: [interactionPlugin],
  editable: true,
  
  eventDragStart: (info: EventDragStartArg) => {
    console.log('Started dragging:', info.event.title);
    
    // Add visual feedback
    info.el.classList.add('dragging');
    document.body.classList.add('drag-active');
  },
  
  eventDragStop: (info: EventDragStopArg) => {
    console.log('Stopped dragging:', info.event.title);
    
    // Remove visual feedback
    info.el.classList.remove('dragging');
    document.body.classList.remove('drag-active');
  },
  
  // Note: eventDrop is provided by @fullcalendar/core
  eventDrop: (info) => {
    console.log('Event dropped successfully:', info.event.title);
    console.log('Time delta:', info.delta);
  }
});

/**
 * Arguments passed to eventResizeStart and eventResizeStop callbacks
 * Provides context when event resizing begins or ends (regardless of success)
 */
export interface EventResizeStartStopArg {
  /** The HTML element of the event being resized */
  el: HTMLElement;
  /** The event instance being resized */
  event: EventApi;
  /** The original mouse event that started/ended the resize */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

/**
 * Type alias for eventResizeStart callback arguments
 */
export type EventResizeStartArg = EventResizeStartStopArg;

/**
 * Type alias for eventResizeStop callback arguments  
 */
export type EventResizeStopArg = EventResizeStartStopArg;

/**
 * Arguments passed to eventResize callback when resize completes successfully
 * Extends EventChangeArg with resize-specific delta information
 */
export interface EventResizeDoneArg extends EventChangeArg {
  /** The HTML element of the resized event */
  el: HTMLElement;
  /** Duration change for the event start time */
  startDelta: Duration;
  /** Duration change for the event end time */
  endDelta: Duration;
  /** The original mouse event that completed the resize */
  jsEvent: MouseEvent;
  /** The current calendar view instance */
  view: ViewApi;
}

const calendar = new Calendar(calendarEl, {
  plugins: [interactionPlugin],
  editable: true,
  
  eventResizeStart: (info: EventResizeStartArg) => {
    console.log('Started resizing:', info.event.title);
    console.log('Original duration:', info.event.end - info.event.start);
    
    // Visual feedback for resize mode
    info.el.style.opacity = '0.8';
  },
  
  eventResizeStop: (info: EventResizeStopArg) => {
    console.log('Stopped resizing:', info.event.title);
    
    // Remove visual feedback
    info.el.style.opacity = '';
  },
  
  eventResize: (info: EventResizeDoneArg) => {
    console.log('Event resized:', info.event.title);
    console.log('Start delta:', info.startDelta);
    console.log('End delta:', info.endDelta);
    console.log('New duration:', info.event.end - info.event.start);
    
    // Log the change
    const oldDuration = info.oldEvent.end - info.oldEvent.start;
    const newDuration = info.event.end - info.event.start;
    console.log('Duration changed by:', newDuration - oldDuration, 'ms');
  }
});

/**
 * Arguments passed to eventReceive callback
 * Triggered when an event is dragged from external source or another calendar
 */
export interface EventReceiveArg {
  /** The HTML element that was dragged */
  draggedEl: HTMLElement;
  /** The newly created event from the drag operation */
  event: EventApi;
  /** Array of related events (for recurring events) */
  relatedEvents: EventApi[];
  /** Function to revert/undo the receive operation */
  revert: () => void;
  /** The current calendar view instance */
  view: ViewApi;
}

/**
 * Arguments passed to eventLeave callback
 * Triggered when an event is dragged away from this calendar to another
 */
export interface EventLeaveArg {
  /** The HTML element that was dragged away */
  draggedEl: HTMLElement;
  /** The event that left this calendar */
  event: EventApi;
  /** Array of related events that also left */
  relatedEvents: EventApi[];
  /** Function to revert/undo the leave operation */
  revert: () => void;
  /** The current calendar view instance */
  view: ViewApi;
}

const calendar = new Calendar(calendarEl, {
  plugins: [interactionPlugin],
  
  eventReceive: (info: EventReceiveArg) => {
    console.log('Received new event:', info.event.title);
    console.log('Source element:', info.draggedEl);
    
    // Validate the received event
    if (!info.event.title) {
      alert('Events must have a title');
      info.revert(); // Reject the event
      return;
    }
    
    // Log to server or update database
    saveEventToServer(info.event.toPlainObject());
  },
  
  eventLeave: (info: EventLeaveArg) => {
    console.log('Event left calendar:', info.event.title);
    
    // Update server to reflect the move
    removeEventFromServer(info.event.id);
  }
});

/**
 * Base interface for date-related information
 * Included in DateClickArg and DropArg
 */
interface DatePointApi {
  /** JavaScript Date object for the interaction */
  date: Date;
  /** ISO string representation of the date */
  dateStr: string;
  /** Whether the interaction occurred on an all-day area */
  allDay: boolean;
}

/**
 * Base interface for event change operations
 * Extended by EventResizeDoneArg
 */
interface EventChangeArg {
  /** The event before the change */
  oldEvent: EventApi;
  /** The event after the change */
  event: EventApi;
  /** Related events affected by the change */
  relatedEvents: EventApi[];
  /** Function to revert the change */
  revert: () => void;
}

/**
 * Duration type for time deltas
 * Used in EventResizeDoneArg for start/end deltas
 */
interface Duration {
  years?: number;
  months?: number;
  days?: number;
  milliseconds?: number;
}

import { Calendar } from '@fullcalendar/core';
import interactionPlugin, {
  DateClickArg,
  EventDragStartArg,
  EventResizeDoneArg,
  DropArg
} from '@fullcalendar/interaction';

const calendar = new Calendar(calendarEl, {
  plugins: [interactionPlugin],
  
  // Type-safe event handlers
  dateClick: (info: DateClickArg) => handleDateClick(info),
  eventDragStart: (info: EventDragStartArg) => handleDragStart(info),
  eventResize: (info: EventResizeDoneArg) => handleResize(info),
  drop: (info: DropArg) => handleDrop(info)
});

function handleDateClick(info: DateClickArg) {
  // Full type safety and IntelliSense
  console.log(info.date, info.dayEl, info.view.type);
}

// Generic interaction logger
function logInteraction(
  type: string,
  info: { view: ViewApi; jsEvent: Event }
) {
  console.log(`${type} interaction in ${info.view.type} view`);
  console.log('Original event:', info.jsEvent.type);
}

// Usage with different interaction types
calendar.option('dateClick', (info) => logInteraction('Date Click', info));
calendar.option('eventDragStart', (info) => logInteraction('Drag Start', info));