Our powerful JS Calendar component


Post by jeff.wang »

Hi,
I'am trying to accomplish this example(https://bryntum.com/examples/calendar/dragfromgrid/ ) using the react framework, i used BryntumProjectModel in code like below:

<div className={'calendar-view-container'} id="calendarContainer">
      <BryntumProjectModel ref={project} events={events} resources={resources} />
      <BryntumCalendar ref={calendar} project={project} {...calendarConfig} />
      <BryntumGrid ref={grid} {...gridConfig} />
</div>

calenderConfig.tx:

export const calendarConfig = {
  ...
  appendTo: 'calendarContainer',
  features: {
    externalEventSource: {
      grid: 'unGroup',
    },
  },
};

gridConfig.ts:

export const gridConfig = {
  id: 'unGroup',
  appendTo: 'calendarContainer',
  ...
};

how can pass the calendar's project to grid config?
could i use BryntumProjectModel when integration with grid in calendar using the react framework, how to do it if yes, since it has some different with the example like below:

const calendar = new Calendar({})
const unscheduledGrid = new Grid({})

Thank you


Post by alex.l »

Hi jeff.wang,

Grid component doesn't support ProjectModel. All you need is pass events (or whatever you want to see in the grid) into grid's store.

<div className={'calendar-view-container'} id="calendarContainer">
      <BryntumProjectModel ref={project} events={events} resources={resources} />
      <BryntumCalendar ref={calendar} project={project} {...calendarConfig} />
      <BryntumGrid ref={grid} {...gridConfig} data={events} />
</div>

All the best,
Alex


Post by jeff.wang »

Hi alex,
ok, the data are correctly show in grid like you said, but the drag is invalid, i think i don't set up the relationship in both components correctly.

i installed the grid module by npm separately, whether the calendar module include the grid ? how can i import it if yes.

thank you.


Post by alex.l »

Ok, I thought you want to share data via 2 components, but in case you just want to have a link to calendar's project in your grid to have an access to the data, you don't need to share same events, but use own store with some data.
project will be available on calendar instance, so you can get instance by ref and get project on it (calendarRef.current.instance.project)
as well as create ref for the project itself and get instance in the same manner.

i installed the grid module by npm separately, whether the calendar module include the grid ? how can i import it if yes

yes, it's included but licensed separately. You can get it in a regular way

import {
    BryntumCalendar,
    BryntumGrid
} from '@bryntum/calendar-react';

All the best,
Alex


Post by jeff.wang »

Hi Alex,

ok, i don't want to share the same data between in both components, i want to achieve dragging the item to calendar from the grid like the example(https://bryntum.com/examples/calendar/dragfromgrid/)
I did it like you said, but it show the BryntumGrid is unavailable in calendar-react:
Image

i am not sure whether the grid in calendar-react is the same with it import from @bryntum/grid-react

the BryntumGrid have not the 'project' props like below:
Image

i don't find how can i pass the project of calendar to the Grid.

thank you.


Post by alex.l »

I did it like you said, but it show the BryntumGrid is unavailable in calendar-react:

That's my mistake. It is not released yet and will be available in 5.0.5 version which we plan to release in next few days.
Right now it's not possible to do, unfortunately.

i don't find how can i pass the project of calendar to the Grid.

Yes, Grid doesn't have project property. You can use references, as I described above.

All the best,
Alex


Post by jeff.wang »

ok, do i need the latest version 5.0.5 if i want do like the example (https://bryntum.com/examples/calendar/dragfromgrid/).

in addition, how can i pass the references (calendarRef.current.instance.project) to Grid's config, and what‘s the code looks like if you are convenient.


Post by alex.l »

Yes you need to wait for 5.0.5.

in addition, how can i pass the references (calendarRef.current.instance.project) to Grid's config, and what‘s the code looks like if you are convenient.

Please have a look at React docs: https://reactjs.org/docs/forwarding-refs.html

All the best,
Alex


Post by jeff.wang »

ok, Hope to release 5.0.5 version soon.

thank you very much!


Post Reply