Our pure JavaScript Scheduler component


Post by mats »

Do you have a test case we can inspect? Or is this running live somewhere so we can try it out?


Post by frederick45 »

connect to https://efficiency-app-7908.scratch.lightning.force.com/
login: planvisi@utb.fr
pwd:Angers123#

tab 'planning des visites'

i think i receive a code that i should to give you


Post by frederick45 »

i think is better to have a call ?


Post by mats »

We can't offer free debugging help I'm afraid. We'll take a look soon.


Post by frederick45 »

ok, this is my scheduler :

        this.scheduler = new bryntum.scheduler.Scheduler({
            features: {
                resourceTimeRanges: true,
                nonWorkingTime : true,
                timeRanges: {
                    showHeaderElements: true,
                    showCurrentTimeLine: true
                },
                eventEdit: {
                    extraWidgets: [
                        {
                            type: 'text',
                            name: 'WOnumber',
                            label: 'Number Work Order',
                            typeAhead: true,
                            forceSelection: true,
                            editor: false,
                            selectOnFocus: true,
                            readOnly: true,
                        }             
] }, stripe : true, timeRanges : true, eventMenu : { items : { unassign : { text : 'Unassign', icon : 'b-fa b-fa-user-times', weight : 200, onItem : ({ eventRecord, resourceRecord }) => eventRecord.unassign(resourceRecord) } } },
}, insertFirst: this.template.querySelector('.main'), rowHeight: 50, barMargin: 8, columns: [ { text: 'Salariés', width: 150, field: 'name', } ], startDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()-7), endDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()+1), viewPreset : { base: 'hourAndDay', tickWidth: 25, columnLinesFor: 0, headers: [ { unit: 'd', align: 'center', dateFormat: 'ddd DD MMM' }, { unit: 'h', align: 'center', dateFormat: 'HH' } ] }, eventRenderer({ eventRecord, resourceRecord, renderData }) { const bgColor = resourceRecord.bg || ''; renderData.style = `background:${bgColor};border-color:${bgColor};color:${resourceRecord.textColor}`; renderData.iconCls.add('b-fa', `b-fa-${resourceRecord.icon}`); return eventRecord.name; }, resourceStore: new bryntum.scheduler.ResourceStore({ data: this.ListResource }), eventStore: new bryntum.scheduler.EventStore({ data: this.ListEvent }), assignmentStore: new bryntum.scheduler.AssignmentStore({ data: this.ListEvent }), listeners : { afterEventDrop({ eventRecords }) { console.log('freddy'); } }, tbar : [ '', '->', { type : 'viewpresetcombo' }, ] });

for 'console.log('freddy');', it's KO, i don't see 'freddy' in the google console


Post by alex.l »

I applied your changes to our example and I see console logged after drag-n-drop. Please see video attached.
Btw, how do you use same data for assignmentStore and for eventStore?

        eventStore: new bryntum.scheduler.EventStore({
            data: this.ListEvent
        }),
        assignmentStore: new bryntum.scheduler.AssignmentStore({
            data: this.ListEvent
        }),

Maybe the problem in the container you used for your lwc component? Could you please test it in our examples? Do you see that problem?

Attachments
Screen Recording 2022-12-01 at 09.56.09.mov
(5.46 MiB) Downloaded 33 times

All the best,
Alex


Post by frederick45 »

HI,

what is the difference between eventstore and assignmentStore?
in eventstore, i put the ressource Id, and the event is display on the scheduler, so what is the use of assignmentStore ?

BR


Post by frederick45 »

Hi,

this is my scheduler :

        this.scheduler = window.scheduler = new bryntum.scheduler.Scheduler({
            features: {
                resourceTimeRanges: true,
                nonWorkingTime : true,
                dependencies: false,
                timeRanges: {
                    showHeaderElements: true,
                    showCurrentTimeLine: true
                },
                eventEdit: {
                    extraWidgets: [
                        {
                            type: 'text',
                            name: 'WOnumber',
                            label: 'Number Work Order',
                            typeAhead: true,
                            forceSelection: true,
                            editor: false,
                            selectOnFocus: true,
                            readOnly: true,
                        }             
] }, stripe : true, timeRanges : true, eventEdit : { editorConfig : { bbar : { items : { deleteButton : null } } } }, eventMenu : { items : { unassign : { text : 'Unassign', icon : 'b-fa b-fa-user-times', weight : 200, onItem : ({ eventRecord, resourceRecord }) => eventRecord.unassign(resourceRecord) }, deleteEvent : false, copyEvent : false, cutEvent : false } }, scheduleMenu : { items : { // Remove "Add event" default item addEvent : false } },
}, insertFirst: this.template.querySelector('.main'), rowHeight: 50, barMargin: 8, columns: [ { text: 'Salariés', width: 150, field: 'name', } ], startDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()-7), endDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()+7), viewPreset : 'weekAndDay', eventRenderer({ eventRecord, resourceRecord, renderData }) { const bgColor = resourceRecord.bg || ''; renderData.style = `background:${bgColor};border-color:${bgColor};color:${resourceRecord.textColor}`; renderData.iconCls.add('b-fa', `b-fa-${resourceRecord.icon}`); return eventRecord.name; }, resourceStore: new bryntum.scheduler.ResourceStore({ data: this.ListResource }), eventStore: new bryntum.scheduler.EventStore({ data: this.ListEvent, listeners: { update: (event) => { this.onEventUpdate(event); }, } }), tbar : [ '', '->', { type : 'viewpresetcombo' }, ], listeners: { beforeEventAdd: (event) => { return false; }, afterEventDrop({ event }) { console.log('freddy'); } } });

the listener beforeEventAdd works fine, but afterEventDrop doesn't work

BR


Post by alex.l »

HI,

what is the difference between eventstore and assignmentStore?
in eventstore, i put the ressource Id, and the event is display on the scheduler, so what is the use of assignmentStore ?

BR

resourceId might be used only for single assignment mode, assignmentStore uses for multi-assignment mode. Should be used first or second approach and not both. AssignmentStore will be created automatically if resourceId approach used.

Here is docs https://bryntum.com/products/scheduler/docs/api/Scheduler/model/mixin/EventModelMixin#field-resourceId

Id of the resource this event is associated with (only usable for single assignments). We recommend using assignments in an AssignmentStore over this approach. Internally any Event using resourceId will have an assignment in AssignmentStore generated.

the listener beforeEventAdd works fine, but afterEventDrop doesn't work

Please try to use one of our examples to test this. Try to apply required changes to it. I tested this and it works fine to me. We should try to find the difference via our solutions, it seems like the problem in not scheduler config itself, but maybe in containers used to render it or versions/browsers... Hard to say what exactly is wrong, because it's not reproducible on my side.

All the best,
Alex


Post Reply