Our pure JavaScript Scheduler component


Post by KAB »

Hi!

After the upgrade to latest scheduler js version the listening events are not firing any more:
listeners:
{
    eventclick: this.myCellClickFn,
    eventdblclick: this.myEventDblClickFn,

    thisObj: this
}
With 1.2.0 Version it's working fine. Anything that changed?

Post by pmiklashevich »

Events are there. Please open https://www.bryntum.com/examples/scheduler/basic/ and try in console:
scheduler.on('eventclick', console.log, console)
Then click any event to see it works.

Docs here:
https://www.bryntum.com/docs/scheduler/ ... eventClick

Pavlo Miklashevych
Sr. Frontend Developer


Post by KAB »

EDIT: The example below seem to work on latest scheduler. So there must be another problem somewhere. I will investigate more. Thank you so far.

Thank you for your answer. Your example worked. However, can you give an example where you add the listener in the constructor:

for example the https://www.bryntum.com/examples/scheduler/basic/ slightly modified and listeners passed in constructor: it does not fire with the latest version
import { Scheduler } from '../../build/scheduler.module.js?429923';
import shared from '../_shared/shared.module.js?429923';
/* eslint-disable no-unused-vars */

//region Data

let resources = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Don' },
        { id : 'r4', name : 'Karen' },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ],
    events    = [
        {
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows'
        },
        {
            resourceId : 'r3',
            startDate  : new Date(2017, 0, 1, 14),
            endDate    : new Date(2017, 0, 1, 16),
            name       : 'Double click me',
            eventColor : 'purple',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            name       : 'Important meeting',
            iconCls    : 'b-fa b-fa-exclamation-triangle',
            eventColor : 'red'
        },
        {
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Dad\'s birthday',
            iconCls    : 'b-fa b-fa-birthday-cake'
        }
    ];

//endregion

let scheduler = new Scheduler({
    appendTo         : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    listeners: {
               eventclick(event) 
               {
                console.log("testclick")
               }
               },

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});



Post by mats »

Works fine for me?
let scheduler = new Scheduler({
    appendTo         : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ],
    listeners : {
        eventclick : console.log
    }
});

Post by KAB »

Thanks for answers!
OK, now I am getting closer to the problem: The events fire only when thisObj is not present in the listeners dict.
As soon as I supply
thisObj: this
or
thisObj: self
the events do not fire any more.

Post by mats »

What is your thisObj? Please upload a runnable test case so we can inspect it.

Post by KAB »

Hi @mats

Thanks for your help. I found a workaround:
If I add the listener afterwards the self is passed through

Thank you for you for your help!
self.Scheduler.on('eventClick', (event, self) => {
                    var self = this;
                    //...
                    }

Post Reply