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:
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:
Thanks in advance.