[@types/react-big-calendar] Add dayLayoutAlgorithm property added in j…

…quense/react-big-calendar#1473 , add slotGroupPropGetter added in jquense/react-big-calendar#1510 , constrain Culture type to string instead of string | string[]
felixh10r · Feb 15, 2020 · 98adda2 · 98adda2
1 parent f2db20e
commit 98adda2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git 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
+// 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);

diff --git 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<CalendarEvent>) {
     return (
         <span>