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.