Our pure JavaScript Scheduler component


Post by evindev »

I have two schedulers on the same page and these active properties in the component:

[multiEventSelect]="true"
[eventDragSelectFeature]="true"
[eventDragFeature]="{
                    constrainDragToTimeline : false,
                    constrainDragToTimeSlot:true
 }"
 

After dropping multiple events into the other scheduler, I can retrieve the event data, but not the data of the resources where I made the drop. Is there a way to do this?


Post by mats »

I don't believe we foresaw that combination. So you have the two Schedulers vertically stacked, and allow only to reschedule to different resources - not time? Are you able to share your full test case so we can run it locally?


Post by evindev »

Good morning Mats,

Thank you for the prompt response.

It's no longer a problem because I changed the logic of the operation.

However, I still have another question: is it possible to create a context menu for each resource of a scheduler and associate all the events of that resource to a resource of another scheduler without reloading the two components?


Post by mats »

However, I still have another question: is it possible to create a context menu for each resource of a scheduler and associate all the events of that resource to a resource of another scheduler without reloading the two components?

Sure, that would be very easy - just data shuffling. Here's a guide showing how to customize our different menus: https://bryntum.com/products/scheduler/docs/guide/Scheduler/customization/contextmenu


Post by evindev »

Good evening Mats,

Thank you again for your response.

I have created the context menu, but I need to understand how I can obtain the data of all the events associated with the context resource. Additionally, I would like to know if it is possible to remove all the events from the given resource and add them to a resource of another scheduler without having to reload the data after executing an API call. My subMenu represents all the resources of the other scheduler, so I can get the ID of the resource to which the events should be associated.

Here is my context menu:

let subMenuScoperte: any[] = []
let component = this
 await this.corseAssegnateResources.forEach((el) =>{
     subMenuScoperte.push({
           text: el.descrizioneGate,
           onItem(event:any) {
                       //CODE     
} }) }) this.cellMenu = { items : { extraItem : { text : 'Assegna riga', icon : '', onItem(event:any) { console.log(event) }, menu:subMenuScoperte }, removeRow : false, cut : false, copy : false, paste : false } }

These are my components:

<bryntum-scheduler #schedulerAssegnatiContainer
            class="schedulerContainer"
            [viewPreset]="viewPreset"
            [columns]="columnsAssegnate"
            [startDate]="startDate"
            [endDate]="endDate"
            [resources]="corseAssegnateResources"
            [eventStore]="{data:corseAssegnateEvents}"
            [resourceTimeRanges]="timeRanges"
            [createEventOnDblClick]="false"
            [zoomOnTimeAxisDoubleClick]="false"
            [rowHeight]="40"
            [barMargin]="0"
            [multiEventSelect]="true"
            [allowOverlap]="false"
            [allowDropOnEventBar]="false"
            [zoomOnMouseWheel]="false"
            (onEventDrop)="onEventDrop($event)"
            [getDateConstraints]="getDateConstraints"
            (onEventClick)="onEventClick($event)"
            [resourceTimeRangesFeature]="true"
            [eventTooltipFeature]="false"
            [scheduleTooltipFeature]="false"
            [scheduleMenuFeature]="false"
            [timeAxisHeaderMenuFeature]="false"
            [eventDragCreateFeature]="false"
            [eventEditFeature]="false"
            [eventResizeFeature]="false"
            [eventMenuFeature]="corseAssegnateEventMenu"
            [eventDragSelectFeature]="true"
            [filterBarFeature]="true"
            [columnRenameFeature]="false"
            [eventDragFeature]="{
                constrainDragToTimeSlot:true,
                constrainDragToTimeline:true
            }"
            [cellEditFeature]="false"
            [cellMenuFeature]="false"
            [headerMenuFeature]="{
                items:{
                    toggleFilterBar	:false,
                    columnPicker:false,
                    sortAsc:false,
                    sortDesc:false,
                    multiSort:false,
                    groupAsc:false,
                    groupDesc:false,
                    hideColumn : {
                        text:'Nascondi'
                    }
                }
            }"
        ></bryntum-scheduler>
<bryntum-scheduler #schedulerNonAssegnatiContainer
                class="schedulerContainer"
                [viewPreset]="viewPreset"
                [columns]="columnsNonAssegnate"
                [startDate]="startDate"
                [endDate]="endDate"
                [resources]="corseNonAssegnateResources"
                [eventStore]="{data:corseNonAssegnateEvents}"
                [createEventOnDblClick]="false"
                [zoomOnTimeAxisDoubleClick]="false"
                [rowHeight]="40"
                [barMargin]="0"
                [multiEventSelect]="true"
                [allowOverlap]="false"
                [allowDropOnEventBar]="false"
                [zoomOnMouseWheel]="false"
                (onBeforeEventDropFinalize)="onEventDropFinalize($event)"
                [getDateConstraints]="getDateConstraints"
                (onEventClick)="onEventClick($event)"
                [eventTooltipFeature]="false"
                [scheduleTooltipFeature]="false"
                [scheduleMenuFeature]="false"
                [timeAxisHeaderMenuFeature]="false"
                [cellMenuFeature]="cellMenu"
                [eventDragCreateFeature]="false"
                [eventEditFeature]="false"
                [eventResizeFeature]="false"
                [eventDragSelectFeature]="true"
                [filterBarFeature]="true"
                [columnRenameFeature]="false"
                [cellEditFeature]="false"
                [eventDragFeature]="{
                    constrainDragToTimeline : false,
                    constrainDragToTimeSlot:true,
                }"
                [eventMenuFeature]="corseNonAssegnateEventMenu"
            ></bryntum-scheduler>

Post by mats »

Easy, please see https://bryntum.com/products/scheduler/docs/api/Scheduler/model/ResourceModel#property-events

const events = scheduler1.eventStore.remove(resource.events)

scheduler2.eventStore.add(events)

Post by evindev »

I'm sorry mats, i think i'm doing something wrong

    @ViewChild('schedulerAssegnatiContainer')schedulerAssegnatiContainer :any 
    @ViewChild('schedulerNonAssegnatiContainer')schedulerNonAssegnatiContainer : any

let component = this
                await this.corseAssegnateResources.forEach((el) =>{
                    subMenuScoperte.push({
                        text: el.descrizioneGate,
                        async onItem(event:any) {
                            console.log(event)
                            console.log(component.schedulerAssegnatiContainer.instance.resourceStore.getById(event.record.originalData.id))
                            const resource = component.schedulerAssegnatiContainer.instance.resourceStore.getById(event.record.originalData.id)
                            console.log(resource.events)
                            const events = component.schedulerNonAssegnatiContainer.instance.eventStore.remove(resource.events)
                            component.schedulerAssegnatiContainer.instance.eventStore.add(events)
                        }
                    })
                })

Doing this resource is a ModelClass.
If I declare

@ViewChild('schedulerAssegnatiContainer') schedulerAssegnatiContainer: any 
@ViewChild('schedulerNonAssegnatiContainer') schedulerNonAssegnatiContainer: any

typing them as any, TypeScript does not give me errors. However, if I type them as BryntumSchedulerComponent, TypeScript gives me the following error:

Property 'events' does not exist on type 'Model'.

However, even declaring the components as type any, events is an empty array.


Post by mats »

You probably have to cast/convert the removed events to ResourceModel


Post Reply