将 Syncfusion Scheduler 预约保存到数据库

Question

嗨
任何人都可以指导我通过编辑器的“保存”按钮向数据库添加新约会的过程吗？ 就像当我单击任何单元格并在编辑器中添加信息，然后单击“保存”时，它将在日历中添加约会，我也想将该约会保存到数据库

此外，添加单独预约的方法也是 Syncfusion 推荐的正确方法，因为我看到过一个示例，其中 Scheduler 顶部有一个“添加”按钮（通过 ng-template 定义），您可以在其中编写代码来调用相关 API

谢谢

Answer 1

我不知道你使用什么框架或库，但我尝试在

Ract.js.

中解决这个问题

为此，您需要使用

popupClose

属性来向其传递保存函数。

下面的代码允许我检索在事件编辑器中输入的数据并将其插入到数组中：

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 closePopup = (args) => {
  const classNameSave = args.event.target.className

  if (args.event.target.className !== moreDetails) {
    if (classNameSave === save || classNameSave === saveEvent) {
      scheduleData.push({
        Id: scheduleData.length + 1,
        Subject: args.data.Subject,
        Location: args.data.Location,
        StartTime: args.data.StartTime,
        EndTime: args.data.EndTime
      })
      console.log(scheduleData);
    }
  }
}

之后，您可以将函数传递给属性，如下所示：

return (
  <div className='m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl'>

    <ScheduleComponent
      popupClose={closePopup}
      height='650px'
      eventSettings={{ dataSource: scheduleData }}
      selectedDate={new Date(2021, 0, 10)}
    >
      <Inject services={[...]} />
    </ScheduleComponent>
  </div>
 )

这是完整的代码：

import React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, Inject } from "@syncfusion/ej2-react-schedule";
import { scheduleData } from "yourDatasource";

const Calendar = () => {

  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 closePopup = (args) => {
    const classNameSave = args.event.target.className

    if (args.event.target.className !== moreDetails) {
      if (classNameSave === save || classNameSave === saveEvent) {
        scheduleData.push({
          Id: scheduleData.length + 1,
          Subject: args.data.Subject,
          Location: args.data.Location,
          StartTime: args.data.StartTime,
          EndTime: args.data.EndTime
        })
        console.log(scheduleData);
      }
    }
  }

  return (
    <div className='m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl'>
 
      <ScheduleComponent
        popupClose={closePopup}
        height='650px'
        eventSettings={{ dataSource: scheduleData }}
        selectedDate={new Date(2021, 0, 10)}
      >
        <Inject services={[...]} />
      </ScheduleComponent>
    </div>
  )
}

export default Calendar

热烈

Answer 2

if (args.event.target.className !== moreDetails) {
      if (classNameSave === save || classNameSave === saveEvent) {
        scheduleData.push({
          Id: scheduleData.length + 1,
          Subject: args.data.Subject,
          Location: args.data.Location,
          StartTime: args.data.StartTime,
          EndTime: args.data.EndTime
        })
        console.log(scheduleData);
      }
    }
  }

开始时间：args.data.StartTime 和结束时间：args.data.EndTime 不提供数据...