Premium support for our pure JavaScript UI components


Post by sudhanshu.jain »

Hi

How we can support multiple event with same id as below .

[
            {
              "resourceId": "a",
              "endDate": "2021-07-13 23:30",
              "statusColor": "green",
              "eventColor": "green",
              "name": "Travelling",
              "id": "arcadyTask111",
              "type": "travel",
              "icons": [
                "@iconlib.Chevron",
                "@iconlib.MenuSchedulingDispatchSolidGrey"
              ],
              "startDate": "2021-07-13 19:00",
              "status": "In progress"
            },
            {
              "resourceId": "a",
              "endDate": "2021-07-14 23:30",
              "statusColor": "green",
              "eventColor": "green",
              "name": "Travelling",
              "id": "arcadyTask111",
              "type": "travel",
              "icons": [
                "@iconlib.Chevron",
                "@iconlib.MenuSchedulingDispatchSolidGrey"
              ],
              "startDate": "2021-07-14 11:00",
              "status": "In progress",
    
]

As of now it is giving error and no event is being displayed in scheduler pro. Please find attached screen shot.

The reason behind this is , We have a long multiple day event and a technician will be working on this event for multiple days , so this same event should be divided .

Can you please let us know the solution.

Attachments
Screen Shot 2021-07-13 at 11.00.17 AM.png
Screen Shot 2021-07-13 at 11.00.17 AM.png (734.93 KiB) Viewed 1254 times

Post by mats »

No this is not supported I'm afraid, you will need to come up with some scheme where you have a "masterId" of sorts and its child tasks have unique id. Or look at our nested events demo, might also be an option.


Post by gorakh.nath »

@mats Please share the link of document of nested events.
I saw the example https://www.bryntum.com/examples/scheduler-pro/nested-events/ but I need info like :-

  1. What is nested events
  2. How we can configure
  3. What will be the data format of event, resource
    Please share sample application using @bryntum/schedulerpro-react

Post by mats »

  1. Nested events is just a proof of concept demo we have build on top of our core class system

  2. To learn about it, you can read the sources of the example which is not that big and you will see how it all works.

If you look in data.json you will see the event data structure too:

{
                "id"         : 1,
                "startDate"  : "2018-09-24T10:00:00",
                "endDate"    : "2018-09-24T17:00:00",
                "name"       : "Meeting",
                "eventColor" : "blue",
                "subEvents" : [
                    {
                        "id"        : 11,
                        "name"      : "Cool presentation",
                        "startDate" : "2018-09-24T10:00:00",
                        "endDate"   : "2018-09-24T12:00:00"
                    },
                    {
                        "id"        : 12,
                        "name"      : "Outro",
                        "startDate" : "2018-09-24T15:00:00",
                        "endDate"   : "2018-09-24T17:00:00"
                    }
                ]
            },

Post by gorakh.nath »

@mats I added the event as you suggested above but only main task is coming in the calendar, I am attaching the sample application to debug this issue.Please let me know what wrong I am doing.
Please share the url of the document of nested event.

Attachments
Screenshot 2021-07-24 at 7.13.53 PM.png
Screenshot 2021-07-24 at 7.13.53 PM.png (324.89 KiB) Viewed 1191 times
NestedEvent.zip
(2.98 MiB) Downloaded 76 times

Post by mats »

Simply adding the data won’t make this work. You need to study the sources of the example deeply to be able to leverage its concepts in another demo.

There is no specific documentation of this sample except for the code / comments


Post by gorakh.nath »

@mats How we can use subEvent in reactjs, the example in https://www.bryntum.com/examples/scheduler-pro/nested-events/ is not in react js.
Can you please provide a sample application of subevent using schedulerpro-react


Post by alex.l »

Hi gorakh.nath,

Unfortunately we don't have an example with React. But there is no big difference with our demo for vanilla version.
If you have specific questions, please don't hesitate to ask.
I've created a feature request to develop the demo using React wrapper: https://github.com/bryntum/support/issues/3331

All the best,
Alex


Post by gorakh.nath »

Hi @alex,
I modified my code to support the nestedEvent as described here https://www.bryntum.com/examples/scheduler-pro/nested-events/.
I modified the eventRenderer and eventBodyTemplate method , I am getting the subEvent in Ui but it is not showing the correct value. I think in event Renderer method we are returning left and width but left is not coming correct because of that it is showing approx one hour ahead.
Event data is :-

{
 "id": 100,
 "resourceId": 1,
 "startDate": "2025-12-01 10:00:00",
  "endDate": "2025-12-01 16:00:00",
  "name": "Meeting",
  "eventColor": "blue",
   "subEvents": [
    {
       "id": 11,
        "name": "Cool presentation",
         "startDate": "2025-12-01 10:00:00",
        "endDate": "2025-12-01 11:00:00",
        "eventColor": "green"
   },
    {
      "id": 12,
       "name": "Outro",
        "eventColor": "yellow",
        "startDate": "2025-12-01 12:00:00",
        "endDate": "2025-12-01 16:00:00"
    }
 ]
}

Here subEvents are from 10 AM to 11AM and 12PM to 4 PM but in the screenshot that I attached you can see it not correct.
eventRenderer method is:-

  const  eventRenderer = ({ eventRecord, renderData }) => {
        return (eventRecord.subEvents || []).map(subEvent => {
            const
                // When rendering during a resize operation, we have to use the get function to retrieve the current
                // (not yet finalized) start date
                startDate     = eventRecord.get('startDate'),
                // Position the nested event based on the offsets calculated when it was initialized
                // (see ParentEvent.js, subEvents convert function)
                subEventStart = scheduler.current.instance.getCoordinateFromDate(DateHelper.add(startDate, subEvent.startOffset)),
                subEventEnd   = scheduler.current.instance.getCoordinateFromDate(DateHelper.add(startDate, subEvent.endOffset));

        return subEventStart < 0 ? null : Object.assign({
            // getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
            left  : subEventStart - renderData.left,
            width : subEventEnd - subEventStart
        }, subEvent);
    });
}

I have attached the sample app of the same for reference. Please let me know what else need to add in code.I know there a feature request already raised https://github.com/bryntum/support/issues/3331 but we have urgent requirement and we cant wait till that time.

Attachments
sampleNestedEvent.zip
(2.99 MiB) Downloaded 63 times
Screenshot 2021-09-11 at 5.37.39 PM.png
Screenshot 2021-09-11 at 5.37.39 PM.png (454.98 KiB) Viewed 1010 times

Post by saki »

You also need CSS for the events to show correctly. I've copied css from the vanilla demo and appended it to App.scss and with the following data:

    "events": {
        "rows": [
            {
                "id": 100,
                "resourceId": 1,
                "startDate": "2025-12-01T10:00:00",
                "endDate": "2025-12-01T16:00:00",
                "name": "Meeting",
                "eventColor": "blue",
                "subEvents": [
                    {
                        "id": 11,
                        "name": "Cool",
                        "startDate": "2025-12-01T10:30:00",
                        "endDate": "2025-12-01T11:00:00",
                        "eventColor": "green"
                    },
                    {
                        "id": 12,
                        "name": "Outro",
                        "eventColor": "yellow",
                        "startDate": "2025-12-01T12:00:00",
                        "endDate": "2025-12-01T14:00:00"
                    }
                ]
            }
        ]
    },

I get this UI:

Screen Shot 2021-09-13 at 09.39.38.png
Screen Shot 2021-09-13 at 09.39.38.png (108.04 KiB) Viewed 982 times

Sure it needs more tuning but the events have correct sizes, starts and ends.


Post Reply