How to add spinner while fetching the data after we schedule/reschedule
Support Forum
Hi,
Our calendar already shows a spinner mask which you can test here https://bryntum.com/products/calendar/examples/basic/
with slow 3G throttling
For manual masking you could use https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-mask
calendar.mask('Loading...');
and to unmask you could use https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-unmask
calendar.unmask();
Hope it helps.
Best regards,
Tasnim
this is code can u show me my code how to fix
const scheduleClick = context => {
console.log('Calendar - scheduleClick - begin', { mode, context })
if (
mode === CalendarDisplayModes.SCHEDULING || //
mode === CalendarDisplayModes.RESCHEDULING
) {
let start = new Date(context.date)
let end = new Date(context.date)
end.setMinutes(end.getMinutes() + theNumMinutes)
const theEvent = {
id: '939393',
//title: startDate2.format('hh:mm A'),
title: moment(start).format('hh:mm A'),
start: new Date(start),
end: new Date(end),
type: 'selected',
}
selected(theEvent)
// add new event to the bryntum event array
const theSelectedNewEvent = {
name: 'New event',
resourceId: 'New event',
startDate: new Date(start),
endDate: new Date(end),
eventColor: AvailColor[AvailType.Appointment],
// type: 'selected',
}
setSelectedNewEvent(theSelectedNewEvent)
}
}
how to spinner while fetching the data after we schedule/reschedule
this is code can u show me my code how to fix
const scheduleClick = context => {
console.log('Calendar - scheduleClick - begin', { mode, context })
if (
mode === CalendarDisplayModes.SCHEDULING || //
mode === CalendarDisplayModes.RESCHEDULING
) {
let start = new Date(context.date)
let end = new Date(context.date)
end.setMinutes(end.getMinutes() + theNumMinutes)
const theEvent = {
id: '939393',
//title: startDate2.format('hh:mm A'),
title: moment(start).format('hh:mm A'),
start: new Date(start),
end: new Date(end),
type: 'selected',
}
selected(theEvent)
// add new event to the bryntum event array
const theSelectedNewEvent = {
name: 'New event',
resourceId: 'New event',
startDate: new Date(start),
endDate: new Date(end),
eventColor: AvailColor[AvailType.Appointment],
// type: 'selected',
}
setSelectedNewEvent(theSelectedNewEvent)
}
}
how to spinner while fetching the data after we schedule/reschedule
The posted code appears to be adding a new event on click. Not fetching data, so it's difficult to help.
But you're adding a new event on click?
Why not use https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#config-autoCreate and set the gesture to be click
?
Hi,
The code you posted is not relevant to the behaviour you described. I do not see any server requests in the code fragment.
Basically you need to add spinner before request, and hide it on response. That's all you need. The code to hide/show spinner has been posted above:
calendar.mask('Loading...');
calendar.unmask();
All the best,
Alex