Our pure JavaScript Scheduler component


Post by glennvl91 »

Hi

In demo's I can see that double clicking on an event triggers the edit popup. In my setup I get to see the 'information' popup when double clicking an event. Is this default behaviour in scheduler pro or when working with dependencies? Or am I doing something wrong?

I would like to trigger the edit popup on double click because I am customising this form.

I can't seem to find any information about this in de docs, can u guys help me on this one?

This is my setup:

var schedulerContainer = document.getElementById('scheduler');

async function getHours() {
    let hours;

await fetch(schedulerContainer.dataset.visibleHoursUrl)
    .then(res => res.json())
    .then(json => hours = json);

return hours;
}

async function createScheduler() {
    const hours = await getHours();

const visibleDate = bryntum.schedulerpro.DateHelper.clearTime(new Date());
visibleDate.setHours((new Date()).getHours()+12);

const { xss } = bryntum.schedulerpro.StringHelper;

const scheduler = await new bryntum.schedulerpro.SchedulerPro({
    appendTo : schedulerContainer,

    infiniteScroll: true,
    visibleDate : visibleDate,
    viewPreset  : 'hourAndDay',
    continuous  : false,
    workingTime : { fromHour: hours.earliest, toHour: hours.latest },
    weekStartDay: 1,

    rowHeight : 50,
    barMargin : 3,

    maxZoomLevel : 15,
    minZoomLevel : 15,

    zoomOnMouseWheel          : false,
    zoomOnTimeAxisDoubleClick : false,

    eventBodyTemplate : data => xss`<section><div class="b-sch-event-header">${data.headerText}</div><div class="b-sch-event-footer">${data.footerText}</div></section>`,
    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        return {
            headerText : bryntum.schedulerpro.DateHelper.format(eventRecord.startDate, 'LT'),
            footerText : '(' + eventRecord.numberOfPersons + ') ' + eventRecord.firstname + ' ' + eventRecord.lastname,
        };
    },

    columns : [
        { field : 'room', text: 'Zaal', hidden : true},
        { field : 'name', text : 'Naam', flex : 1 },
        { field : 'amount', text : '#pers', flex : 1 }
    ],

    project : {
        // Configure urls used by the built in CrudManager
        autoLoad: true,
        autoSync: true,
        transport : {
            load : {
                url : schedulerContainer.dataset.resourcesUrl
            },
            sync : {
                url : schedulerContainer.dataset.syncResourcesUrl
            }
        }
    },

    tbar: {},

    features : {
        stripe : true,
        group  : 'room',
        sort   : 'name',
        timeAxisHeaderMenu : {
            items : {
                zoomLevel : false
            }
        },
        dependencies : {
            radius : 5
        },
        eventTooltip : {
            // Tooltip configs can be used here
            align : 'l-r', // Align left to right,
            // A custom HTML template
            template : data => `
                <div class="b-sch-event-tooltip">
                    ${data.startText} - ${data.endText}<br/>
                    ${data.eventRecord.get('note') ? `Opmerking: ${data.eventRecord.get('note')}<br/>` : ''}
                    ${data.eventRecord.get('allergies') ? `Allergieën: ${data.eventRecord.get('allergies')}` : ''}
                </div>`
        },
        eventEdit  : {
            // Add items to the event editor
            items : {
                nameField : null,
                firstnameField : {
                    type   : 'text',
                    name   : 'firstname',
                    label  : 'Voornaam',
                    weight : 120,
                },
                lastnameField : {
                    type   : 'text',
                    name   : 'lastname',
                    label  : 'Familienaam',
                    weight : 120,
                },
                numberOfPersonsField : {
                    type   : 'number',
                    name   : 'numberOfPersons',
                    label  : '# personen',
                    weight : 130
                }
            }
        }
    }
});

scheduler.tbar.add([
    {
        type : 'button',
        ref  : 'reloadButton',
        icon : 'b-fa b-fa-sync',
        text : 'Schema herladen',
        onAction() {
            scheduler.project.load()
                .then(() => bryntum.schedulerpro.WidgetHelper.toast('Data vernieuwd'))
                .catch(() => bryntum.schedulerpro.WidgetHelper.toast('Vernieuwen mislukt'));
        }
    },
    {
        type: 'button',
        ref: 'todayButton',
        text: 'Huidige shift',
        tooltip: 'Bekijk huidige reservaties',
        onAction() {
            const today = bryntum.schedulerpro.DateHelper.clearTime(new Date());
            today.setHours((new Date()).getHours()-1);
            scheduler.scrollToDate(today, {'block':'start', 'animate':true});
        }
    },
    {
        label      : 'Ga naar',
        inputWidth : '7em',
        width      : 'auto',
        type       : 'datefield',
        value      : bryntum.schedulerpro.DateHelper.clearTime(new Date()),
        step       : '1d',
        listeners  : {
            change({ userAction, value }) {
                if (userAction) {
                    scheduler.scrollToDate(bryntum.schedulerpro.DateHelper.set(value, 'hour', 12), { block : 'center', animate : 500 });
                }
            }
        },
        highlightExternalChange : false
    }
]);

}

createScheduler();

This is the popup I get on double click:

Screenshot 2022-09-26 at 17.15.42.png
Screenshot 2022-09-26 at 17.15.42.png (123.2 KiB) Viewed 193 times

It is also a kind of Edit popup but it's not the same as I want.

I want this one when clicking on 'edit event' after right clicking because it has custom fields:

Screenshot 2022-09-26 at 17.16.35.png
Screenshot 2022-09-26 at 17.16.35.png (106.21 KiB) Viewed 193 times

Thanks in advance.


Post by mats »

Scheduler Pro is a more advanced component and hence has a more advanced editor UI. In Pro it's called https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/feature/TaskEdit so simply disable that feature and enable

https://bryntum.com/docs/scheduler-pro/api/Scheduler/feature/EventEdit

instead.


Post by glennvl91 »

awesome, thx!


Post Reply