如何修改Syncfusion React日程组件中全天选项的默认勾选状态

在Month视图下双击创建事件时，Schedule组件会默认把选中的时间段判定为全天，自动勾选“全天”复选框，这时候通过eventSettings.fields.isAllDay.default设置默认值会被组件内置逻辑覆盖，导致不生效。

要解决这个问题，你可以通过监听popupOpen事件，在弹窗打开前手动修改isAllDay字段的值：

步骤1：添加popupOpen事件监听 #

在ScheduleComponent上添加popupOpen属性，绑定处理函数：

<ScheduleComponent
  height='600px'
  currentView='Month'
  eventSettings={{
    fields: {
      subject: { title: 'Work', name: 'Subject', default: 'Type of work' },
      description: { title: 'Comment', name: 'Description' },
      startTime: { title: 'From', name: 'StartTime' },
      endTime: { title: 'To', name: 'EndTime' },
      isAllDay: { name: 'isAllDay', default: false, title: 'All Day', validation: {} }
    }
  }}
  popupOpen={onPopupOpen}
>
  <ViewsDirective>
    <ViewDirective option='Day' startHour='05:00' endHour='22:00'></ViewDirective>
    <ViewDirective option='Week' />
    <ViewDirective option='Month' />
  </ViewsDirective>
  <Inject
    services={[Month, Week, Resize, Day, DragAndDrop]}
  />
</ScheduleComponent>

步骤2：编写事件处理函数 #

定义onPopupOpen函数，判断是新增事件弹窗时，强制设置isAllDay为false：

const onPopupOpen = (args) => {
  // 仅针对新增事件的弹窗生效
  if (args.type === 'Add') {
    // 修改表单字段值
    args.form.ej2Instances.fields.isAllDay.value = false;
    // 同步修改事件数据
    args.data.isAllDay = false;
  }
};

这样设置后，双击Month视图创建事件时，“全天”复选框就会默认处于未勾选状态了。

内容的提问来源于stack exchange，提问作者MVB