CODEWITHSUNDEEP
javascriptreactjstypescriptreact-big-calendar
Bill'o
Bill'o

Reputation: 514

React big calendar custom view w/ Typescript

I am having troubles creating a custom view with the typed big calendar, each time I use a calendar component such as Timegrid or any other in my custom Week component as in the example, I get a standard error such as react_devtools_backend.js:2560 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I use standard HTML or non big calendar components, the custom week works though.

import {NavigateAction, TimeGrid} from 'react-big-calendar'
import moment = require('moment')

interface MyWeekProps {
  date: Date
}

export class MyWeek extends React.Component<MyWeekProps> {
  static title = (date: Date) => {
    return `My awesome week: ${date.toLocaleDateString()}`
  }

  static navigate = (date: Date, action: NavigateAction) => {
    switch (action) {
      case 'PREV':
        return moment(date).add(-3, 'day').toDate()

      case 'NEXT':
        return moment(date).add(3, 'day').toDate()

      default:
        return date
    }
  }

  static range = (date: Date) => {
    let start = date
    let end = moment(start).add(2, 'day')

    let current = start
    let range = []

    while (moment(current).isSameOrBefore(moment(end), 'day')) {
      range.push(current)
      current = moment(current).add(1, 'day').toDate()
    }

    return range
  }

  render() {
    let {date} = this.props
    let range = MyWeek.range(date)

    return <TimeGrid range={range} eventOffset={15}/>
//return <div>{date}<div/> no error
  }
}

then used as

import {MyWeek} from 'reparator/rendezVous/rendezVousCustomWeek'

...

return <Calendar
    culture={culture}
    localizer={localizer}
    views={{month: true, week: MyWeek, day: true, agenda: true}}
    style={{height: props.fullScreen ? '800px' : '500px', width: '100%'}}
    messages={messages}
    startAccessor="start"
    endAccessor="end"
    min={minimum}
    max={maximum}
    timeslots={timeslots}
    step={step}
    events={props.rendezVous.map((rdv: RendezVous) => toEvent(rdv))}
    onSelectEvent={(event: EventRendezVous) => {
      if (!props.readOnly) {
        window.location.href = `#rendezVous/${event.id}/edition`
      }
    }}
    dayPropGetter={customDayPropGetter}
    slotPropGetter={customSlotPropGetter}
    eventPropGetter={customEventPropGetter}
    components={{
      event: customEvent,
      agenda: {
        event: customEventAgenda,
      },
    }}
  />

Upvotes: 2

Views: 4646

Answers (1)

Bill&#39;o
Bill&#39;o

Reputation: 514

so as Keith suggested, the typescript version has export issues and importing the untyped complete module solves the problem :

// @ts-ignore
import * as TimeGrid from 'react-big-calendar/lib/TimeGrid'

<TimeGrid {...this.props} range={range} eventOffset={15}/>

and use this

Upvotes: 2

Related Questions