Our powerful JS Calendar component


Post by GabiNucci95 »

Hello,

I want to know witch variable the calendar stores the appointment created. In the image bellow I created an appointment and he was not storage in a DB yet. I'll send my HTML, Component and wrapper.

I created this appointment, however I know that he is not yet saved in a DB.
I created this appointment, however I know that he is not yet saved in a DB.
Screenshot_1.png (52.24 KiB) Viewed 1114 times
COMPONENT where I think that goes the catchAll
COMPONENT where I think that goes the catchAll
component.png (64.47 KiB) Viewed 1114 times
CONFIG
CONFIG
config.png (54.9 KiB) Viewed 1114 times

Post by GabiNucci95 »

wrapper
wrapper
wrapper.png (73.68 KiB) Viewed 1113 times
HTML - this is the part where I call the calendar.
HTML - this is the part where I call the calendar.
html.png (55.85 KiB) Viewed 1113 times

Post by sergey.maltsev »

Hi!

All events are stored in https://www.bryntum.com/docs/calendar/#Calendar/mixin/CalendarStores#config-eventStore

If you want to subscribe to event when you create new appointment there are two ways to do it.

First is to add listener to bry-calendar component.

<bry-calendar
...
  (onCalendarEvents) = "onCalendarEvents($event)"
</bry-calendar>

and check for aftereventsave or beforeeventdelete event types in code.

onCalendarEvents(event: any) {

switch (event.type) {
  case 'aftereventsave':
    console.log(`New event saved: ${event.eventRecord.name}`);
    break;

  case 'beforeeventdelete':
    console.log(`Events removed: ${event.eventRecords.map(eventRecord => eventRecord.name).join(',')}`);
    break;
}
}

See
https://www.bryntum.com/docs/calendar/#Scheduler/feature/EventEdit#event-afterEventSave.
https://www.bryntum.com/docs/calendar/#Calendar/mixin/CalendarStores#event-beforeEventDelete

Second way is to subscribe for eventStore change event.

ngAfterViewInit() {
    //@ts-ignore
    const eventStore = this.calendar.calendarInstance.eventStore;

eventStore.on('change', ({ action, record, records }) => {

  const eventNames = records && records.map(eventRecord => eventRecord.name).join(',');

  switch (action) {
    case 'update':
      console.log(`Event updated: ${record.name}`);
      break;

    case 'add':
      console.log(`Events added: ${eventNames}`);
      break;

    case 'remove':
      console.log(`Events removed: ${eventNames}`);
      break;
  }
});
}

See https://www.bryntum.com/docs/calendar/#Core/data/Store#event-change

Check bundled angular example for code samples.

Also here is Angular integration guide
https://www.bryntum.com/docs/calendar/#guides/integration/angular.md


Post by GabiNucci95 »

Great! It worked!! Thank you very much!


Post Reply