mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 19:07:08 +00:00
[@types/react-big-calendar] Add dayLayoutAlgorithm property added in https://github.com/jquense/react-big-calendar/pull/1473 , add slotGroupPropGetter added in https://github.com/jquense/react-big-calendar/pull/1510 , constrain Culture type to string instead of string | string[] (#42388)
This commit is contained in:
parent
4fccaa038e
commit
8d64d8cd4e
21
types/react-big-calendar/index.d.ts
vendored
21
types/react-big-calendar/index.d.ts
vendored
@ -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 <https://github.com/piotrwitek>
|
||||
// Austin Turner <https://github.com/paustint>
|
||||
// Krzysztof Bezrąk <https://github.com/pikpok>
|
||||
@ -15,14 +15,16 @@
|
||||
// Eric Kenney <https://github.com/KenneyE>
|
||||
// Paito Anderson <https://github.com/PaitoAnderson>
|
||||
// Jan Michalak <https://github.com/michalak111>
|
||||
// Felix Hessenberger <https://github.com/fhessenberger>
|
||||
// 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<T> = (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<HTMLDivElement>;
|
||||
export type EventPropGetter<T> = (event: T, start: stringOrDate, end: stringOrDate, isSelected: boolean) => React.HTMLAttributes<HTMLDivElement>;
|
||||
export type SlotPropGetter = (date: Date, resourceId?: number | string) => React.HTMLAttributes<HTMLDivElement>;
|
||||
export type SlotGroupPropGetter = () => React.HTMLAttributes<HTMLDivElement>;
|
||||
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<any> & ViewStatic,
|
||||
week?: boolean | React.ComponentType<any> & 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<TEvent extends object = Event, TResource extends
|
||||
rtl?: boolean;
|
||||
eventPropGetter?: EventPropGetter<TEvent>;
|
||||
slotPropGetter?: SlotPropGetter;
|
||||
slotGroupPropGetter?: SlotGroupPropGetter;
|
||||
dayPropGetter?: DayPropGetter;
|
||||
showMultiDayTimes?: boolean;
|
||||
min?: stringOrDate;
|
||||
@ -293,6 +297,7 @@ export interface CalendarProps<TEvent extends object = Event, TResource extends
|
||||
formats?: Formats;
|
||||
components?: Components<TEvent>;
|
||||
messages?: Messages;
|
||||
dayLayoutAlgorithm?: DayLayoutAlgorithm;
|
||||
titleAccessor?: keyof TEvent | ((event: TEvent) => string);
|
||||
tooltipAccessor?: keyof TEvent | ((event: TEvent) => string);
|
||||
allDayAccessor?: keyof TEvent | ((event: TEvent) => boolean);
|
||||
|
||||
@ -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<CalendarEvent>) {
|
||||
return (
|
||||
<span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user