Switch timeline to a new time frame about react-calendar-timeline HOT 8 CLOSED

Creating new items array works. Thanks.

from react-calendar-timeline.

I guess you can specify visibleTimeStart and visibleTimeEnd properties. And on date-picker change you can just overwrite visibleTime* values.
But in case you using visibleTime* properties, you would also need to specify onTimeChange method for them

from react-calendar-timeline.

Hi

I also want to use a date-picker. But when updating visibleTimeStart and visibleTimeEnd, I get the following error: "Unable to get property 'dimensions' of undefined or null reference" if the new date contains any items. Is this because the sortedDimensionItems is not updated if the items list and the groups list are unchanged?

Espen

from react-calendar-timeline.

Hi, @ekvalheim
Possible reason of this error could be mutating of timeline items array. It should be immutable value. If you're changing the items array directly, try to create new array which contains old and new items (possibly with .concat method)

from react-calendar-timeline.

Looks like this is fixed? Thank you @xmityaz for responding! :)

from react-calendar-timeline.

@ekvalheim would you be able to post some example code of how you implemented this?

from react-calendar-timeline.

@T-Hughes
jsx:

<Timeline
   groups={groups}
   items={items}
   calendarDate={calendarDate}
   visibleTimeStart = {moment(calendarDate)
     .startOf('day')
     .hour(8).valueOf()}
   visibleTimeEnd={moment(calendarDate)
     .startOf('day')
     .hour(20).valueOf()}
/>

<DateTimePicker
  value={calendarDate}
  onChange={dateChange}
/>

In the dateChange function, the calendarDate property is updated, and the items array is populated with new data received from web api.

items: action.meetings.map((object) => ({
   id: object.Id,
   group: object.GroupId,
   start_time: moment(object.Start),
   end_time: moment(object.End),
   canMove: false,
   canResize: false,
   className: object.FreeBusyStatus === 0 ? 'free' : 'standard',
   title: object.Subject,
}))

from react-calendar-timeline.

Thanks @ekvalheim !

from react-calendar-timeline.