Skip to main content

Type Reference

Complete type reference for Calendar Canvas library.

Core Types​

CalendarCanvasEvent​

Base interface that defines the structure of calendar events. Used to display and manage events throughout the calendar.

interface CalendarCanvasEvent {
  startDate: Date;
  endDate: Date;
  title: string;
}

CalendarCanvasEventOffset​

Defines positioning metrics for event rendering. Used internally to calculate and position events within the calendar grid.

interface CalendarCanvasEventOffset {
  top: number;
  left: number;
  width: number;
  height: number;
}

CalendarCanvasView​

Defines available view types for the calendar. Used to switch between different calendar displays.

enum CalendarCanvasView {
  DAY = "day",
  WEEK = "week",
  MONTH = "month",
}

type CalendarCanvasViewUnion = `${CalendarCanvasView}`;

Base Interfaces​

IWrapper​

Base interface for components that need to wrap child elements. Provides type safety for React children.

interface IWrapper {
  children: React.ReactNode;
}

IClassName​

Base interface for components that accept custom CSS classes. Enables styling customization.

interface IClassName {
  className?: string;
}

ICssProperties​

Base interface for components that accept inline styles. Enables direct style manipulation.

interface ICssProperties {
  style?: React.CSSProperties;
}

Icon​

Type definition for SVG icon components. Used for navigation and action icons throughout the calendar.

type Icon = React.ComponentType<React.SVGProps<SVGSVGElement>>;

BoxPositionMeta​

Defines positioning metadata for calendar elements. Used for layout calculations.

interface BoxPositionMeta {
  date: Date;
  rowStart: number;
  rowEnd: number;
}

Component Props​

info

Interfaces with generic type TCalendarCanvasEvent allow extending the base event type with custom properties while maintaining type safety.

CalendarCanvasProps​

Main props interface for the CalendarCanvas component. Controls the initial state and configuration of the calendar.

interface CalendarCanvasProps<TCalendarCanvasEvent extends object = CalendarCanvasEvent> {
  defaultDate?: Date;
  events?: TCalendarCanvasEvent[];
  defaultView?: CalendarCanvasViewUnion;
  timegutter?: number;
  children: React.ReactNode;
  className?: string;
}

CalendarHeaderProps​

Props for the calendar header component. Enables custom styling of the header section.

interface CalendarHeaderProps extends IClassName {}

TimeGutterProps​

Props for the time gutter component. Controls the appearance of time indicators in week and day views.

interface TimeGutterProps extends ICssProperties, IClassName {}

CalendarContentWrapperProps​

Props for the main content wrapper. Provides structure for calendar content.

interface CalendarContentWrapperProps extends IWrapper, IClassName {}

CalendarContentHeaderProps​

Props for the content header component. Controls the appearance of the content header section.

interface CalendarContentHeaderProps extends IClassName {}

MonthContentHeaderProps​

Props for the month view header. Specific to month view display customization.

interface MonthContentHeaderProps extends IClassName {}

WeekHeaderLabelProps​

Props for week header labels. Controls the display of week day labels.

interface WeekHeaderLabelProps extends IClassName {
  date: Date;
}

WeekContentHeaderProps​

Props for week view header content. Enables customization of week view header display.

interface WeekContentHeaderProps extends IClassName {
  templates?: {
    timeGutter?: React.FC<TimeGutterProps>;
    weekLabel?: React.FC<WeekHeaderLabelProps>;
  };
}

TimeFramesProps​

Props for time frame components. Controls the display of time slots in week and day views.

interface TimeFramesProps extends IClassName, ICssProperties {}

DayLayoutProps​

Props for day view layout. Controls the structure and appearance of day view.

interface DayLayoutProps extends ICssProperties, IClassName {}

DayTemplateProps​

Props for day view event templates. Enables custom rendering of events in day view.

interface DayTemplateProps<TCalendarCanvasEvent extends CalendarCanvasEvent = CalendarCanvasEvent> extends ICssProperties {
  event?: TCalendarCanvasEvent;
}

CalendarDayContentProps​

Props for day view content. Controls the overall day view display and behavior.

interface CalendarDayContentProps extends IClassName {
  layout?: React.FC<DayLayoutProps>;
  template?: React.FC<DayTemplateProps>;
}

WeekLayoutProps​

Props for week view layout. Controls the structure and appearance of week view.

interface WeekLayoutProps extends ICssProperties, IClassName {
  slotDate?: Date;
}

WeekTemplateProps​

Props for week view event templates. Enables custom rendering of events in week view.

interface WeekTemplateProps<TCalendarCanvasEvent extends CalendarCanvasEvent = CalendarCanvasEvent> extends ICssProperties {
  event?: TCalendarCanvasEvent;
}

CalendarWeekContentProps​

Props for week view content. Controls the overall week view display and behavior.

interface CalendarWeekContentProps extends IClassName {
  layout?: React.FC<WeekLayoutProps>;
  template?: React.FC<WeekTemplateProps>;
}

MonthLayoutProps​

Props for month view layout. Controls the structure and appearance of month view.

interface MonthLayoutProps extends ICssProperties, IWrapper, IClassName {
  slotDate?: Date;
  dateInMonth?: boolean;
}

MonthTemplateProps​

Props for month view event templates. Enables custom rendering of events in month view.

interface MonthTemplateProps<TCalendarCanvasEvent extends CalendarCanvasEvent = CalendarCanvasEvent> extends ICssProperties {
  event?: TCalendarCanvasEvent;
}

CalendarContentProps​

Main props interface for calendar content. Controls the overall content display and templating.

interface CalendarContentProps extends IClassName {
  templates?: {
    content?: {
      week?: React.FC<WeekTemplateProps>;
      day?: React.FC<DayTemplateProps>;
      month?: React.FC<MonthTemplateProps>;
    };
    layout?: {
      day?: React.FC<DayLayoutProps>;
      month?: React.FC<MonthLayoutProps>;
      week?: React.FC<WeekLayoutProps>;
    };
    timeFrames?: React.FC<TimeFramesProps>;
  };
  componentClasses?: {
    contentWrapper?: string;
    timeFrames?: string;
    dayContent?: string;
    weekContent?: string;
    monthContent?: string;
  };
}

Context Types​

CalendarCanvasContext​

Main context interface for the calendar. Provides state and dispatch functions throughout the component tree.

interface CalendarCanvasContext<TCalendarCanvasEvent extends CalendarCanvasEvent = CalendarCanvasEvent> {
  date?: Date;
  view?: CalendarCanvasViewUnion;
  events?: TCalendarCanvasEvent[];
  timegutter?: number;
  dispatch?: (action: CalendarCanvasAction) => void;
}

CalendarCanvasAction​

Defines all possible actions for calendar state management. Used with the calendar reducer.

type CalendarCanvasAction =
  | { type: "date:set"; value: Date }
  | { type: "events:init"; value: CalendarCanvasEvent[] }
  | { type: "view:set"; value: CalendarCanvasViewUnion }
  | { type: "timegutter:set"; value: number };

Hook Types​

UseCalendarReturnType​

Return type for the useCalendar hook. Provides calendar state and utilities for calendar manipulation.

interface UseCalendarReturnType<TCalendarCanvasEvent extends CalendarCanvasEvent = CalendarCanvasEvent> {
  date?: Date;
  view?: CalendarCanvasViewUnion;
  events?: TCalendarCanvasEvent[];
  timegutter?: number;
  setDate: (date: Date) => void;
  nextDate: () => void;
  prevDate: () => void;
  viewToday: () => void;
  setView: (view: CalendarCanvasViewUnion) => void;
  getWeekDates: () => Date[];
  getMonthDates: () => Date[];
  getTimeFrames: () => Date[];
  setTimeGutterWidth: (width: number) => void;
}

UseShellEvents​

Interface for shell event handling. Used for basic date-related event handling.

interface UseShellEvents {
  date: Date;
}
tip

All interfaces extending IClassName accept an optional className prop for styling customization.