Updated typings for react-big-calendar (#22718)

Added additional properties that were missing Changed CalendarEvent to type any, since this could be anything based on what the user is using for their event Added specific types for View, Navigate, Format Updated other types and functions that were incorrect with the current version of the package.
2026-04-01 12:42:58 +08:00 · 2018-01-11 18:50:36 -07:00
parent a324e89609
commit d0fdb3787e
2 changed files with 212 additions and 37 deletions
--- a/types/react-big-calendar/index.d.ts
+++ b/types/react-big-calendar/index.d.ts
@@ -1,51 +1,179 @@
-// Type definitions for react-big-calendar 0.15.0
+// Type definitions for react-big-calendar 0.17.0
 // Project: https://github.com/intljusticemission/react-big-calendar
 // Definitions by: Piotr Witek <http://piotrwitek.github.io>
+//                 Austin Turner <https://github.com/paustint>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3

 declare module 'react-big-calendar' {
    import * as React from 'react';

-    type stringOrDate = string | Date;
+    export type stringOrDate = string | Date;
+    export type View = 'month' | 'week' | 'work_week' | 'day' | 'agenda';
+    export type Navigate = 'PREV' | 'NEXT' | 'TODAY' | 'DATE';
+    export interface Format {
+      /**
+       * Format for the day of the month heading in the Month view.
+       * e.g. "01", "02", "03", etc
+       */
+      dateFormat?: string,

-    interface CalendarEvent {
-        title: string;
-        allDay: boolean;
-        start: Date;
-        end: Date;
-        desc: string;
+      /**
+       * A day of the week format for Week and Day headings,
+       * e.g. "Wed 01/04"
+       *
+       */
+      dayFormat?: string,
+
+      /**
+       * Week day name format for the Month week day headings,
+       * e.g: "Sun", "Mon", "Tue", etc
+       *
+       */
+      weekdayFormat?: string,
+
+      /**
+       * The timestamp cell formats in Week and Time views, e.g. "4:00 AM"
+       */
+      timeGutterFormat?: string,
+
+      /**
+       * Toolbar header format for the Month view, e.g "2015 April"
+       *
+       */
+      monthHeaderFormat?: string,
+
+      /**
+       * Toolbar header format for the Week views, e.g. "Mar 29 - Apr 04"
+       */
+      dayRangeHeaderFormat?: string,
+
+      /**
+       * Toolbar header format for the Day view, e.g. "Wednesday Apr 01"
+       */
+      dayHeaderFormat?: string,
+
+      /**
+       * Toolbar header format for the Agenda view, e.g. "4/1/2015 — 5/1/2015"
+       */
+      agendaHeaderFormat?: string,
+
+      /**
+       * A time range format for selecting time slots, e.g "8:00am — 2:00pm"
+       */
+      selectRangeFormat?: string,
+
+      agendaDateFormat?: string,
+      agendaTimeFormat?: string,
+      agendaTimeRangeFormat?: string,
+
+      /**
+       * Time range displayed on events.
+       */
+      eventTimeRangeFormat?: string,
+
+      /**
+       * An optional event time range for events that continue onto another day
+       */
+      eventTimeRangeStartFormat?: string,
+
+      /**
+       * An optional event time range for events that continue from another day
+       */
+      eventTimeRangeEndFormat?: string,
+    }
+
+    export interface Components {
+        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        eventWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        dayWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        toolbar?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        agenda?: {
+          date?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          time?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          event?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        },
+        day?: {
+          header?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          event?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        },
+        week?: {
+          header?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          event?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        },
+        month?: {
+          header?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          dateHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+          event?: React.SFC | React.Component | React.ComponentClass | JSX.Element,
+        },
+    }
+
+    export interface Messages {
+        allDay?: string;
+        previous?: string;
+        next?: string;
+        today?: string;
+        month?: string;
+        week?: string;
+        day?: string;
+        agenda?: string;
+        date?: string;
+        time?: string;
+        event?: string;
+        showMore?: string;
    }

    interface BigCalendarProps extends React.Props<BigCalendar> {
        date?: stringOrDate;
-        view?: string;
+        now?: Date;
+        view?: View;
        events?: Object[];
-        onNavigate?: Function;
-        onView?: Function;
-        onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[] }) => void;
-        onSelectEvent?: (event: CalendarEvent) => void;
-        onSelecting?: (slotInfo: { start: stringOrDate, end: stringOrDate }) => boolean;
-        views?: Object;
+        onNavigate?: (action: Navigate, newDate: Date) => void;
+        onView?: (view: View) => void;
+        onDrillDown?: (date: Date, view: View) => void;
+        onSelectSlot?: (slotInfo: { start: stringOrDate, end: stringOrDate, slots: Date[] | string[], action: 'select' | 'click' | 'doubleClick' }) => void;
+        onDoubleClickEvent?: (event: Object, e: React.SyntheticEvent<HTMLElement>) => void;
+        onSelectEvent?: (event: Object, e: React.SyntheticEvent<HTMLElement>) => void;
+        onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null;
+        selected?: any;
+        views?: View[] | {
+            month: boolean | React.SFC | React.Component,
+            week: boolean | React.SFC | React.Component,
+            myweek: boolean | React.SFC | React.Component,
+        };
+        drilldownView?: View | null;
+        getDrilldownView?: ((targetDate: Date, currentViewName: View, configuredViewNames: View[]) => void) | null;
+        length?: number;
        toolbar?: boolean;
        popup?: boolean;
        popupOffset?: number | { x: number, y: number };
-        selectable?: boolean;
+        selectable?: boolean | 'ignoreEvents';
+        longPressThreshold?: number;
        step?: number;
+        timeslots?: number;
        rtl?: boolean;
-        eventPropGetter?: (event: Object, start: stringOrDate, end: stringOrDate, isSelected: boolean) => void;
-        titleAccessor?: string | ((row: Object) => string);
-        allDayAccessor?: string | ((row: Object) => boolean);
-        startAccessor?: string | ((row: Object) => Date);
-        endAccessor?: string | ((row: Object) => Date);
+        eventPropGetter?: (event: Object, start: stringOrDate, end: stringOrDate, isSelected: boolean) => { className?: string, style?: React.CSSProperties };
+        slotPropGetter?: (date: Date) => { className?: string, style?: Object };
+        dayPropGetter?: (date: Date) => { className?: string, style?: Object };
+        showMultiDayTimes?: boolean;
        min?: stringOrDate;
        max?: stringOrDate;
-        scrollToTime?: stringOrDate;
-        formats?: Object;
-        components?: Object;
-        messages?: Object;
-        timeslots?: number;
-        defaultView?: string;
+        scrollToTime?: Date;
+        culture?: string;
+        formats?: Format;
+        components?: Components;
+        messages?: Messages;
+        titleAccessor?: string | ((event: any) => string);
+        allDayAccessor?: string | ((event: any) => boolean);
+        startAccessor?: string | ((event: any) => Date);
+        endAccessor?: string | ((event: any) => Date);
+        resourceAccessor?: string | ((event: any) => any);
+        resources?: any[];
+        resourceIdAccessor?: string | ((event: any) => any);
+        resourceTitleAccessor?: string | ((event: any) => string);
+        defaultView?: View;
+        defaultDate?: Date;
        className?: string;
        elementProps?: React.HTMLAttributes<HTMLElement>;
    }
--- a/types/react-big-calendar/react-big-calendar-tests.tsx
+++ b/types/react-big-calendar/react-big-calendar-tests.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as ReactDOMServer from "react-dom/server";
-import BigCalendar from "react-big-calendar";
+import BigCalendar, { Navigate, View } from "react-big-calendar";

 // Don't want to add this as a dependency, because it is only used for tests.
 declare const moment: any;
@@ -45,16 +45,16 @@ console.log('Test Results -> BasicExample', basicExampleHtml);

 // Full API Example Test - based on API Documentation
 // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api
-class FullAPIExample extends React.Component {
+class FullAPIExample extends React.Component<any, any> {
    render() {
        return (
            <BigCalendar
                {...this.props}
                date={new Date()}
-                view={'string'}
+                view={'day'}
                events={getEvents()}
-                onNavigate={() => { } }
-                onView={() => { } }
+                onNavigate={(action: Navigate, newDate: Date) => { } }
+                onView={(view: View) => { } }
                onSelectSlot={(slotInfo) => {
                    const start = slotInfo.start;
                    const end = slotInfo.end;
@@ -66,28 +66,36 @@ class FullAPIExample extends React.Component {
                    const end = slotInfo.end;
                    return true;
                } }
-                views={{}}
+                views={['day']}
                toolbar={true}
                popup={true}
                popupOffset={20}
                selectable={true}
                step={20}
                rtl={true}
-                eventPropGetter={(event, start, end, isSelected) => { } }
+                eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' }) }
                titleAccessor={'title'}
-                allDayAccessor={(row:any) => !!row.allDay}
+                allDayAccessor={(event: any) => !!event.allDay}
                startAccessor={'start'}
-                endAccessor={(row:any) => row.end || row.start}
+                endAccessor={(event: any) => event.end || event.start}
                min={new Date()}
                max={new Date()}
                scrollToTime={new Date()}
                formats={{}}
-                components={{}}
                messages={{}}
                timeslots={24}
                defaultView={'month'}
                className={'my-calendar'}
                elementProps={{id: 'myCalendar'}}
+                components={{
+                    event: Event,
+                    agenda: {
+                        event: EventAgenda
+                    }
+                }}
+                dayPropGetter={customDayPropGetter}
+                slotPropGetter={customSlotPropGetter}
+                defaultDate={new Date()}
            />
        );
    }
@@ -114,3 +122,42 @@ function getEvents(): CalendarEvent[] {
    ];
    return events;
 };
+
+  class EventAgenda extends React.Component<any, any> {
+    render() {
+      // const { label } = this.props;
+      return (
+        <div>
+          <div>Calendar Events</div>
+        </div>
+      );
+    }
+  }
+
+  const customDayPropGetter = (date: Date) => {
+    if (date.getDate() === 7 || date.getDate() === 15)
+      return {
+        className: 'special-day',
+        style: {
+          border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'),
+        },
+      }
+    else return {}
+  }
+
+  const customSlotPropGetter = (date: Date) => {
+    if (date.getDate() === 7 || date.getDate() === 15)
+      return {
+        className: 'special-day',
+      }
+    else return {}
+  }
+
+  function Event(event: any) {
+    return (
+      <span>
+        <strong>{event.title}</strong>
+        {event.desc && ':  ' + event.desc}
+      </span>
+    )
+  }