diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index cd6e95f84db5e8..888d20aeeef0a2 100644 --- a/types/react-big-calendar/index.d.ts +++ b/types/react-big-calendar/index.d.ts @@ -1,5 +1,5 @@ -// Type definitions for react-big-calendar 0.22 -// Project: https://github.com/intljusticemission/react-big-calendar +// Type definitions for react-big-calendar 0.24 +// Project: https://github.com/jquense/react-big-calendar // Definitions by: Piotr Witek // Austin Turner // Krzysztof Bezrąk @@ -15,14 +15,16 @@ // Eric Kenney // Paito Anderson // Jan Michalak +// Felix Hessenberger // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import { Validator } from 'prop-types'; import * as React from 'react'; -export type DayPropGetter = (date: Date) => { className?: string, style?: React.CSSProperties }; -export type EventPropGetter = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties }; -export type SlotPropGetter = (date: Date) => { className?: string, style?: React.CSSProperties }; +export type DayPropGetter = (date: Date, resourceId?: number | string) => React.HTMLAttributes; +export type EventPropGetter = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => React.HTMLAttributes; +export type SlotPropGetter = (date: Date, resourceId?: number | string) => React.HTMLAttributes; +export type SlotGroupPropGetter = () => React.HTMLAttributes; export type stringOrDate = string | Date; export type ViewKey = 'MONTH' | 'WEEK' | 'WORK_WEEK' | 'DAY' | 'AGENDA'; export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda'; @@ -33,6 +35,7 @@ export type ViewsProps = View[] | { month?: boolean | React.ComponentType & ViewStatic, week?: boolean | React.ComponentType & ViewStatic }; +export type DayLayoutAlgorithm = 'overlap' | 'no-overlap'; export type NavigateAction = 'PREV' | 'NEXT' | 'TODAY' | 'DATE'; export interface Event { allDay?: boolean; @@ -46,8 +49,8 @@ export interface DateRange { end: Date; } -export type DateFormatFunction = (date: Date, culture?: string, localizer?: object) => string; -export type DateRangeFormatFunction = (range: DateRange, culture?: string, localizer?: object) => string; +export type DateFormatFunction = (date: Date, culture?: Culture, localizer?: DateLocalizer) => string; +export type DateRangeFormatFunction = (range: DateRange, culture?: Culture, localizer?: DateLocalizer) => string; export type DateFormat = string | DateFormatFunction; export interface Formats { @@ -228,7 +231,7 @@ export interface Messages { noEventsInRange?: string; } -export type Culture = string | string[]; +export type Culture = string; export type FormatInput = number | string | Date; export interface DateLocalizerSpec { @@ -284,6 +287,7 @@ export interface CalendarProps; slotPropGetter?: SlotPropGetter; + slotGroupPropGetter?: SlotGroupPropGetter; dayPropGetter?: DayPropGetter; showMultiDayTimes?: boolean; min?: stringOrDate; @@ -293,6 +297,7 @@ export interface CalendarProps; messages?: Messages; + dayLayoutAlgorithm?: DayLayoutAlgorithm; titleAccessor?: keyof TEvent | ((event: TEvent) => string); tooltipAccessor?: keyof TEvent | ((event: TEvent) => string); allDayAccessor?: keyof TEvent | ((event: TEvent) => boolean); diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index 883b55f0ee5987..8d6f9ca7271466 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -16,7 +16,8 @@ import { ToolbarProps, EventProps, EventWrapperProps, - NavigateAction + NavigateAction, + Culture } from "react-big-calendar"; import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop"; @@ -197,6 +198,7 @@ class CalendarResource { const end = slotInfo.end; return true; }} + dayLayoutAlgorithm="overlap" views={['day']} toolbar={true} popup={true} @@ -218,8 +220,8 @@ class CalendarResource { scrollToTime={new Date()} formats={{ dateFormat: 'h a', - agendaDateFormat: (date: Date, culture?: string, localizer?: object) => 'some-format', - dayRangeHeaderFormat: (range: DateRange, culture?: string, localizer?: object) => 'some-format', + agendaDateFormat: (date: Date, culture?: Culture, localizer?: DateLocalizer) => 'some-format', + dayRangeHeaderFormat: (range: DateRange, culture?: Culture, localizer?: DateLocalizer) => 'some-format', }} messages={{ date: 'Date', @@ -253,6 +255,7 @@ class CalendarResource { }} dayPropGetter={customDayPropGetter} slotPropGetter={customSlotPropGetter} + slotGroupPropGetter={customGroupSlotPropGetter} defaultDate={new Date()} resources={getResources()} resourceAccessor={event => event.resourceId} @@ -325,6 +328,12 @@ const customSlotPropGetter = (date: Date) => { else return {}; }; +const customGroupSlotPropGetter = () => { + return { + className: 'slot-group' + }; +}; + function Event(props: EventProps) { return (