SyncFusion 调度组件与 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;

这是我的代码，我能够将数据存储在 firebase 实时数据库上，但无法编辑它...... 我尝试获取编辑按钮的类名，并且在目标上它会转到详细的弹出窗口，但我的代码在单击编辑按钮时更新数据， 而且我已经设置了“保存”、“更多详细信息”按钮类名称来插入数据，因此我无法重用它来进行更新。

Answer 1

您可以在调度程序的actionBegin事件中执行CRUD操作，以根据actionEventArgs中的当前操作requestType更新数据库。尝试下面的示例。

示例：https://drive.google.com/file/d/1f27vpv8en7O2hpK_1ODXViSHBOfTmkUp/view?usp=sharing