java - React Scheduler 数据更新问题

Question

我有一个真正的交易，我无法接受。我在 ReactJS 中使用 ScheduleComponent 创建日历和一些约会。

这是我使用 ScheduleComponent 的组件。我不知道如何从我的 API 更新一些数据。

const CalendarComponent = () => {

    const [schedules, setSchedules] = useState([]);

    const dataManager = new DataManager({
        url: `http://localhost:8080/schedule/calendar`,
        crudUrl: `http://localhost:8080/schedule/updateCalendar`,
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    return(
            <section className="adminSection">

                <ScheduleComponent width='100%' currentView='Month' eventSettings={{dataSource: dataManager}}>
                    <ViewsDirective>
                        <ViewDirective option='Day'/>
                        <ViewDirective option='Week'/>
                        <ViewDirective option='Month'/>
                        <ViewDirective option='Agenda'/>
                        <ViewDirective option='MonthAgenda'/>
                        <ViewDirective option='TimelineDay'/>
                        <ViewDirective option='TimelineMonth'/>

                    </ViewsDirective>
                    <Inject services={[Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineViews, TimelineMonth]} />
                </ScheduleComponent>
           
            </section>
    );

};
export default CalendarComponent;

还有我的 Java ScheduleResponse 用于从数据库中获取适当的数据。

public record ScheduleResponse(
        @JsonProperty("StartTime") LocalDateTime startTime,
        @JsonProperty("EndTime") LocalDateTime endTime,
        @JsonProperty("Subject") String subject
) {
    public static ScheduleResponse fromSchedule(Schedule schedule){
        return new ScheduleResponse(
                schedule.getDateTimeFrom(),
                schedule.getDateTimeTo(),
                schedule.getSubject());
    }
}

我想知道如何使用此组件从 dataSource 引用单个数据，但我不知道。

标签： javareactjsschedulersyncfusion

Answer 1

我们建议您使用 Query 的 addParams 来处理服务器中的过滤，为此我们在下面准备了一个示例。

服务：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/Service-294388409 示例：https ://stackblitz.com/edit/add-param-front-end?file=index.js

在上面基于主题字段的示例中，我们过滤了来自后端的数据。

UG 链接： https ://ej2.syncfusion.com/react/documentation/schedule/data-binding/#passing-additional-parameters-to-the-server

客户端代码

 public onCheckBoxChange(): void {
    let predicate: any;
    const checkBoxes: CheckBox[] = [this.confirmObj];
    checkBoxes.forEach((checkBoxObj: CheckBox) => {
      if (checkBoxObj.checked) {
        predicate = predicate ? predicate + ',' + checkBoxObj.label : checkBoxObj.label;
      }
    });
    this.scheduleObj.eventSettings.query = new Query().addParams(
      'Subject',
      predicate ? predicate : ''
    );
  }

服务器端代码：

public JsonResult LoadData(Params param)  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler
{
    DateTime start = param.StartDate;
    DateTime end = param.EndDate;
    var subject = param.Subject;
    var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value.
          
    if (param.Subject != null)
    {
        // Filter data based on additional parameter
        data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end && app.Subject == subject) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();
    }
    return Json(data, JsonRequestBehavior.AllowGet);
}
public class Params
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Subject { get; set; }
}