The SDK contains examples in Calendar/examples/frameworks/vue-3
There are subdirectories for various frameworks in Calendar/examples/frameworks/
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
Thank you for all of your hard work on this, but my questions remain unanswered. I have listed my two blockers below.
Context
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
<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:
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.
Hi!
See here for my problem: https://jmp.sh/VrlyMGbV
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
},
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
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?
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)?
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.
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