|
import { useState } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject, Resize, DragAndDrop, getWeekFirstDate, getWeekLastDate, addDays } from '@syncfusion/ej2-react-schedule';
import { Predicate, DataManager, Query } from "@syncfusion/ej2-data";
import { zooEventsData } from "./data";
function App() {
let scheduleObj;
let data = zooEventsData;
let dateRange = {};
const [scheduleModel, setScheduleModel] = useState({
currentAction: "InitialRendering",
currentView: "Week",
selectedDate: new Date(2021, 1, 15),
dataSource: getCurrentViewApps(new Date(2021, 1, 15), "Week", true)
});
function getCurrentViewApps(date, view, dateRangeChanged) {
if (dateRangeChanged) {
dateRange
= getViewStartEnd(date, view);
}
let predicate = new Predicate("StartTime", "greaterthanorequal", dateRange.start, false);
predicate = predicate.and("EndTime", "lessthanorequal", dateRange.end, false);
let result = new DataManager(data).executeLocal(new Query().where(predicate));
return result;
}
function getViewStartEnd(date, view) {
let start;
let end;
if (view === "Day") {
start = new Date(date);
end = addDays(new Date(date), 1);
} else if (view === "Week") {
start = getWeekFirstDate(new Date(date), 0);
end = addDays(getWeekLastDate(new Date(date), 0), 1);
} else if (view === "WorkWeek") {
start = addDays(getWeekFirstDate(new Date(date), 0), 1);
end = getWeekLastDate(new Date(date), 0);
} else if (view === "Month") {
let year = date.getFullYear();
let month = date.getMonth();
start = getWeekFirstDate(new Date(year, month, 1), 0);
end = addDays(getWeekLastDate(new Date(year, month + 1, 0), 1), 1);
}
return { start: start, end: end };
}
function onNavigating(args) {
if (args.action === "date" && scheduleModel.selectedDate !== args.currentDate) {
args.cancel = true;
let resultData = getCurrentViewApps(args.currentDate, scheduleModel.currentView, true);
setScheduleModel(prevState => ({ ...prevState, currentAction: args.action, selectedDate: args.currentDate, dataSource: resultData }));
} else if (args.action === "view" && scheduleModel.currentView !== args.currentView) {
args.cancel = true;
let resultData = getCurrentViewApps(args.currentDate, args.currentView, true);
setScheduleModel(prevState => ({ ...prevState, currentAction: args.action, currentView: args.currentView, dataSource: resultData }));
}
}
return (
<div className="App">
<ScheduleComponent width='100%' height='650px' navigating={onNavigating.bind(this)}>
</ScheduleComponent>
</div>
);
}
export default App;
|
