Cannot read properties of null (reading Value RecurrenceRule Editor)

[Phan Hu?nh Nh?t Hùng]

Hello, I'm facing with 2 issues:

I create an event, when I edit it, the recurrenceRule is null although I have set the value for it. 

How can I set the time for IsAllDay from 00:00 to 23:59. 

Here is my video for the problems. Thank you

This is my Code:

 const buttonClickActions = useCallback((action: string) => {

    let eventData: any = {};

    let actionType: CurrentAction = "Add";

    const getSlotData = () => {

      const selectedElements = scheduleObj.current?.getSelectedElements();

      if (!selectedElements) return null;

      const cellDetails = scheduleObj.current?.getCellDetails(selectedElements);

      if (!cellDetails) return null;

      const formData = scheduleObj.current?.eventWindow.getObjectFromFormData("e-quick-popup-wrapper");

      if (!formData) return null;

      const addObj: any = {};

      addObj.Id = scheduleObj.current?.getEventMaxID();

      addObj.Subject = formData.Subject && formData.Subject.length > 0 ? formData.Subject : "Add title";

      addObj.StartTime = new Date(cellDetails.startTime);

      addObj.EndTime = new Date(cellDetails.endTime);

      return addObj;

    };

    switch (action) {

      case "add":

        eventData = getSlotData();

        if (eventData) scheduleObj.current?.addEvent(eventData);

        break;

      case "edit":

        eventData = scheduleObj.current?.activeEventData?.event;

        console.log("Action Button call");

        console.log("eventData: ",eventData);

        if(eventData && eventData.recurrenceRule!==null){

          actionType = "EditSeries";

          console.log(actionType);

          eventData = scheduleObj.current?.eventBase.getParentEvent(eventData, true);

          scheduleObj.current?.openEditor(eventData,actionType);

        }

        else{

          actionType = "Save";

          console.log(actionType);

          scheduleObj.current?.openEditor(eventData,actionType);

        }

        break;

      case "delete":

        eventData = scheduleObj.current?.activeEventData?.event;

        if(eventData && eventData.recurrenceRule){

          actionType = "DeleteSeries";

          scheduleObj.current?.deleteEvent(eventData,actionType);

        }

        else{

          actionType = "Delete";

          scheduleObj.current?.deleteEvent(eventData,actionType);

        }

        break;

      case "more-details":

        eventData = getSlotData();

        if (eventData) scheduleObj.current?.openEditor(eventData, "Add", true);

        break;

      default:

        break;

    }

    scheduleObj.current?.closeQuickInfoPopup();

  }, []);

const editorWindowTemplate = (props: any) => {

    console.log(props);

    const [locations, setLocations] = useState(() => {

      if (props.place && typeof props.place === 'string') {

        try {

          return JSON.parse(props.place);

        } catch (error) {

          console.error('Error parsing place:', error);

          return []; // Đặt giá trị mặc định nếu parse thất bại

        }

      }

      return props.place || [];

    });

    const [recurrenceRule, setRecurrenceRule] = useState(props.recurrenceRule || '');

    const [isAllDay, setIsAllDay] = useState(props.allDay || false);

    const handleIsAllDayChange = (args: any) => {

      setIsAllDay(args.checked);

    };

   

    const handleRecurrenceChange = (args: any) => {

      console.log("New recurrenceRule value from editor:", args.value);

      setRecurrenceRule(args.value);

    };

    const handleLocationChange = (index: number, level: string, rooms: Array<{ id: string, name: string }>) => {

      const newLocations = [...locations];

      newLocations[index] = { level, rooms };

      setLocations(newLocations);

    };

    const addLocation = () => {

      setLocations([...locations, { level: '', rooms: [] }]);

    };

    const removeLocation = (index: number) => {

      const newLocations = locations.filter((_: any, i: number) => i !== index);

      setLocations(newLocations);

    };

    return (

      <Table>

        <TableBody>

          <TableRow>

            <TableCell colSpan={2}>

              <TextBoxComponent

                id="title"

                data-name="title"

                className="e-field"

                floatLabelType="Always"

                placeholder='Tiêu đề'

                value={props.title || ''} />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              <MultiSelectComponent

                id="EventType"

                dataSource={userMapping(userList)}

                fields={{ text: 'text', value: 'id' }}

                placeholder="Chọn người dùng"

                floatLabelType="Always"

                mode="Box"

                style={{ color: "#000" }}

                showClearButton={true}

                showDropDownIcon={true}

                filterBarPlaceholder="Tìm kiếm người dùng"

                popupHeight="200px"

                value={props.users|| []}

                className='e-field'

                allowFiltering={true}

                filterType="Contains"

                data-name="users"

              />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              <DropDownListComponent

                id="EventType"

                dataSource={calendars.map(cal => ({ text: cal.groupName, id: cal.id }))}

                fields={{ text: 'text', value: 'id' }}

                placeholder="Chọn nhóm người"

                floatLabelType="Always"

                popupHeight="200px"

                style={{ color: "#000" }}

                showClearButton={true}

                value={props.responsibleGroupId || ''}

                className='e-field'

                data-name="responsibleGroupId"

              />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell>

              <DateTimePickerComponent id="startDate" data-name="startDate" value={new Date(props.startDate)}  className='e-field' floatLabelType="Always" placeholder='Ngày bắt đầu' locale='vi' ></DateTimePickerComponent >

            </TableCell>

            <TableCell>

              <DateTimePickerComponent id="endDate" data-name="endDate" value={new Date(props.endDate || props.endDate)} className='e-field' floatLabelType="Always" placeholder='Ngày kết thúc' locale='vi'></DateTimePickerComponent>

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              <CheckBoxComponent

                id="allDay"

                checked={isAllDay}

                label="Cả ngày"

                change={handleIsAllDayChange}

                className="e-field"

                data-name="allDay"

              />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              {locations.map((location: any, index: any) => (

                <Box key={index} sx={{ mt: 2 }}>

                  <LocationSelector

                    key={index}

                    index={index}

                    data={location}

                    onChange={handleLocationChange}

                    onRemove={removeLocation} />

                </Box>

              ))}

              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', border: '1px dashed', borderRadius: '5px', cursor: 'pointer' }} onClick={addLocation}>

                <IconButton color="primary">

                  <AddIcon />

                </IconButton>

              </Box>

              <input

                type="hidden"

                className="e-field"

                data-name="place"

                value={JSON.stringify(locations)}

              />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              <RecurrenceEditorComponent

                id='recurrenceRule'

                value={recurrenceRule}

                change={handleRecurrenceChange}

                locale='vi'

              />

              <input

                type="hidden"

                data-name="recurrenceRule"

                value={recurrenceRule}

                className="e-field"

              />

            </TableCell>

          </TableRow>

          <TableRow>

            <TableCell colSpan={2}>

              <TextAreaComponent

                id="description"

                data-name='description'

                placeholder="Nhập mô tả"

                resizeMode='None'

                floatLabelType="Always"

                className="e-field"

                style={{ width: '100%' }}

                value={props.description || ''}

              />

            </TableCell>

          </TableRow>

        </TableBody>

      </Table>

    )

  }

Attachment: video_1_7baa150e.rar

[Vijay Ravi]

Hi Phan,
 

We have already logged as bug for your reported query for script error occurs while editing an event in your previous forum. You can track the status of the fix at the following link:

Forum link: https://www.syncfusion.com/forums/194681/different-between-doubleclick-and-edit-button-when-editing-an-event

Regards,

Vijay

[Phan Hu?nh Nh?t Hùng]

Hi vijay,

I have recieved your reply. Thank you for you support. I fix the problem by making a dialog and call API within it. I have 1 remaining problem and I hope you can help me with that.

1. When I click an event or a cell, if I change to another address of my website or when I click the Edit and pop up my Dialog, If I close the dialog it also appears the error (I'm not include it in my video). I think it because domjs. 
2. I want to change allDay from 00:01 to 23:59. How can I do that, because if I set it 00:00 it will missunderstood as 00:00 of the next day

Attachment: video_1_4ac79869.rar

[Swathi Ravi]

​

Hi Muhammad maddy,

1: When I click an event or a cell, if I change to another address of my website or when I click the Edit and pop up my Dialog, If I close the dialog, it also appears the error (I'm not include it in my video). I think it is because of domjs. 

For this query, we need additional information. What do you mean by "change to another address"? Please share the complete code snippets of the scheduler along with all its customizations, or replicate the issue using the sample we shared below.

2: I want to change allDay from 00:01 to 23:59. How can I do that, because if I set it 00:00 it will misunderstood as 00:00 of the next day.

You can change this by using the popupClose event, as shown in the snippets shared below.

  const onPopupClose = (args) => {

    if (args.type === 'Editor' && args.data) {

      const startTime = new Date(args.data.StartTime);

      const endTime = new Date(args.data.EndTime);

      

      // Check if both StartTime and EndTime are at 00:00:00

      if (

        startTime.getHours() === 0 && startTime.getMinutes() === 0 && startTime.getSeconds() === 0 &&

        endTime.getHours() === 0 && endTime.getMinutes() === 0 && endTime.getSeconds() === 0

      ) {

        // Mark it as an all-day event

        args.data.IsAllDay = true;

        

        // Set the start time to 00:01 and end time to 23:59 to ensure it covers the entire day

        startTime.setHours(0, 1, 0, 0);

        endTime.setHours(23, 59, 59, 999);

        args.data.StartTime = startTime;

        args.data.EndTime = endTime;

      }

    }

  };

return (<ScheduleComponent 

    popupClose={onPopupClose}>

    <ViewsDirective>

      <ViewDirective option='Month' />

    </ViewsDirective>

    <Inject services={[Day, Week, WorkWeek, Month]} />

  </ScheduleComponent>)

Sample: Gi78jq (forked) - StackBlitz

Regards,

Swathi Ravi

[Phan Hu?nh Nh?t Hùng]

Hi Swathi 
I have recieved your answer. Sorry for my first problem that I am not describing it clearly. The error is in the video below.  "Change to another address" is change to another site of the left side bar in the video. When I change to another site it will also cause the same error.

Attachment: video_1_22c35441.rar

[Swathi Ravi]

Dear Customer,

Thank you for your patience.

We reviewed the issue you reported using the sample you shared in the other forum. However, we were unable to replicate the issue on our end. Could you please try reproducing the issue with the attached sample? This will help us identify the cause more effectively and provide a solution.

We look forward to your response.

Attachment: reactscheduler_8f1df7fa.zip