Internal Components

/**
 * Abstract base class for time grid views
 * Provides common functionality for time-based calendar rendering
 */
export abstract class TimeColsView extends DateComponent<TimeColsViewProps> {
  // Abstract methods implemented by subclasses
  abstract render(): ComponentChildren;
}

interface TimeColsViewProps extends DateComponentProps {
  dateProfile: DateProfile;
  cells: DayTableCell[];
  slotDuration: Duration;
  slatMetas: TimeSlatMeta[];
  businessHourSegs: TimeColsSeg[];
  bgEventSegs: TimeColsSeg[];
  fgEventSegs: TimeColsSeg[];
  dateSelectionSegs: TimeColsSeg[];
  eventSelection: string;
  eventDrag: EventSegUiInteractionState | null;
  eventResize: EventSegUiInteractionState | null;
}

/**
 * Main view component for day/week time grid views
 * Handles rendering of time slots, events, and interactions
 */
export class DayTimeColsView extends TimeColsView {
  render(): ComponentChildren;
  renderHScrollLayout(
    headerRowContent: ComponentChildren,
    allDayContent: ComponentChildren,
    timeContent: ComponentChildren,
    colCnt: number,
    dayMinWidth: number,
    slatMetas: TimeSlatMeta[],
    forPrint: boolean
  ): ComponentChildren;
}

/**
 * Builds day table model for time grid layout
 * @param dateProfile - Date profile containing view date range
 * @param dateProfileGenerator - Generator for creating date profiles
 * @returns Day table model for time grid rendering
 */
export function buildTimeColsModel(
  dateProfile: DateProfile,
  dateProfileGenerator: DateProfileGenerator
): DayTableModel;

import { DayTimeColsView, buildTimeColsModel } from '@fullcalendar/timegrid/internal';

// Custom view extending DayTimeColsView
class CustomTimeGridView extends DayTimeColsView {
  render() {
    // Custom rendering logic
    return super.render();
  }
}

// Building time columns model
const dayTableModel = buildTimeColsModel(dateProfile, dateProfileGenerator);

/**
 * Core time columns rendering component
 * Handles the display of time slots and event positioning
 */
export class TimeCols extends DateComponent<TimeColsProps> {
  render(): ComponentChildren;
  renderAxis(rowCnt: number): ComponentChildren;
  renderTimeColsColGroup(): ComponentChildren;
}

interface TimeColsProps extends DateComponentProps {
  cells: DayTableCell[];
  dateProfile: DateProfile;
  slotDuration: Duration;
  nowDate: DateMarker;
  todayRange: DateRange;
  businessHourSegs: TimeColsSeg[];
  bgEventSegs: TimeColsSeg[];
  fgEventSegs: TimeColsSeg[];
  dateSelectionSegs: TimeColsSeg[];
  eventSelection: string;
  eventDrag: EventSegUiInteractionState | null;
  eventResize: EventSegUiInteractionState | null;
  tableColGroupNode: VNode;
  tableMinWidth: CssDimValue;
  clientWidth: number | null;
  clientHeight: number | null;
  expandRows: boolean;
  nowIndicatorSegs: TimeColsSeg[];
  onScrollTopRequest?: (scrollTop: number) => void;
  forPrint: boolean;
  axis: boolean;
  slatMetas: TimeSlatMeta[];
  onSlatCoords?: (slatCoords: TimeColsSlatsCoords) => void;
}

/**
 * Component for rendering time columns with events and interactions
 * Supports multi-day views and advanced event placement
 */
export class DayTimeCols extends DateComponent<DayTimeColsProps> {
  render(): ComponentChildren;
  renderTimeColsColGroup(): ComponentChildren;
}

interface DayTimeColsProps extends DateComponentProps {
  dateProfile: DateProfile;
  dayTableModel: DayTableModel;
  axis: boolean;
  slotDuration: Duration;
  slatMetas: TimeSlatMeta[];
  businessHours: EventStore;
  eventStore: EventStore;
  eventUiBases: EventUiHash;
  dateSelection: DateSpan | null;
  eventSelection: string;
  eventDrag: EventInteractionState | null;
  eventResize: EventInteractionState | null;
  tableColGroupNode: VNode;
  tableMinWidth: CssDimValue;
  clientWidth: number | null;
  clientHeight: number | null;
  expandRows: boolean;
  onScrollTopRequest?: (scrollTop: number) => void;
  forPrint: boolean;
  onSlatCoords?: (slatCoords: TimeColsSlatsCoords) => void;
}

/**
 * Builds day ranges for multi-day time grid views
 * @param dayTableModel - Day table model containing date information
 * @param dateProfile - Date profile for the current view
 * @param dateEnv - Date environment for date calculations
 * @returns Array of date ranges for each day
 */
export function buildDayRanges(
  dayTableModel: DayTableModel,
  dateProfile: DateProfile,
  dateEnv: DateEnv
): DateRange[];

/**
 * Slicer for converting events into time column segments
 * Handles event positioning across multiple days and time slots
 */
export class DayTimeColsSlicer extends Slicer<TimeColsSeg, [DateRange[]]> {
  /**
   * Slice a date range into time column segments
   * @param range - Date range to slice
   * @param dayRanges - Array of day ranges for positioning
   * @returns Array of time column segments
   */
  sliceRange(range: DateRange, dayRanges: DateRange[]): TimeColsSeg[];
  
  /**
   * Slice current date for now indicator positioning
   * @param date - Current date/time marker
   * @param dayRanges - Array of day ranges for positioning
   * @returns Array of time column segments for now indicator
   */
  sliceNowDate(date: DateMarker, dayRanges: DateRange[]): TimeColsSeg[];
  
  /**
   * Slice event store into background and foreground segments
   * @param eventStore - Store containing all events
   * @param eventUiBases - UI styling information for events
   * @param dayRanges - Array of day ranges for positioning
   * @returns Object with bg and fg segment arrays
   */
  sliceEventStore(
    eventStore: EventStore,
    eventUiBases: EventUiHash,
    dayRanges: DateRange[]
  ): { bg: TimeColsSeg[]; fg: TimeColsSeg[] };
  
  /**
   * Slice date selection into time column segments
   * @param dateSelection - Selected date span
   * @param dayRanges - Array of day ranges for positioning
   * @returns Array of time column segments for selection highlight
   */
  sliceDateSelection(
    dateSelection: DateSpan,
    dayRanges: DateRange[]
  ): TimeColsSeg[];
}

/**
 * Split an array of segments by column index
 * @param segs - Array of time column segments (can be null)
 * @param colCnt - Number of columns to split into
 * @returns Array of segment arrays, one per column
 */
export function splitSegsByCol(
  segs: TimeColsSeg[] | null, 
  colCnt: number
): TimeColsSeg[][];

/**
 * Split interaction state by column for proper event handling
 * @param ui - UI interaction state (can be null)
 * @param colCnt - Number of columns to split into
 * @returns Array of interaction states, one per column
 */
export function splitInteractionByCol(
  ui: EventSegUiInteractionState | null, 
  colCnt: number
): EventSegUiInteractionState[];

interface TimeColsSeg extends Seg {
  col: number;           // Column index (0-based)
  start: DateMarker;     // Segment start date/time
  end: DateMarker;       // Segment end date/time
  eventRange?: EventTuple;
  isStart: boolean;
  isEnd: boolean;
}

interface Seg {
  component: DateComponent;
  isStart: boolean;
  isEnd: boolean;
  eventRange?: EventTuple;
}

interface TimeSlatMeta {
  date: DateMarker;      // Date for this time slot
  time: Duration;        // Time duration from start of day
  key: string;           // Unique identifier for the slot
  isoTimeStr: string;    // ISO format time string
  isLabeled: boolean;    // Whether slot should show time label
}

interface DateProfile {
  currentRange: DateRange;
  activeRange: DateRange;
  renderRange: DateRange;
  slotMinTime: Duration;
  slotMaxTime: Duration;
  isValid: boolean;
  validRange: DateRange;
}

interface DayTableModel {
  rowCnt: number;
  colCnt: number;
  cells: DayTableCell[][];
  headerDates: DateMarker[];
  dayTableHeaderSeg: TableDateProfileSeg;
}

interface DayTableCell {
  key: string;
  date: DateMarker;
  htmlAttrs?: { [attr: string]: string };
}

interface Duration {
  years: number;
  months: number;
  days: number;
  milliseconds: number;
}

interface DateRange {
  start: DateMarker;
  end: DateMarker;
}

type DateMarker = Date;
type ComponentChildren = any;
type VNode = any;
type CssDimValue = string | number;