Our pure JavaScript Scheduler component


Post by juris »

Hello together,

We would like to implement the booking of seats in different rooms with the Scheduler Pro.

Currently our data.json looks like this:

{
    "success"   : true,
    "resources" : {
        "rows" : [
            {
                "id"       : 1,
                "name"     : "Room A",
                "seats"  : [
                    {
                        "id"    : 11,
                        "name"  : "Seat 1",
                        "color" : "red"
                    },
                    {
                        "id"    : 12,
                        "name"  : "Seat 2",
                        "color" : "blue"
                    }
                ]
            },
            {
                "id"       : 2,
                "name"     : "Room B",
                "seats"  : [
                    {
                        "id"    : 21,
                        "name"  : "Seat 1",
                        "color" : "red"
                    },
                    {
                        "id"    : 22,
                        "name"  : "Seat 2",
                        "color" : "blue"
                    }
                ]
            }
        ]
    },
    "events"    : {
        "rows" : []
    }
}
 	

However, this would also allow booking the entire room, which should not be possible for our case. Therefore we would like to know how we could implement this or if this would be possible at all.

Thank you in advance and kind regards!

FYI:
We have oriented ourselves to the following demo: https://bryntum.com/examples/examples-scheduler/tasks/


Post by marcio »

Hi Juris,

You can use the beforeEventAdd listener to prevent the creation of events in the Room rows.

listeners : {
        beforeEventAdd : ({ resourceRecords }) => {
            return !resourceRecords[0].isParent;
        }
    }

https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/view/Scheduler#event-beforeEventAdd

Best regards,
Márcio


Post by juris »

Hi Márcio,

thank you very much for your quick reply.

Using the beforeEventAdd listener works perfectly, thank you very much!

I would have one more question: We also have a button to add new events to the scheduler. However, the room can still be selected in the dialog. Is there a way to remove the room from the selectable resources so that it cannot be selected?

Thank you in advance and kind regards!


Post by marcio »

Hey Juris,

If I understand correctly, you can do something like this:

Please let me know if that's what you wanted, if not, could you please explain with more details (maybe adding some screenshots)??

Best regards,
Márcio


Post by juris »

Hi Márcio,

thank you very much for your quick reply and your code snipped.

Sadly it doesn't work for us so I will try to explained it with more details.

In our scheduler we want to book seats for each Room either via drag or with a extra button.

Clicking the button will open the edit event modal. On the modal the Rooms are listed as an resource an can be selected.

Is it possible to remove the Rooms from that list or create the list manually so only the seats can be booked?

I added some screenshot:

Screenshot_1.png
Screenshot_1.png (57.4 KiB) Viewed 309 times
Screenshot_2.png
Screenshot_2.png (12.31 KiB) Viewed 309 times

I hope these details explain the problem more precisely.

Thank you in advance and kind regards!

FYI:
I just recognized that adding a event per drag on a seat I also can change the resources from seat to room.


Post by tasnim »

You can create the list manually.
Please check docs : https://bryntum.com/docs/scheduler/api/Scheduler/feature/EventEdit#built-in-widgets

Here is an example of how you can achieve it:

    features : {
        eventEdit : {
            items : {
                resourceField : {
                    items : [
                        { id : 'r1', name : 'Mike' },
                        { id : 'r2', name : 'Linda' },
                        { id : 'r3', name : 'Don' },
                        { id : 'r4', name : 'Karen' },
                        { id : 'r5', name : 'Doug' }
                    ]
                }
            }
        }
    },

And make sure you have the id of resources, so they will be assigned to the resource.

Best of luck,
Tasnim


Post by juris »

Hey Tasnim,

thanks for your quick reply!

I tried your code snipped but I following errors:

  • core.mjs:6485 ERROR Error: Id collision on 11

  • ERROR Error: Id b-scheduler-1-event-editor already in use

My resources looks like that:

{
  "success"   : true,
  "resources" : {
    "rows" : [
      {
        "id"       : 1,
        "name"     : "Room A",
        "seats"  : [
          {
            "id"    : 11,
            "name"  : "Seat 1",
            "color" : "red"
          },
          {
            "id"    : 12,
            "name"  : "Seat 2",
            "color" : "blue"
          }
        ]
      },
      {
        "id"       : 2,
        "name"     : "Room B",
        "seats"  : [
          {
            "id"    : 21,
            "name"  : "Seat 1",
            "color" : "red"
          },
          {
            "id"    : 22,
            "name"  : "Seat 2",
            "color" : "blue"
          }
        ]
      }
    ]
  },
  "events"    : {
    "rows" : []
  }
}

and my features like that:

features: {
    cellEdit: {
      disabled: true
    },

eventDrag: {
  constrainDragToResource: true,
  showExactDropPosition: true
},

eventEdit: {
  typeField: 'type',
  items: {
    locationField: {
      type: 'text',
      name: 'location',
      label: 'Location',
      weight: 100,
      dataset: { eventType: 'place' }
    },
    resourceField: {
      items: [
        { id: 11, name: 'Seat 1', color: 'red' },
        { id: 12, name: 'Seat 2', color: 'blue' },
        { id: 21, name: 'Seat 1', color: 'red' },
        { id: 22, name: 'Seat 2', color: 'blue' }
      ]
    }
  }
},

eventResize: {
  showExactResizePosition: true
},

nonWorkingTime: true,

tree: true
  },

Do you have any idea what exactly is wrong here?

Thank you in advance and kind regards!


Post by tasnim »

I've got an easy way to do this. You can use this https://www.bryntum.com/docs/scheduler/api/Scheduler/feature/EventEdit#event-beforeEventEditShow event to achieve that

Here is how you can achieve it:

        beforeEventEditShow(event) {
            const { editor } = event;
            console.log(editor.items[2]);
            const result = editor.items[2].items.filter(({data}) => data.name.includes('Room') === false);
            editor.items[2].items = result;
        }

Best of luck,
Tasnim


Post by juris »

Thank you for the tipp with this event!

Where exactly does this event need to be added? I added it as follows but without success:

features: {
    cellEdit: {
      disabled: true
    },

eventDrag: {
  constrainDragToResource: true,
  showExactDropPosition: true
},

eventEdit: {
  typeField: 'type',
  items: {
    locationField: {
      type: 'text',
      name: 'location',
      label: 'Location',
      weight: 100,
      dataset: { eventType: 'place' }
    },
     beforeEventEditShow(event): void {
        const { editor } = event;
        console.log(editor.items[2]);
        const result = editor.items[2].items.filter(
          ({ data }) => data.name.includes('Room') === false
        );
        editor.items[2].items = result;
      }
  }
},

eventResize: {
  showExactResizePosition: true
},

nonWorkingTime: true,

tree: true
  },

Also onEventBeforeEditShow is suggested, which unfortunately does not work either. Is there a difference between the Scheduler and the Pro version?

Thank you in advance and kind regards!


Post by juris »

It's working now! Added it to the listener and now it's working, thank you very much!

Is it also possible to change the label of the resources inside the dropdown on the edit event modal?


Post Reply