react-schedule-view
Version:
A zero-dependency, fully customizable component for displaying schedules in a daily or week format
54 lines (53 loc) • 2.1 kB
TypeScript
import { CSSProperties, FC } from "react";
export declare const SUBDIVISIONS_PER_HOUR = 12;
export interface DaySchedule<CustomCalendarEvent extends CalendarEvent = CalendarEvent> {
name: string;
events: CustomCalendarEvent[];
}
export interface CalendarEvent {
startTime: number;
endTime: number;
title: string;
description?: string;
color?: CSSProperties["backgroundColor"];
}
export interface PositionedEvent<CustomCalendarEvent extends CalendarEvent> {
event: CustomCalendarEvent;
col: number;
endCol: number;
row: number;
endRow: number;
}
export interface PositionedEventGroup<CustomCalendarEvent extends CalendarEvent> {
totalCols: number;
groupStartRow: number;
groupEndRow: number;
positionedEvents: PositionedEvent<CustomCalendarEvent>[];
}
export declare type ScheduleThemeOverride = DeepPartial<ScheduleTheme>;
export declare type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
export interface ScheduleTheme<CustomCalendarEvent extends CalendarEvent = CalendarEvent> {
style?: ScheduleThemeStyle;
hourHeight: CSSProperties["height"];
minorGridlinesPerHour: number;
timeRangeFormatter: (startTime: number, endTime: number) => string;
timeFormatter: (time: number) => string;
defaultTileColor: CSSProperties["backgroundColor"] | ((event: CustomCalendarEvent) => CSSProperties["backgroundColor"]);
customTileComponent?: FC<{
event: CustomCalendarEvent;
}>;
themeTileContent?: FC<{
event: CustomCalendarEvent;
}>;
}
export interface ScheduleThemeStyle<CustomCalendarEvent extends CalendarEvent = CalendarEvent> {
root?: CSSProperties;
dayLabels?: CSSProperties;
timeScaleLabels?: CSSProperties;
eventTiles?: CSSProperties | ((event: CustomCalendarEvent, theme: ScheduleTheme<CustomCalendarEvent>) => CSSProperties);
majorGridlinesBorder?: CSSProperties["borderStyle"];
minorGridlinesBorder?: CSSProperties["borderStyle"];
verticalGridlinesBorder?: CSSProperties["borderStyle"];
}