Local storage events in Event Calendar

Hi! Im new with app development, ionic and Morbiscroll and im trying to do a calendar app for a class.
I tried the Morbiscroll calendar function and it works perfectly! but I need the events to store locally or with firebase so they don’t dissapear everytime I reload, and i dont know how to do it :c.
Thanks in advance!

Here is my code:
.html
<ion-content [fullscreen]=“true”>


Recordatorios

  <h1>Recordatorios</h1>

  <!-- <ion-datetime (click)="presentModal()" locale="en-US"></ion-datetime> -->
  <mbsc-eventcalendar  [data]="myEvents" [options]="calendarOptions" [(selectedDate)]="calendarSelectedDate">
  </mbsc-eventcalendar>
  <mbsc-popup [options]="popupOptions" [anchor]="popupAnchor" [buttons]="popupButtons" [headerText]="popupHeaderText" #popup>
      <div class="mbsc-form-group">
          <mbsc-input label="Title" [(ngModel)]="popupEventTitle"></mbsc-input>
          <mbsc-textarea label="Description" [(ngModel)]="popupEventDescription"></mbsc-textarea>
      </div>
      <div class="mbsc-form-group">
          <mbsc-switch label="All-day" [(ngModel)]="popupEventAllDay"></mbsc-switch>
          <mbsc-datepicker [(ngModel)]="popupEventDates" [options]="datePickerOptions" [controls]="popupEventAllDay ? datePickerControls : datetimePickerControls" [responsive]="popupEventAllDay ? datePickerResponsive : datetimePickerResponsive" [startInput]="startInput"
              [endInput]="endInput"></mbsc-datepicker>
          <mbsc-input #startInput label="Starts"></mbsc-input>
          <mbsc-input #endInput label="Ends"></mbsc-input>
          <div class="event-color-c" (click)="openColorPicker($event)">
              <div class="event-color-label">Color</div>
              <div class="event-color" [ngStyle]="{background: selectedColor}"></div>
          </div>
          <div *ngIf="isEdit" class="mbsc-button-group">
              <mbsc-button class="mbsc-button-block" color="danger" variant="outline" (click)="onDeleteClick()">Eliminar evento
              </mbsc-button>
          </div>
      </div>
  </mbsc-popup>
  
  <mbsc-popup [options]="colorOptions" [anchor]="colorAnchor" #colorPicker>
      <div class="crud-color-row">
          <div *ngFor="let color of colors;let i=index">
              <div *ngIf="i<5" class="crud-color-c" [ngClass]="{'selected': tempColor === color}" [attr.data-value]="color" (click)="changeColor($event)">
                  <div class="crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" [ngStyle]="{background: color}"></div>
              </div>
          </div>
      </div>
      <div class="crud-color-row">
          <div *ngFor="let color of colors;let i=index">
              <div *ngIf="i>=5" class="crud-color-c" [ngClass]="{'selected': tempColor === color}" [attr.data-value]="color" (click)="changeColor($event)">
                  <div class="crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" [ngStyle]="{background: color}"></div>
              </div>
          </div>
      </div>
  </mbsc-popup>

  <app-explore-container name="Tab 2 page"></app-explore-container>

.ts

@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',

  styleUrls: ['tab2.page.scss'],

  providers: [Notifications]

})

export class Tab2Page{

 

  today = Date.now();

 

  recordatorio: recordatorios;

  constructor(public firebaseauthService: DataService,

    public fireStoreService: FirestoreService,

    public fireStorageService: FirestorageService,

    private modalCtrl: ModalController,

    private http: HttpClient,

    private notify: Notifications

    ) {  

     

  }

  @ViewChild('popup', { static: false })

    popup!: MbscPopup;

    @ViewChild('colorPicker', { static: false })

    colorPicker: any;

    popupEventTitle: string | undefined;

    popupEventDescription = '';

    popupEventAllDay = true;

    popupEventDates: any;

    popupEventStatus = 'busy';

    calendarSelectedDate: any = new Date();

    switchLabel: any = 'All-day';

    tempColor = '';

    selectedColor = '';

    colorAnchor: HTMLElement | undefined;

    colors = ['#ffeb3c', '#ff9900', '#f44437', '#ea1e63', '#9c26b0', '#3f51b5', '', '#009788', '#4baf4f', '#7e5d4e'];

    myEvents: MbscCalendarEvent[] = [{

    }];

    tempEvent!: MbscCalendarEvent;

    calendarOptions: MbscEventcalendarOptions = {

        clickToCreate: 'single',

        dragToCreate: true,

        dragToMove: true,

        dragToResize: true,

        view: {

            calendar: { type: 'month', labels: true },

            agenda: { type: 'month'}

        },

        onEventClick: (args) => {

            this.isEdit = true;

            this.tempEvent = args.event;

            // fill popup form with event data

            this.loadPopupForm(args.event);

            // set popup options

            this.popupHeaderText = 'Editar';

            this.popupButtons = this.popupEditButtons;

            this.popupAnchor = args.domEvent.currentTarget;

            // open the popup

            this.popup.open();

        },

        onEventCreated: (args, inst) => {

            setTimeout(() => {

                this.isEdit = false;

                this.tempEvent = args.event;

                // fill popup form with event data

                this.loadPopupForm(args.event);

                // set popup options

                this.popupHeaderText = 'Nuevo evento';

                this.popupButtons = this.popupAddButtons;

                this.popupAnchor = args.target;

                // open the popup

                this.popup.open();

            });

        },

        onEventDeleted: (args) => {

            setTimeout(() => {

                this.deleteEvent(args.event);

            });

        },

        onEventUpdated: (args) => {

           

        }

    };

    popupHeaderText!: string;

    popupAnchor: HTMLElement | undefined;

    popupAddButtons = ['cancel', {

        handler: () => {

            this.saveEvent();

        },

        keyCode: 'enter',

        text: 'Añadir',

        cssClass: 'mbsc-popup-button-primary'

    }];

    popupEditButtons = ['cancel', {

        handler: () => {

            this.saveEvent();

        },

        keyCode: 'enter',

        text: 'Guardar',

        cssClass: 'mbsc-popup-button-primary'

    }];

    popupButtons: any = [];

    popupOptions: MbscPopupOptions = {

        display: 'bottom',

        contentPadding: false,

        fullScreen: true,

        onClose: () => {

            if (!this.isEdit) {

                // refresh the list, if add popup was canceled, to remove the temporary event

                this.myEvents = [...this.myEvents];

            }

        },

        responsive: {

            medium: {

                display: 'bottom',

                width: 400,

                fullScreen: false,

                touchUi: false

            }

        }

    };

    datePickerControls = ['date'];

    datePickerResponsive: any = {

        medium: {

            controls: ['calendar'],

            touchUi: false

        }

    };

    datetimePickerControls = ['datetime'];

    datetimePickerResponsive = {

        medium: {

            controls: ['calendar', 'time'],

            touchUi: false

        }

    };

    datePickerOptions: MbscDatepickerOptions = {

        select: 'range',

        showRangeLabels: false,

        touchUi: true

    };

    isEdit = false;

    colorOptions: MbscPopupOptions = {

        display: 'bottom',

        contentPadding: false,

        showArrow: false,

        showOverlay: false,

        buttons: [

            'cancel',

            {

                text: 'Cambiar',

                keyCode: 'enter',

                handler: (ev) => {

                    this.selectedColor = this.tempColor;

                    this.colorPicker.close();

                },

                cssClass: 'mbsc-popup-button-primary'

            }

        ],

        responsive: {

            medium: {

                display: 'bottom',

                buttons: [],

            }

        }

    };

    loadPopupForm(event: MbscCalendarEvent): void {

        this.popupEventTitle = event.title;

        this.popupEventDescription = event.description;

        this.popupEventDates = [event.start, event.end];

        this.popupEventAllDay = event.allDay || false;

        this.popupEventStatus = event.status || 'busy';

        this.selectedColor = event.color || '';

    }

    saveEvent(): void {

        this.tempEvent.title = this.popupEventTitle;

        this.tempEvent.description = this.popupEventDescription;

        this.tempEvent.start = this.popupEventDates[0];

        this.tempEvent.end = this.popupEventDates[1];

        this.tempEvent.allDay = this.popupEventAllDay;

        this.tempEvent.status = this.popupEventStatus;

        this.tempEvent.color = this.selectedColor;

        if (this.isEdit) {

            // update the event in the list

            this.myEvents = [...this.myEvents];

            // here you can update the event in your storage as well

            // ...

        } else {

            // add the new event to the list

            this.myEvents = [...this.myEvents, this.tempEvent];

            // here you can add the event to your storage as well

            // ...

           

        }

        // navigate the calendar

        this.calendarSelectedDate = this.popupEventDates[0];

        // close the popup

        this.popup.close();

    }

    deleteEvent(event: MbscCalendarEvent): void {

        this.myEvents = this.myEvents.filter(item => item.id !== event.id);

        this.notify.snackbar({

            button: {

                action: () => {

                    this.myEvents = [...this.myEvents, event];

                },

                text: 'deshacer'

            },

            message: 'Evento eliminado'

        });

        // here you can delete the event from your storage as well

        // ...

    }

    onDeleteClick(): void {

        this.deleteEvent(this.tempEvent);

        this.popup.close();

    }

    selectColor(color: string): void {

        this.tempColor = color;

    }

    openColorPicker(ev: any): void {

        this.selectColor(this.selectedColor || '');

        this.colorAnchor = ev.currentTarget;

        this.colorPicker.open();

    }

    changeColor(ev: any): void {

        const color = ev.currentTarget.getAttribute('data-value');

        this.selectColor(color);

        if (!this.colorPicker.s.buttons.length) {

            this.selectedColor = color;

            this.colorPicker.close();

        }

    }

}