From d0fdb3787e53609edcfe57578de1ce741aeb6950 Mon Sep 17 00:00:00 2001 From: Austin Turner Date: Thu, 11 Jan 2018 18:50:36 -0700 Subject: [PATCH] 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. --- types/react-big-calendar/index.d.ts | 182 +++++++++++++++--- .../react-big-calendar-tests.tsx | 67 ++++++- 2 files changed, 212 insertions(+), 37 deletions(-) diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts index 7fc53b0ea2..15b7ec2706 100644 --- 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 +// Austin Turner // 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 { 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) => void; + onSelectEvent?: (event: Object, e: React.SyntheticEvent) => 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; } diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index ba48c42ed0..16ea44d859 100644 --- 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 { render() { return ( { } } - 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 { + render() { + // const { label } = this.props; + return ( +
+
Calendar Events
+
+ ); + } + } + + 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 ( + + {event.title} + {event.desc && ': ' + event.desc} + + ) + }