SyncFusion Schedular Component connection with firebase?

Question

import React, { useEffect, useState } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

// import { scheduleData } from '../data/dummy';
import { Header } from '../components';
import database from '../firebase';
import { set, ref, onValue, update } from "firebase/database";
// eslint-disable-next-line react/destructuring-assignment

const Scheduler = () => {
  const [scheduleObj, setScheduleObj] = useState();
  const [scheduleData, setScheduleData] = useState([]);

  const onDragStart = (arg) => {
    // eslint-disable-next-line no-param-reassign
    arg.navigation.enable = true;
  };
  const fetchData = () => {
    onValue(ref(database, 'schedules/'), (snapshot) => {
      const data = snapshot.val();
      const newData = [];
      for (const key in data) {
        newData.push(data[key]);
      }
      setScheduleData(newData);
      console.log(setScheduleData);
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const save = 'e-event-create e-text-ellipsis e-control e-btn e-lib e-flat e-primary';
  const saveEvent = 'e-control e-btn e-lib e-primary e-event-save e-flat';
  const moreDetails = 'e-event-details e-text-ellipsis e-control e-btn e-lib e-flat';
  const edit = 'e-edit e-control e-btn e-lib e-flat e-round e-small e-icon-btn';

  const closePopup = (args) => {
    const classNameSave = args.event.target.className

    if (args.event.target.className === edit ) {
      const id = args.data.Id;
      update(ref(database, 'schedules/' + id), {
        Id: args.data.Id,
        Subject: args.data.Subject,
        Location: args.data.Location,
        Description: args.data.Description,
        StartTime: args.data.StartTime.toString(),
        EndTime: args.data.EndTime.toString(),
        IsAllDay: args.data.IsAllDay,
      }).then(() => {
        console.log('Synchronization succeeded');
        // console.log(args.data);
        // window.location.reload();
      })
        .catch((error) => {
          console.log('Synchronization failed');
        });
    }

    else if (args.event.target.className !== moreDetails) {
      if (classNameSave === save || classNameSave === saveEvent) {
        const length = scheduleData.length;
        set(ref(database, 'schedules/' + (length + 1)), {
          Id: scheduleData.length + 1,
          Subject: args.data.Subject,
          Location: args.data.Location,
          Description: args.data.Description,
          StartTime: args.data.StartTime.toString(),
          EndTime: args.data.EndTime.toString(),
          IsAllDay: args.data.IsAllDay,
        }).then(() => {
          console.log('Synchronization succeeded');
          // console.log(args.data);
          window.location.reload();
        })
          .catch((error) => {
            console.log('Synchronization failed');
          });
        ;
      }
    }
  };

  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="App" title="Calendar" />
      <ScheduleComponent
        height="650px"
        ref={(schedule) => setScheduleObj(schedule)}
        selectedDate={new Date()}
        eventSettings={{ dataSource: scheduleData }}
        dragStart={onDragStart}
        popupClose={closePopup}
      >
        <ViewsDirective>
          { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item} />)}
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </div>
  );
};

export default Scheduler;

This is my code I am able to store data on firebase realtime database but not able to edit it.... I tried to get the class name of edit button and on target it goes to detailed popup, but my code updates data on edit button click, And I have already set save, more details button class name to insert data, so i am unable to reuse it for update purposes.

Answer 1

you can perform CRUD actions in the actionBegin event of the scheduler to update the database based on the current action requestType in actionEventArgs.