[VUE 3] create a new event without space between events

[johannesbeck]

In our scheduler, events have almost no space in-between them and following events of the same resource are also without space. Is there a way to create an event when all the space of the scheduler is taken by other events (like in the picture)?

I need a way to right click "behind" the existing event, or something comparable to create events when there is no empty space.

Bildschirmfoto 2025-05-12 um 15.04.45.png (23.7 KiB) Viewed 165 times

[marcio]

Hey johannesbeck,

Thanks for reaching out.

To create a new event when there is no empty space available in the scheduler, you can use the ScheduleMenu feature (https://bryntum.com/products/schedulerpro/docs/#Scheduler/feature/ScheduleMenu). This feature allows you to add a context menu to the scheduler, which can include an option to create a new event at the clicked position, even if it's on top of existing events.

Here's a basic example of how you can configure the ScheduleMenu to include an "Add Event" option:

const scheduler = new Scheduler({
    features: {
        scheduleMenu: {
            items: {
                addEvent: {
                    text: 'Add Event',
                    onItem: ({ date, resourceRecord }) => {
                        scheduler.eventStore.add({
                            resourceId: resourceRecord.id,
                            startDate: date,
                            duration: 1, // Adjust duration as needed
                            name: 'New Event'
                        });
                    }
                }
            }
        }
    }
});

This configuration will allow you to right-click anywhere on the scheduler, including over existing events, to add a new event.

[johannesbeck]

Thanks for the help. Is it also possible to open the taskEditor before creating the new event in the database? I need the same functionality as in schedulerMenuFeature, where I can right click on the scheduler -> create event and can modify the event before I safe it.

[marcio]

Hi johannesbeck,

Yes, you can open the event editor before saving the new event. You can use the editEvent function to open the editor for a new event configuration. Here's how you can modify the ScheduleMenu to achieve this:

const scheduler = new Scheduler({
    features: {
        scheduleMenu: {
            items: {
                addEvent: {
                    text: 'Add Event',
                    onItem: ({ date, resourceRecord }) => {
                        const newEvent = {
                            resourceId: resourceRecord.id,
                            startDate: date,
                            duration: 1, // Adjust duration as needed
                            name: 'New Event'
                        };
                        scheduler.editEvent(newEvent);
                    }
                }
            }
        }
    }
});

This will open the event editor with the new event details, allowing you to modify it before saving.

[johannesbeck]

Hi, I am trying to get "editEvent" to work, but it seems like the method does not exist. "Cannot read properties of undefined (reading 'editEvent')". But when I log the scheduler, editEvent is there:

editEvent : ƒ ()
length : 1
name : "bound editEvent"
arguments : (...)
caller : (...)
[[Prototype]] : AsyncFunction
[[TargetFunction]] : ƒ async editEvent(r,e=null,t=null,n=null)
[[BoundThis]] : Dv
[[BoundArgs]] : Array(0)
elementUpdated : undefined

This is the code, that I currently have:

getEventMenuFeature() {
      return {
        disabled: false,
        items: {
          cutEvent: false,
          splitEvent: false,
          addEvent: {
            text: 'Ereignis hinzufügen',
            icon : 'b-fa b-fa-fw b-fa-flag',
            onItem: ({ date, resourceRecord }) => {
              const [resourceName, ...roleParts] = resourceRecord.id.split('_');
              const roleValue = roleParts.join('_');

          const newEvent = this.eventStore.add({
            resourceId: resourceRecord.id,
            personId: 13,
            roleValue: roleValue,
            roleName: roleValue,
            resourceName: resourceName,
            startDate: date,
            duration: 30,
            name: "13 - " + roleValue + " - " + resourceName,
          })
          //const scheduler = this.$refs.scheduler?.instance;
          const scheduler = this.$refs.scheduler?.instance?.value;
          console.log(scheduler);
          //scheduler.eventEdit(newEvent);
          if (scheduler?.editEvent) {
            scheduler.editEvent(newEvent);
          } else {
            console.warn('editEvent is not available on the scheduler instance');
          }
          scheduler.features.eventEdit.editEvent(newEvent);

          // scheduler.editEvent(newEvent);
          // scheduler.features.eventEdit.editEvent(newEvent);
        }
      }
    }
  };
},

[ghulam.ghous]

Can you please put a debugger there and see what is the value of scheduler? Because it seems like the scheduler instance is undefined and when you are calling editEvent. Or maybe it looks like scheduler.features.eventEdit is undefined, just put a debugger there and see what is wrong.

[johannesbeck]

 const scheduler = this.$refs.scheduler?.instance?.value;
console.log(scheduler);
console.log(scheduler.features.eventEdit)

scheduler.features.eventEdit -> undefined

scheduler is an object:

• editEvent exists
• _features -> taskEdit exists

[ghulam.ghous]

Ahhh I see what is wrong, you are using schedulerPro. You shouldn't be using eventEdit here and rather taskEdit.

scheduler.features.taskEdit.editEvent(newEvent)

https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/feature/TaskEdit#function-editEvent