Our pure JavaScript Scheduler component


Post by Animal »

The SDK contains examples in Calendar/examples/frameworks/vue-3

There are subdirectories for various frameworks in Calendar/examples/frameworks/


Post by sergey.maltsev »

Hi, jnarowski!

Regarding using documented listeners in vue.
Please check which events available here: https://www.bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#events

Currently these declarations are supported:

Using onFunctions:

<bryntum-calendar
    ref="calendar"
    v-bind="calendarConfig"
    :onBeforeDragMoveEnd="handleBeforeDragMoveEnd"
    :onDragMoveEnd="handleDragMoveEnd"
/>

Using events with camelCase:

<bryntum-calendar
    ref="calendar"
    v-bind="calendarConfig"
    @beforeDragMoveEnd="handleBeforeDragMoveEnd"
    @dragMoveEnd="handleDragMoveEnd"
/>

Opened issue to support Kebab-case:
https://github.com/bryntum/support/issues/6455


Post by jnarowski »

Thank you for all of your hard work on this, but my questions remain unanswered. I have listed my two blockers below.

Context

  • I am using the vue3 wrapper library
  • I am using the Calendar (bryntum-calendar),
  • I am in a mode with "type: 'scheduler'"

I have not been able to get the modes with type: 'scheduler' to emit any events surrounding event drag or resize.

1. Can you please modify this below code below to show me specifically how to listen to the scheduler events within the Calendar:
https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/SchedulerPro#events

  • beforeEventDropFinalize
  • beforeEventResize
 <bryntum-calendar
    ref="calendarRef"
    :events="events"
    :resources="resources"
    v-bind="calendarConfig"
    :onBeforeEventDrag="handleBeforeEventDrag"
    @beforeEventDrag="handleBeforeEventDrag"
  />

If these are the wrong events, please share how I would hook into beforeEventDrag and beforeEventResize on the scheduler mode.

I have tried all of these from the Calendar events but none of these fire in the "type: 'scheduler'" mode:

  • @drag-move-end
  • @dragMoveEnd
  • :dragMoveEnd

2. Please provide me a code example of how I can have a single event associated with multiple resources:
I don't understand the assignment store and am not sure if I should use just the simple scheduler instead of scheduler pro. I am really hoping there is a simple solution to this. In both Mobiscroll as well as FullCalendar, I simply provided { resourceIds: [1,2] } and the scheduler knew to show an event on multiple resource rows. I need the same behavior here.


Post by sergey.maltsev »

Hi!

  1. There is no beforeEventDrag event documented here https://www.bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#events

Post by jnarowski »

See here for my problem: https://jmp.sh/VrlyMGbV


Post by mats »

1. Can you please modify this below code below to show me specifically how to listen to the scheduler events within the Calendar:

This is actually a (bad) bug that we'll fix right away. Thanks for reporting it. As a temp workaround, try "onBeforeeventdrag". https://github.com/bryntum/support/issues/6458

2. Please provide me a code example of how I can have a single event associated with multiple resources:

This demo shows multi-assigned events. https://bryntum.com/products/calendar/examples/multiassign/
All you have to do is to provide assignments as part of the data you load:

 "assignments" : {
        "rows" : [
            {
                "id"         : 1,
                "resourceId" : "r1",
                "eventId"    : 1
            },
            {
                "id"         : 2,
                "resourceId" : "r2",
                "eventId"    : 1
            },

Post by jnarowski »

RE: event emitting: Thank you SO MUCH for the clarity Mats. After all this back and forth, I thought I was going crazy. Please let me know as soon as it's fixed as I'm blocked from continuing until then.

To clarify, I need the same behavior that I have in the calendar for the scheduler events

  • I need to confirm or cancel an event when resizing it
  • I need to confirm or cancel an event after dragging it (either to another resource or within the same resource but a different time slot)

Not sure which events on the scheduler tie to these, but can you please confirm that both of these use cases are fixed?

I believe these might be the events I need to be able to listen to?

  • beforeEventDropFinalize
  • beforeEventResize

RE: resourceId: Thanks! I will experiment with assignments. Does that mean I need to manually keep track of resource assignment changes? For instance, if I am dragging from one resource to another will I need to modify the assignment array as well (adding or deleting depending on the change)?


Post by mats »

RE: event emitting: Thank you SO MUCH for the clarity Mats. After all this back and forth, I thought I was going crazy. Please let me know as soon as it's fixed as I'm blocked from continuing until then.

Fixed and covered with tests now :)

To clarify, I need the same behavior that I have in the calendar for the scheduler events

I need to confirm or cancel an event when resizing it
I need to confirm or cancel an event after dragging it (either to another resource or within the same resource but a different time slot)

This is easily doable and demonstrated here. https://bryntum.com/examples/scheduler/validation Unfortunately (as you've noticed), the APIs are a bit different between Scheduler and Calendar and we'll definitely try to normalize them in the future. But all is possible

I believe these might be the events I need to be able to listen to?

beforeEventDropFinalize
beforeEventResize

beforeEventDropFinalize and https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventResize#event-beforeEventResizeFinalize

RE: resourceId: Thanks! I will experiment with assignments. Does that mean I need to manually keep track of resource assignment changes? For instance, if I am dragging from one resource to another will I need to modify the assignment array as well (adding or deleting depending on the change)?

You won't have to manage anything, we handle all that to set the correct data in the assignment store. Try moving an event in this demo: https://bryntum.com/products/scheduler/examples/multiassign/

then on the console:

scheduler.assignmentStore.changes

and you'll see what's changes in resource assignments.

Attachments
Screenshot 2023-03-24 at 15.32.58.png
Screenshot 2023-03-24 at 15.32.58.png (86.66 KiB) Viewed 152 times

Post by johan.isaksson »

Hi,

We have discussed the resourceIds approach in the team and agree it would be a convenient syntax for multi-assignment. Have opened at ticket on implementing it: https://github.com/bryntum/support/issues/6502

Best regards,
Johan Isaksson

Post Reply