[REACT] how to spinner while fetching the data after we schedule/reschedule

[venugopal]

How to add spinner while fetching the data after we schedule/reschedule

[tasnim]

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

[venugopal]

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

[venugopal]

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

[Animal]

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?

[venugopal]

can i put spinner inside if condition

[tasnim]

Hi,

When do you want to put a spinner and where ?

[venugopal]

i click schedule/reschedule event created that time i am adding spinner

[alex.l]

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();