How can I get the selected date value in schedule

[Le Tien Loc]

Hi Syncfusion team,

I'm using schedule syncfusion to display the event data, for each time I select a date, the events will be exposed from API. Because I didn't get the selected date value to send my server.

I have tried using onDataBinding with this code below. But each re-render, it always returns the current day, not my selected date.

const Schedules = () => {

  const { facilities } = useSelector((store) => store.allFacilities);

  const { fieldsScheduler } = useSelector((store) => store.allFields);

  const { timeSlots, isLoadingReservation, currentDate } = useSelector(

    (store) => store.allReservation

  );

  useEffect(() => {

    dispatch(getFacilities());

    dispatch(getFields());

    dispatch(getAllReservation(currentDate));

  }, []);

  const dispatch = useDispatch();

  if (isLoadingReservation) {

    return <Loading />;

  }

eventTemplate = (props) => {

    return (

      <>

        <div>

          <Typography variant="p">

            {`${props.subject}:  ${props.rentalFee}`}K

          </Typography>

        </div>

        <div>

          <Typography variant="p">{`${moment(props.startTime, "HHmm").format(

            "HH:mm"

          )} - ${moment(props.endTime, "HHmm").format("HH:mm")} `}</Typography>

        </div>

      </>

    );

  };

  const onDataBinding = () => {

    var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

    var currentViewDates = scheduleObj.getCurrentViewDates();

    var startDate = currentViewDates[0];

    var endDate = currentViewDates[currentViewDates.length - 1];

    console.log("Start date", startDate);

    // dispatch(setCurrentDate(moment(startDate).format("YYYY-MM-DD[T]HH:mm:ss")));

    // dispatch(

    //   getAllReservation(moment(startDate).format("YYYY-MM-DD[T]HH:mm:ss")) <------ Loop

    // );

  };

  return (

    <MDBox

      width="100%"

      height="100%"

      minHeight="100vh"

      borderRadius="lg"

      shadow="lg"

      bgColor="white"

      sx={{ overflowX: "hidden" }}

    >

      <ScheduleComponent

        cssClass="timeline-resource-grouping"

        width="100%"

        height="100%"

        locale="vi"

        readonly={true}

        currentView="TimelineDay"

        allowDragAndDrop={false}

// Also i don't know how to use this in my project :(, eventhougt, i try many way

        ref={(schedule) => (this.scheduleObj = schedule)}

        // dataBinding={onDataBinding}

        eventSettings={{

          dataSource: timeSlots,

          fields: {

            subject: { name: "subject" },

            id: "reservationId",

            endTime: { name: "endTime" },

            startTime: { name: "startTime" },

            rentalFee: { name: "rentalFee", title: "Phí thuê sân" },

          },

          template: eventTemplate.bind(this),

        }}

        group={{ resources: ["Facilities", "Fields"] }}

      >

        <ResourcesDirective>

          <ResourceDirective

            field="facilityId"

            title="Chọn cơ sở"

            name="Facilities"

            allowMultiple={false}

            dataSource={facilities}

            textField="facilityName"

            idField="id"

          ></ResourceDirective>

          <ResourceDirective

            field="fieldId"

            title="Sân"

            name="Fields"

            allowMultiple={true}

            dataSource={fieldsScheduler}

            textField="fieldName"

            idField="id"

            groupIDField="facilityId"

            colorField="color"

          ></ResourceDirective>

        </ResourcesDirective>

        <ViewsDirective>

          <ViewDirective option="TimelineDay" />

          <ViewDirective option="Day" />

        </ViewsDirective>

        <Inject

          services={[

            Day,

            Week,

            TimelineViews,

            TimelineMonth,

            Agenda,

            Resize,

            DragAndDrop,

          ]}

        />

      </ScheduleComponent>

    </MDBox>

  );

};

export default Schedules;

Also, i use `useEffect` to call request then display data on my schedule.

[Le Tien Loc]

Please help me :( 

[Vinitha Devi Murugan]

You can get the selected date value by making use of selectedDate property of our scheduler using the below code. Try the attached sample and let us know if you need any assistance.

https://stackblitz.com/edit/react-get-selected-date-in-databinding-event?file=index.js

function
onDataBinding(args) {

    // Get selected date

    var
scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];

    console.log(scheduleObj.selectedDate);

  }

[Le Tien Loc]

Thank you, I solved my problem. 

[Ravikumar Venkatesan]

We are glad that you have found the solution.