We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I get the selected date value in schedule

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.

4 Replies 1 reply marked as answer

LT Le Tien Loc November 5, 2022 03:38 AM

Please help me :( 



VD Vinitha Devi Murugan Syncfusion Team November 9, 2022 07:19 AM

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);

  }


Marked as answer

LT Le Tien Loc November 9, 2022 07:56 PM

Thank you, I solved my problem. 



RV Ravikumar Venkatesan Syncfusion Team November 10, 2022 04:17 AM

We are glad that you have found the solution.


Loader.
Live Chat Icon For mobile
Up arrow icon