Merge pull request #30401 from onlyann/master

[react-big-calendar] add a new generic for resource type
2026-08-12 04:50:18 +00:00 · 2018-12-04 18:48:55 -08:00
parent a37ad92b9c d2dd41340a
commit e1a9b84984
2 changed files with 97 additions and 72 deletions
@@ -216,19 +216,19 @@ export class DateLocalizer {
    format(value: FormatInput, format: string, culture: Culture): string;
 }

-export interface BigCalendarProps<T extends Event = Event> extends React.Props<BigCalendar<T>> {
+export interface BigCalendarProps<TEvent extends Event = Event, TResource extends object = object> extends React.Props<BigCalendar<TEvent, TResource>> {
    localizer: DateLocalizer;

    date?: stringOrDate;
    now?: Date;
    view?: View;
-    events?: T[];
-    onNavigate?: (newDate: Date, action: Navigate) => void;
+    events?: TEvent[];
+    onNavigate?: (newDate: Date, view: View, action: Navigate) => 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: T, e: React.SyntheticEvent<HTMLElement>) => void;
-    onSelectEvent?: (event: T, e: React.SyntheticEvent<HTMLElement>) => void;
+    onDoubleClickEvent?: (event: TEvent, e: React.SyntheticEvent<HTMLElement>) => void;
+    onSelectEvent?: (event: TEvent, e: React.SyntheticEvent<HTMLElement>) => void;
    onSelecting?: (range: { start: stringOrDate, end: stringOrDate }) => boolean | undefined | null;
    selected?: any;
    views?: Views;
@@ -243,7 +243,7 @@ export interface BigCalendarProps<T extends Event = Event> extends React.Props<B
    step?: number;
    timeslots?: number;
    rtl?: boolean;
-    eventPropGetter?: EventPropGetter<T>;
+    eventPropGetter?: EventPropGetter<TEvent>;
    slotPropGetter?: SlotPropGetter;
    dayPropGetter?: DayPropGetter;
    showMultiDayTimes?: boolean;
@@ -254,14 +254,14 @@ export interface BigCalendarProps<T extends Event = Event> extends React.Props<B
    formats?: Formats;
    components?: Components;
    messages?: Messages;
-    titleAccessor?: keyof T | ((event: T) => string);
-    allDayAccessor?: keyof T | ((event: T) => boolean);
-    startAccessor?: keyof T | ((event: T) => Date);
-    endAccessor?: keyof T | ((event: T) => Date);
-    resourceAccessor?: keyof T | ((event: T) => any);
-    resources?: any[];
-    resourceIdAccessor?: keyof T | ((event: T) => any);
-    resourceTitleAccessor?: keyof T | ((event: T) => string);
+    titleAccessor?: keyof TEvent | ((event: TEvent) => string);
+    allDayAccessor?: keyof TEvent | ((event: TEvent) => boolean);
+    startAccessor?: keyof TEvent | ((event: TEvent) => Date);
+    endAccessor?: keyof TEvent | ((event: TEvent) => Date);
+    resourceAccessor?: keyof TEvent | ((event: TEvent) => any);
+    resources?: TResource[];
+    resourceIdAccessor?: keyof TResource | ((resource: TResource) => any);
+    resourceTitleAccessor?: keyof TResource | ((resource: TResource) => string);
    defaultView?: View;
    defaultDate?: Date;
    className?: string;
@@ -278,7 +278,7 @@ export interface MoveOptions {
    today: Date;
 }

-export default class BigCalendar<T extends Event = Event> extends React.Component<BigCalendarProps<T>> {
+export default class BigCalendar<TEvent extends Event = Event, TResource extends object = object> extends React.Component<BigCalendarProps<TEvent, TResource>> {
    components: {
        dateCellWrapper: React.ComponentType,
        dayWrapper: React.ComponentType,
@@ -17,13 +17,25 @@ class CalendarEvent {
    start: Date;
    end: Date;
    desc: string;
+    resourceId?: string;

-    constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string) {
+    constructor(_title: string, _start: Date, _end: Date, _allDay?: boolean, _desc?: string, _resourceId?: string) {
        this.title = _title;
        this.allDay = _allDay || false;
        this.start = _start;
        this.end = _end;
        this.desc = _desc || '';
+        this.resourceId = _resourceId;
+    }
+}
+
+class CalendarResource {
+    title: string;
+    id: string;
+
+    constructor(id: string, title: string) {
+        this.id = id;
+        this.title = title;
    }
 }

@@ -49,66 +61,70 @@ class CalendarEvent {
 }

 {
+    class MyCalendar extends BigCalendar<CalendarEvent, CalendarResource> {}
+
    // Full API Example Test - based on API Documentation
    // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api
-    class FullAPIExample extends React.Component<BigCalendarProps<CalendarEvent>> {
+    class FullAPIExample extends React.Component<BigCalendarProps<CalendarEvent, CalendarResource>> {
        render() {
            return (
-                <BigCalendar
-                    {...this.props}
-                    date={new Date()}
-                    view={'day'}
-                    events={getEvents()}
-                    onNavigate={(newDate: Date, action: Navigate) => { }}
-                    onView={(view: View) => { }}
-                    onSelectSlot={(slotInfo) => {
-                        const start = slotInfo.start;
-                        const end = slotInfo.end;
-                        const slots = slotInfo.slots;
-                    }}
-                    onSelectEvent={(event) => { }}
-                    onSelecting={(slotInfo) => {
-                        const start = slotInfo.start;
-                        const end = slotInfo.end;
-                        return true;
-                    }}
-                    views={['day']}
-                    toolbar={true}
-                    popup={true}
-                    popupOffset={20}
-                    selectable={true}
-                    step={20}
-                    rtl={true}
-                    eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })}
-                    titleAccessor={'title'}
-                    allDayAccessor={(event: any) => !!event.allDay}
-                    startAccessor={'start'}
-                    endAccessor={(event: any) => event.end || event.start}
-                    min={new Date()}
-                    max={new Date()}
-                    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"
-                    }}
-                    messages={{}}
-                    timeslots={24}
-                    defaultView={'month'}
-                    className={'my-calendar'}
-                    elementProps={{ id: 'myCalendar' }}
-                    components={{
-                        event: Event,
-                        agenda: {
-                            event: EventAgenda
-                        },
-                        toolbar: Toolbar,
-                        eventWrapper: EventWrapper,
-                    }}
-                    dayPropGetter={customDayPropGetter}
-                    slotPropGetter={customSlotPropGetter}
-                    defaultDate={new Date()}
-                />
+              <MyCalendar  {...this.props}
+              date={new Date()}
+              view={'day'}
+              events={getEvents()}
+              onNavigate={(newDate: Date, view: View, action: Navigate) => { }}
+              onView={(view: View) => { }}
+              onSelectSlot={(slotInfo) => {
+                  const start = slotInfo.start;
+                  const end = slotInfo.end;
+                  const slots = slotInfo.slots;
+              }}
+              onSelectEvent={(event) => { }}
+              onSelecting={(slotInfo) => {
+                  const start = slotInfo.start;
+                  const end = slotInfo.end;
+                  return true;
+              }}
+              views={['day']}
+              toolbar={true}
+              popup={true}
+              popupOffset={20}
+              selectable={true}
+              step={20}
+              rtl={true}
+              eventPropGetter={(event, start, end, isSelected) => ({ className: 'some-class' })}
+              titleAccessor={'title'}
+              allDayAccessor={(event: CalendarEvent) => !!event.allDay}
+              startAccessor={'start'}
+              endAccessor={(event: CalendarEvent) => event.end || event.start}
+              min={new Date()}
+              max={new Date()}
+              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"
+              }}
+              messages={{}}
+              timeslots={24}
+              defaultView={'month'}
+              className={'my-calendar'}
+              elementProps={{ id: 'myCalendar' }}
+              components={{
+                  event: Event,
+                  agenda: {
+                      event: EventAgenda
+                  },
+                  toolbar: Toolbar,
+                  eventWrapper: EventWrapper,
+              }}
+              dayPropGetter={customDayPropGetter}
+              slotPropGetter={customSlotPropGetter}
+              defaultDate={new Date()}
+              resources={getResources()}
+              resourceAccessor={event => event.resourceId}
+              resourceIdAccessor={resource => resource.id}
+              resourceTitleAccessor={resource => resource.title} />
            );
        }
    }
@@ -132,10 +148,19 @@ function getEvents(): CalendarEvent[] {
        new CalendarEvent('Happy Hour', new Date(2015, 3, 12, 17, 0, 0, 0), new Date(2015, 3, 12, 17, 30, 0, 0), undefined, 'Most important meal of the day'),
        new CalendarEvent('Dinner', new Date(2015, 3, 12, 20, 0, 0, 0), new Date(2015, 3, 12, 21, 0, 0, 0)),
        new CalendarEvent('Birthday Party', new Date(2015, 3, 13, 7, 0, 0), new Date(2015, 3, 13, 10, 30, 0)),
+        new CalendarEvent('Alice\'s break', new Date(2015, 3, 14, 20, 0, 0, 0), new Date(2015, 3, 14, 21, 0, 0, 0), undefined, undefined, "alice"),
+        new CalendarEvent('Bob\'s break', new Date(2015, 3, 15, 7, 0, 0), new Date(2015, 3, 15, 10, 30, 0), undefined, undefined, "bob"),
    ];
    return events;
 }

+function getResources(): CalendarResource[] {
+    return [
+        new CalendarResource('alice', 'Alice'),
+        new CalendarResource('bob', 'Bob')
+    ];
+}
+
 class EventAgenda extends React.Component<any, any> {
    render() {
        // const { label } = this.props;