一起使用React Apollo和React Big Calendar

时间:2019-04-27 08:27:25

标签: reactjs react-apollo react-big-calendar

我想使用react大日历来从react Apollo客户端获取数据

我已经通过JS提取数据来实现了React大日历 而且效果很好,但是知道情况已经改变,我必须对日历事件中的数据应用订阅

   <BigCalendar
    events={events}
    localizer={localizer}
    defaultView={BigCalendar.Views.DAY}
    views={['day']}
    step={7.5}
    min={new Date(2018, 29, 0, 7, 0, 0)}
    max={new Date(2018, 29, 0, 17, 0, 0)}
    // timeslots={30}
   scrollToTime={new Date(2018, 29, 0, 9, 0, 0)}
    defaultDate={new Date(2018, 0, 29)}
    resources={resourceMap}
    resourceIdAccessor="resourceId"
    resourceTitleAccessor="resourceTitle"
    eventPropGetter={(eventStyleGetter)}
    components={{
        eventWrapper: EventWrapper,
        toolbar: CustomToolbar
      }}/>

我传递的数据就像

const events = [
    {
      id: 0,
      title: 'Board meeting',
      start: new Date("01/29/2018 09:00:00"),
      end: new Date(2018, 0, 29, 13, 0, 0),
      resourceId: 1,
      type: 'global'
    },
    {
        id: 10,
        title: 'Difficult time',
        start: new Date("01/29/2018 14:13:00"),
        end: new Date("01/29/2018 15:27:00"),
        resourceId: 1,
        type: 'global'
      },    {
        id: 1,
        title: 'Board meeting 2',
        start: new Date(2018, 0, 29, 9, 0, 0),
        end: new Date(2018, 0, 29, 13, 0, 0),
        resourceId: 1,
        type: 'underground'
      },
    {
      id: 3,
      title: 'Team lead meeting',
      start: new Date(2018, 0, 28, 8, 30, 0),
      end: new Date(2018, 0, 28, 9, 30, 0),
      resourceId: 3,
      type: 'regional'
    },
    {
        id: 355,
        title: 'Difficult time 2',
        start: new Date(2018, 0, 29, 15, 37, 0),
        end: new Date(2018, 0, 29, 16, 49, 0),
        resourceId: 2,
        type: 'regional'
      },    {
      id:4,
      title: 'Birthday Party',
      start: new Date(2018, 0, 30, 7, 0, 0),
      end: new Date(2018, 0, 30, 10, 30, 0),
      resourceId: 3,
      type: 'underground'
    },
  ]

  const resourceMap = [
    { resourceId: 1, resourceTitle: 'My Schedule ' },
    { resourceId: 2, resourceTitle: 'Ben 10' },
    { resourceId: 3, resourceTitle: 'MAX' },
  ]


I want to use Apollo React With React Big Calendar and apply subscription on data

0 个答案:

没有答案