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

Custom button event

Hello syncfusion team, 

Why does my code always generate a new button when I click "Thanh Toán". 

I try to follow Add custom button to Event Editor in Scheduler Forum

But it did not work for me

Any help? 

Here is my code 


import {
  Agenda,
  DragAndDrop,
  Inject,
  Resize,
  ResourceDirective,
  ResourcesDirective,
  ScheduleComponent,
  TimelineMonth,
  TimelineViews,
  ViewDirective,
  ViewsDirective,
  Day,
  Week,
} from "@syncfusion/ej2-react-schedule";
import MDBox from "components/MDBox";
import { useEffect } from "react";

import { L10n, loadCldr } from "@syncfusion/ej2-base";

import Loading from "components/Loading";
import { getFacilities } from "features/allFacilities/allFacilitiesSlice";
import { getFields } from "features/allFields/allFieldsSlice";
import { getAllReservation } from "features/allReservation/allReservationSlice";
import { useDispatch, useSelector } from "react-redux";
import * as gregorian from "./culture-file-vn/ca-gregorian.json";
import * as numberingSystems from "./culture-file-vn/numberingSystems.json";
import * as numbers from "./culture-file-vn/numbers.json";
import * as timeZoneNames from "./culture-file-vn/timeZoneNames.json";
import { Typography } from "@mui/material";
import moment from "moment";
import { useState } from "react";
import { DateTimePickerComponent } from "@syncfusion/ej2-react-calendars";
import { setCurrentDate } from "features/allReservation/allReservationSlice";
import { checkOutReservation } from "features/reservation/reservationSlice";


const Schedules = () => {
  const { facilities, isLoading } = useSelector((store) => store.allFacilities);
  const { fieldsScheduler } = useSelector((store) => store.allFields);
  const { timeSlots, isLoadingReservation } = useSelector(
    (store) => store.allReservation
  );
  let currentEventHanle;
  let flag = true;
  const handleTimeSlots = timeSlots.map((timeSlot) => {
    if (timeSlot.reservationStatus === 1) {
      return {
        ...timeSlot,
        reservationStatusCustom: false,
        descriptionStatus: "Xác nhận",
      };
    }
    if (timeSlot.reservationStatus === 2) {
      return {
        ...timeSlot,
        reservationStatusCustom: true,
        descriptionStatus: "Đã thanh toán",
      };
    }
    return { ...timeSlot };
  });
  const dispatch = useDispatch();
  const [calRef, setCalRef] = useState();
  const [selectedDate, setSelectedDate] = useState(
    moment(new Date()).format("YYYY-MM-DD[T]HH:mm:ss")
  );
  useEffect(() => {
    dispatch(getFacilities());
    dispatch(getFields());
  }, []);
  useEffect(() => {
    if (selectedDate) {
      dispatch(
        getAllReservation(moment(selectedDate).format("YYYY-MM-DD[T]HH:mm:ss"))
      );
    }
  }, [selectedDate]);

  if (isLoading && isLoadingReservation) {
    return <Loading />;
  }
  const 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 onEventRendered = (args) => {
    //1. Đặt cọc
    //2. Checkout
    if (args.data.reservationStatus === 1) {
      //Color
      args.element.style.backgroundColor = "#A0E418";
    }
    if (args.data.reservationStatus === 2) {
      args.element.style.backgroundColor = "#ae9674";
    }
  };
  const handleNavigate = (args) => {
    if (args.action === "date") {
      setSelectedDate(moment(args.currentDate).format("YYYY-MM-DD[T]HH:mm:ss"));
      dispatch(
        setCurrentDate(moment(args.currentDate).format("YYYY-MM-DD[T]HH:mm:ss"))
      );
    }
  };
  const editorContentTemplate = (props) => {
    return props !== undefined ? (
      <table
        className="custom-event-editor"
        style={{ width: "100%" }}
        cellPadding={5}
      >
        <tbody>
          <tr>
            <td className="e-textlabel">Tên</td>
            <td colSpan={4}>
              <input
                id="subject"
                className="e-field e-input"
                type="text"
                readOnly
                name="subject"
                value={props.subject}
                style={{ width: "100%" }}
              />
            </td>
          </tr>
          <tr>
            <td className="e-textlabel">Số điện thoại</td>
            <td colSpan={4}>
              <input
                id="phone"
                className="e-field e-input"
                type="text"
                readOnly
                name="phone"
                value={props.phone ? props.phone : "Không có"}
                style={{ width: "100%" }}
              />
            </td>
          </tr>
          <tr>
            <td className="e-textlabel">Tiền</td>
            <td colSpan={4}>
              <input
                id="subject"
                className="e-field e-input"
                type="text"
                readOnly
                name="rentalFee"
                value={props.rentalFee}
                style={{ width: "100%" }}
              />
            </td>
          </tr>
          <tr>
            <td className="e-textlabel">Từ</td>
            <td colSpan={4}>
             
              <DateTimePickerComponent
                id="startTime"
                format="dd/MM/yy hh:mm a"
                data-name="startTime"
                value={props.startTime || props.StartTime}
                className="e-field"
              ></DateTimePickerComponent>
            </td>
          </tr>
          <tr>
            <td className="e-textlabel">Đến</td>
            <td colSpan={4}>
             
              <DateTimePickerComponent
                id="endTime"
                format="dd/MM/yy hh:mm a"
                data-name="endTime"
                value={props.endTime || props.EndTime}
                className="e-field"
              ></DateTimePickerComponent>
            </td>
          </tr>
        </tbody>
      </table>
    ) : (
      <div></div>
    );
  };

  const onEventClick = (args) => {
    currentEventHanle = calRef.getEventDetails(args.element);
  };

  const confirmReservation = (args) => {
    const eventData =
      calRef.eventWindow.getObjectFromFormData("e-schedule-dialog");
    console.log("HANDLE", currentEventHanle);
    currentEventHanle.startTime = moment(currentEventHanle.startTime).format(
      "YYYY-MM-DD[T]HH:mm:ss"
    );
    currentEventHanle.endTime = moment(currentEventHanle.endTime).format(
      "YYYY-MM-DD[T]HH:mm:ss"
    );
    console.log("Done Handle", currentEventHanle);

    const eventDataFinal = { ...eventData, ...currentEventHanle };
    console.log("Confirm reservation", eventDataFinal);
    if (eventDataFinal.reservationStatus === 1) {
      dispatch(checkOutReservation(eventDataFinal.reservationId));
    }
    calRef.refreshEvents();
    dialogClose();
  };

  const alertFunction = (args) => {
    alert('Hello world')

    dialogClose();
  };
  const dialogClose = () => {
    calRef.closeEditor();
  };

  const onPopupOpen = (args) => {
    if (args.type === "Editor") {
      if (flag) {
        let dialogObj = args.element.ej2_instances[0];
        let buttons = dialogObj.buttons;
        buttons.push({
          buttonModel: { content: "Thanh toán", isPrimary: true },
          click: () => confirmReservation(args),
        });
        dialogObj.setProperties({ buttons: buttons });
        flag = false;
      }
      if (!flag) {
        var isApp = args.target.classList.contains("e-appointment");
        if (isApp) {
          let currentEventDetails = calRef.getEventDetails(args.target);
          // currentEventDetails.startTime = moment(
          //   currentEventDetails.startTime
          // ).format("dd/MM/yy hh:mm");
          // currentEventDetails.endTime = moment(
          //   currentEventDetails.endTime
          // ).format("dd/MM/yy hh:mm");
          // console.log("DETAIL", currentEventDetails);
          // dispatch(setCurrentEvent(currentEventDetails));
          // dispatch(setCurrentEvent(calRef.getEventDetails(args.target)));
        }
        args.element.querySelector(".e-event-save").style.display = "none";
        // args.element.querySelector("#delete").style.display = "none";
        // args.element.querySelector("#add").style.display = isApp ? "none" : "";
      }
    }
  };
  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="800px"
        locale="vi"
        currentView="TimelineDay"
        allowDragAndDrop={false}
        selectedDate={selectedDate}
        ref={(t) => setCalRef(t)}
        navigating={handleNavigate}
        eventClick={onEventClick}
        popupOpen={(args) => onPopupOpen(args)}
        editorTemplate={editorContentTemplate}
        eventRendered={onEventRendered}
        timeScale={{ enable: true, interval: 30, slotCount: 2 }}
        eventSettings={{
          dataSource: handleTimeSlots,
          fields: {
            subject: { name: "subject" },
            id: "reservationId",
            endTime: { name: "endTime" },
            startTime: { name: "startTime" },
            rentalFee: { name: "rentalFee", title: "Phí thuê sân" },
            description: { name: "descriptionStatus", title: "Mô tả" },
            isReadonly: "reservationStatusCustom",
          },
          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;


1 Reply

SR Swathi Ravi Syncfusion Team November 18, 2022 08:32 AM

Hi Le Tien Loc,


Greetings from Syncfusion Support.


We are unable to reproduce your reported issue at our end. Check out our shared sample and if you are still facing the issue, provide the following information to check further.


  • Issue reproducing steps or issue reproducing video demo. 
  • Reproduce the issue using our shared sample or
  • Sample demonstrating the issue


Sample: https://stackblitz.com/edit/react-schedule-footer-button-customization-sample-rqedow?file=index.js



Regards,

Swathi


Loader.
Live Chat Icon For mobile
Up arrow icon