[ANGULAR] - Save Button from Calendar

[GabiNucci95]

Hi, I'm a beginner in Bryntum and I'm struggling with how can I configure a function in this button.

Screenshot_1.png (35.88 KiB) Viewed 2152 times

[sergey.maltsev]

Hi!

You could use this event if you need some actions to be performed before or after Event is saved
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/base/EditBase#function-onBeforeSave
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/base/EditBase#function-onAfterSave

If you are looking for something else please specify what actually you want to do there?

[GabiNucci95]

I need to know where do I configure the action to save the appointment. When I click on save button, where I need to configure to save on my DB?

[sergey.maltsev]

Hi!

Calendar uses the same remote data management as Scheduler does.
We currently have no included guides for Calendar but these from Scheduler could be used instead.
Also you could use the same approach from scheduler demos.

Using remote data
https://www.bryntum.com/docs/scheduler/#guides/data/ajaxstore.md

Scheduler demo
https://www.bryntum.com/examples/scheduler/php/

Using crudmanager
https://www.bryntum.com/docs/scheduler/#guides/data/crud_manager.md

Scheduler crudmanager + PHP demo
https://www.bryntum.com/examples/scheduler/crudmanager/

Please note it is still not stable so feel free to report issues here on forum.
For example we yet have problems with crud-manager sync for Calendar so please take in account this would be fixed for release later.
https://github.com/bryntum/support/issues/1428

[GabiNucci95]

I don't think that I'm being clear... My question is: in Angular, when we click on the button save the appointment, on the TypeScript component, which method should I call to save this informations? Because right now when I click on the save button, I don't know how to call the correct function for the save button.

[sergey.maltsev]

Hi!

We have CrudManager for the purpose of loading/saving data.
You don't need to implement your methods.
Please check demos first.

[GabiNucci95]

Hi,

I understand that the methods are already created, however on html, i need to call something? Because I didn't understand how to start those methods already created.

[pmiklashevich]

Hello Gabriela,

You don't need to call anything on html. All you need is to call API function, which performs Ajax request and sends data to the server.
In case of Calendar/examples/frameworks/angular/filtering demo it's CrudManager.sync function.

This function can be called automatically on any data change if CrudManager.autoSync is true. But it's broken at the moment, sorry. So you need to add a new control (for example button) to trigger the saving. This is how it can be implemented in the demo:

Calendar/examples/frameworks/angular/filtering/src/app/calendarConfig.ts

export const calendarConfig = {
  // CrudManager arranges loading and syncing of data in JSON form from/to a web service
  crudManager: {
    autoLoad: true,
    // Doesn't work at the moment, so need to implement a button to call sync() manually
    // autoSync: true,
    transport: {
      load: {
        url: 'assets/data/data.json'
      },
      sync: {
        url: 'syncUrl' // dummy url, please specify a real one
      }
    }
  },

Calendar/examples/frameworks/angular/filtering/src/app/app.component.html

  <div id="tools">
    <bry-widget [config]="syncBtnConfig"></bry-widget>

Calendar/examples/frameworks/angular/filtering/src/app/app.component.ts

export class AppComponent {
  @ViewChild(CalendarComponent) calendar: CalendarComponent;

  // "save" button configuration
  syncBtnConfig = {
    type    : 'button',
    icon    : 'b-fa b-fa-save',
    cls     : 'b-green b-raised',
    text    : 'Save',
    onClick : this.onSaveClick.bind(this)
  };

  // Sync data in Crud Manager with backend
  onSaveClick(): void {
    this.calendar.calendarInstance.crudManager.sync();
  }

Build and run the demo, go to https://localhost:4200/, edit an event, click the Save button. See the request is sent.

Снимок экрана 2020-08-31 в 18.04.21.png (182.84 KiB) Viewed 2118 times

And few comment to this line

this.calendar.calendarInstance.crudManager.sync();

this.calendar - this is angular component
this.calendar.calendarInstance - this is Bryntum Calendar. The component API you can see in the docs. Please find more in this guide https://www.bryntum.com/docs/calendar/#guides/integration/angular.md
this.calendar.calendarInstance.crudManager - The crud manager which handles data

Best regards,
Pavel

[GabiNucci95]

Okay,

Now my question is: witch tag on html activates this "modal" that opens the informations to create the appointment?

[pmiklashevich]

Please stick to one question per thread and follow this guide when you ask for help: viewtopic.php?f=35&t=772

About your last question, Event Editor is shown by the https://www.bryntum.com/docs/calendar/#Calendar/feature/EventEdit feature. Under the hood EventDragCreate fires https://www.bryntum.com/docs/calendar/#Scheduler/feature/EventDragCreate#event-dragCreateEnd. If EventEdit is enabled it listens to this event and starts new event editing before it's added to the store. To prevent EvetnEditor being shown on adding new events, please disable the EventEdit feature.

    features : {
        eventEdit : false,

or dynamically

calendar.features.eventEdit.disabled = true

Best,
Pavel