Untitled
unknown
plain_text
2 years ago
66 kB
13
Indexable
THiS IS SCRIPT JS
// // import { useState, useEffect } from "react";
// // import axios from "axios";
// // import FullCalendar, { formatDate } from "@fullcalendar/react";
// // import dayGridPlugin from "@fullcalendar/daygrid";
// // import PlusIcon from "@heroicons/react/24/solid/PlusIcon";
// // import timeGridPlugin from "@fullcalendar/timegrid";
// // import interactionPlugin from "@fullcalendar/interaction";
// // import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
// // import { useNavigate, useParams } from "react-router-dom";
// // import { Button, Container, Stack, SvgIcon, duration } from "@mui/material";
// // import listPlugin from "@fullcalendar/list";
// // import { ToastContainer, toast } from "react-toastify";
// // import "react-toastify/dist/ReactToastify.css";
// // import { startOfMonth, set, formatISO, addHours } from "date-fns";
// // import { utcToZonedTime } from "date-fns-tz";
// // import { parse, format } from "date-fns";
// // import Timeline from "react-calendar-timeline";
// // // make sure you include the timeline stylesheet or the timeline will not be styled
// // import "react-calendar-timeline/lib/Timeline.css";
// // import moment from "moment";
// // import {
// // Box,
// // List,
// // ListItem,
// // ListItemText,
// // Typography,
// // useTheme,
// // } from "@mui/material";
// // import Header from "../../components/Header";
// // import { tokens } from "../../theme";
// // import { number } from "yup";
// // const Calendar = () => {
// // const theme = useTheme();
// // const navigate = useNavigate();
// // const colors = tokens(theme.palette.mode);
// // const [currentEvents, setCurrentEvents] = useState([]);
// // const [data, setData] = useState([]);
// // const [leaves, setLeaves] = useState([]);
// // const [shifts, setShifts] = useState([]);
// // const [names, setNames] = useState([]);
// // const [heads, setHead] = useState([]);
// // const updatedMonitorArray = [];
// // const [userMonitorData, setUserMonitorData] = useState([]);
// // let ids = new Set();
// // const array = [3];
// // useState("");
// // const notify = () => toast("Wow so easy!");
// // const [usershift, setuserShift] = useState([]);
// // useEffect(() => {
// // axios
// // .get("http://localhost:5000/getheads")
// // .then((res) => {
// // if (res.status === 200) {
// // setHead(res.data);
// // console.log(res.data);
// // } else {
// // alert("Error");
// // }
// // })
// // .catch((err) => console.log(err));
// // }, []);
// // const fetchDataAndSetState = () => {
// // axios
// // .get("http://localhost:5000/userstiming")
// // .then((res) => {
// // if (res.status === 200) {
// // setData(res.data);
// // // console.log("Hitest", res.data);
// // } else {
// // alert("Error");
// // }
// // })
// // .catch((err) => console.log(err));
// // };
// // const fetchUserShift = () => {
// // axios
// // .get("http://localhost:5000/usershift")
// // .then((res) => {
// // if (res.status === 200) {
// // setuserShift(res.data);
// // } else {
// // alert("Error");
// // }
// // })
// // .catch((err) => console.log(err));
// // };
// // useEffect(() => {
// // const namesArray = data.map((item) => {
// // // Extract the 'start' and 'end' values from each 'usershifts' item
// // const shifts = item.usershifts.map((shift) => ({
// // id: shift.id,
// // name: item.name,
// // start: shift.start.replace("T", " ").replace("Z", ""),
// // end: shift.end.replace("T", " ").replace("Z", ""),
// // }));
// // // Return the shifts for this item
// // return shifts;
// // });
// // // Flatten the array of arrays into a single array
// // const flattenedArray = namesArray.flat();
// // setNames(flattenedArray);
// // }, [data]);
// // useEffect(() => {
// // // Create the initial events using 'names' once it's available
// // const initialEvents = names.map((item) => ({
// // id: item.id,
// // title: item.name,
// // start: item.start,
// // // end: item.end, // You can set the date as needed
// // }));
// // // Set the initial events in state
// // setCurrentEvents(initialEvents);
// // }, [names]);
// // useEffect(() => {
// // fetchDataAndSetState();
// // fetchUserShift();
// // }, []);
// // const handleDateClick = (selected) => {
// // const title = prompt("Please enter a new title for your event");
// // const calendarApi = selected.view.calendar;
// // calendarApi.unselect();
// // if (title) {
// // calendarApi.addEvent({
// // id: `${selected.dateStr}-${title}`,
// // title,
// // start: selected.startStr,
// // end: selected.endStr,
// // allDay: selected.allDay,
// // });
// // }
// // };
// // const handleEventClick = (selected) => {
// // if (
// // window.confirm(
// // `Are you sure you want to delete the event '${selected.event.title}'`
// // )
// // ) {
// // selected.event.remove();
// // }
// // };
// // var date = new Date();
// // //Shift Api
// // useEffect(() => {
// // axios
// // .get("http://localhost:5000/getshifts/")
// // .then((res) => {
// // if (res.status === 200) {
// // setShifts(res.data);
// // } else {
// // alert("Error");
// // }
// // })
// // .catch((err) => console.log(err));
// // }, []);
// // //Leave Api
// // useEffect(() => {
// // axios
// // .get("http://localhost:5000/getleave")
// // .then((res) => {
// // if (res.status === 200) {
// // setLeaves(res.data);
// // } else {
// // alert("Error");
// // }
// // })
// // .catch((err) => console.log(err));
// // }, []);
// // //Leave
// // const userHasLeaveOnDate = (userId, checkDate) => {
// // const leaveOnDate = leaves.find((leave) => {
// // // Parse the original date string
// // const parsedDate = parse(
// // leave.start,
// // "EEEE do MMMM yyyy h:mma",
// // new Date()
// // );
// // // Format the parsed date to only include the date part
// // const formattedDate = format(parsedDate, "yyyy-MM-dd");
// // // Format checkDate to only include the date part
// // // const formattedCheckDate = format(checkDate, "yyyy-MM-dd");
// // const formattedCheckDate = checkDate.substring(0, 10);
// // if (leave.userId == userId && formattedDate == formattedCheckDate) {
// // }
// // return leave.userId === userId && formattedDate === formattedCheckDate;
// // });
// // return leaveOnDate !== undefined;
// // };
// // //Random
// // function getRandomDate(date, start) {
// // date.setUTCHours(start, 0, 0, 0);
// // return date;
// // }
// // //SCHEDULES
// // function schedule(date, duration) {
// // var initialDate = new Date(date);
// // initialDate.setHours(initialDate.getHours() + duration);
// // var newDateString = initialDate.toString();
// // return newDateString;
// // }
// // //end
// // function convertDateFormat(inputDate) {
// // const date = new Date(inputDate);
// // const year = date.getFullYear();
// // const month = String(date.getMonth() + 1).padStart(2, "0"); // Month is zero-based
// // const day = String(date.getDate()).padStart(2, "0");
// // const hours = String(date.getHours()).padStart(2, "0");
// // // Set the minutes to 0
// // const minutes = "00";
// // // Return the formatted date string
// // return `${year}-${month}-${day} ${hours}:${minutes}:00`;
// // }
// // function shuffleArray(array) {
// // for (let i = array.length - 1; i > 0; i--) {
// // const j = Math.floor(Math.random() * (i + 1));
// // [array[i], array[j]] = [array[j], array[i]];
// // }
// // return array;
// // }
// // const getUserHoursWorked = (userId, duration) => {
// // const userMonitorIndex = updatedMonitorArray.findIndex(
// // (entry) => entry.userId === userId
// // );
// // // If the user is in the array, update the worked hours and return
// // if (userMonitorIndex !== -1) {
// // const userMonitorEntry = updatedMonitorArray[userMonitorIndex];
// // // Subtract the worked hours from the initial total hours
// // const remainingHours = userMonitorEntry.hoursworked - duration;
// // // Update the hoursworked for the existing entry in updatedMonitorArray
// // updatedMonitorArray[userMonitorIndex].hoursworked =
// // remainingHours < 0 ? 0 : remainingHours;
// // return remainingHours < 0 ? 0 : remainingHours;
// // }
// // // If the user is not in the array, calculate the initial total hours
// // const userTotalHours = 160;
// // // Subtract the worked hours from the initial total hours
// // const remainingHours = userTotalHours - duration;
// // // Create a new entry for the user and add it to the updatedMonitorArray
// // updatedMonitorArray.push({
// // userId: userId,
// // hoursworked: remainingHours < 0 ? 0 : remainingHours,
// // });
// // // Return the remaining hours
// // return remainingHours < 0 ? 0 : remainingHours;
// // };
// // var hours;
// // const assignedShiftsForDay = new Set();
// // // //USERMONITOR
// // // const updatedmonitor = {
// // // userId: id,
// // // name: shiftname,
// // // start: start,
// // // hoursworked: duration,
// // // };
// // const handleSubmits = (
// // datas,
// // start,
// // duration,
// // maxcust,
// // date,
// // shiftname,
// // roleId,
// // maxrole
// // ) => {
// // //pass in 2ic id here also, if not then value would be null
// // let count = 0;
// // const randomDate = getRandomDate(date, start);
// // const shuffledIds = shuffleArray(data.map((item) => item.id));
// // const before = convertDateFormat(randomDate);
// // shuffledIds.forEach((id) => {
// // if (
// // count < maxcust &&
// // !assignedShiftsForDay.has(id) &&
// // !userHasLeaveOnDate(id, before)
// // //if cc_id exists --> generate for that day
// // ) {
// // if (getUserHoursWorked(id, duration) > 0) {
// // assignedShiftsForDay.add(id);
// // const schedules = schedule(randomDate, duration);
// // const before = convertDateFormat(randomDate);
// // const after = convertDateFormat(schedules);
// // //USERSHIFT
// // const updatedDate = {
// // start: before,
// // end: after,
// // shiftId: datas,
// // userId: id,
// // };
// // axios
// // .post("http://localhost:5000/userposttiming/" + datas, updatedDate)
// // .then((response) => {
// // if (response.status === 200) {
// // fetchDataAndSetState();
// // // navigate("/calendar");
// // }
// // })
// // .catch((err) => console.log(err));
// // count++;
// // if (count >= maxcust) {
// // return;
// // }
// // }
// // }
// // });
// // // if(roleId !== null){
// // // console.log("YASSSSSS for", roleId);
// // // heads.forEach((head) => {
// // // // if (head.roleId === roleId) {
// // // // console.log("Matching head found! Head ID:", head.roleId);
// // // // const schedules = schedule(randomDate, duration);
// // // // const before = convertDateFormat(randomDate);
// // // // const after = convertDateFormat(schedules);
// // // // console.log("HEAD TIME", before, after, datas, head.roleId);
// // // // //USERSHIFT
// // // // // const updatedRoleDate = {
// // // // // start: before,
// // // // // end: after,
// // // // // shiftId: datas,
// // // // // userId: head.id,
// // // // // };
// // // // // axios
// // // // // .post("http://localhost:5000/userposttiming/" + datas, updatedRoleDate)
// // // // // .then(
// // // // // (response) => {
// // // // // if (response.status === 200) {
// // // // // fetchDataAndSetState();
// // // // // // navigate("/calendar");
// // // // // }
// // // // // }
// // // // // )
// // // // // .catch((err) => console.log(err));
// // // // }
// // // });
// // // }
// // //if statement , 2ic exists takes that id and name and pass in updated monitor 2IC (if not then 2ic NULL)
// // //if roles exists then data.map with the role one and choose the name.
// // //and one of the 2ic to put there random...
// // //take the users data and check where the id falls
// // //runs shuffleids on that
// // //
// // //
// // //2ic ...
// // //add extra 2ic there
// // //
// // };
// // const showConfirmation = () => {
// // if (window.confirm("Confirm generating new schedule for employees?")) {
// // // User pressed OK, call handleSubmits
// // const totalShifts = shifts.length;
// // const date = new Date(); // Get the current date and time
// // const year = date.getFullYear();
// // const month = date.getMonth();
// // const totalDays = new Date(year, month + 1, 0).getDate();
// // const addedDates = new Set();
// // let i = 1;
// // while (i <= totalDays) {
// // //I <= TOTAL DAYS IN THE MONTHS
// // assignedShiftsForDay.clear();
// // date.setDate(
// // Math.floor(Math.random() * new Date(year, month + 1, 0).getDate()) + 1
// // );
// // if (!addedDates.has(date.toDateString())) {
// // addedDates.add(date.toDateString());
// // shifts.map((item) =>
// // handleSubmits(
// // item.id,
// // item.start,
// // item.duration,
// // item.maxcust,
// // date,
// // item.name,
// // item.roleId,
// // item.maxrole
// // )
// // );
// // i++;
// // }
// // }
// // //While i < alltotalshifts
// // //
// // } else {
// // // User canceled, you can handle this case if needed
// // // For example, show a different message or take other actions
// // }
// // };
// // const showConfirmationReset = () => {
// // if (window.confirm("Confirm Deletion of Shifts?")) {
// // // User pressed OK, call handleSubmits
// // deleteShift();
// // fetchDataAndSetState();
// // // fetchUserShift();
// // } else {
// // // User canceled, you can handle this case if needed
// // // For example, show a different message or take other actions
// // }
// // };
// // const deleteShift = () => {
// // // Get the current date
// // const currentDate = new Date();
// // // Get the first day of the current month
// // const firstDayOfMonth = startOfMonth(currentDate);
// // // Set the time to 7 AM
// // const startTime = set(firstDayOfMonth, {
// // hours: 7,
// // minutes: 0,
// // seconds: 0,
// // milliseconds: 0,
// // });
// // // Adjust for daylight saving time
// // const adjustedTime = addHours(
// // startTime,
// // new Date().getTimezoneOffset() / 60
// // );
// // // Format the date in the required format (2023-11-01T07:00:00.000Z)
// // const formattedDate = formatISO(adjustedTime);
// // // Make the DELETE request with the formatted date as a parameter
// // axios
// // .delete(`http://localhost:5000/deleteshifts/${formattedDate}`)
// // .then((response) => {
// // if (response.status === 200) {
// // // Assuming fetchDataAndSetState is a function that updates your React component's state
// // fetchDataAndSetState();
// // // Assuming navigate is a function for navigation
// // // navigate("/calendar");
// // }
// // })
// // .catch((err) => console.log(err));
// // };
// // return (
// // <Box m="20px">
// // <Header title="Calendar" subtitle="Generate and View Schedules" />
// // <div style={{ marginBottom: 10 }}>
// // <Button
// // onClick={showConfirmation}
// // startIcon={
// // <SvgIcon fontSize="small">
// // <PlusIcon />
// // </SvgIcon>
// // }
// // variant="contained"
// // color="secondary"
// // >
// // Generate
// // </Button>
// // <Button
// // style={{ marginLeft: 5 }}
// // onClick={showConfirmationReset}
// // startIcon={
// // <SvgIcon fontSize="small">
// // <PlusIcon />
// // </SvgIcon>
// // }
// // variant="contained"
// // color="error"
// // >
// // Reset
// // </Button>
// // </div>
// // <Box display="flex" justifyContent="space-between">
// // {/* CALENDAR SIDEBAR */}
// // {/* <Box
// // flex="1 1 20%"
// // backgroundColor={colors.primary[400]}
// // p="15px"
// // borderRadius="4px"
// // >
// // <Typography variant="h5">Events</Typography>
// // <List>
// // {currentEvents.map((event) => (
// // <ListItem
// // key={event.id}
// // sx={{
// // backgroundColor: colors.greenAccent[500],
// // margin: "10px 0",
// // borderRadius: "2px",
// // }}
// // >
// // <ListItemText
// // primary={event.title}
// // secondary={
// // <Typography>
// // {formatDate(event.start, {
// // year: "numeric",
// // month: "short",
// // day: "numeric",
// // })}
// // </Typography>
// // }
// // />
// // </ListItem>
// // ))}
// // </List>
// // </Box> */}
// // {/* CALENDAR */}
// // <Box flex="1 1 100%" ml="0px">
// // <FullCalendar
// // height="75vh"
// // plugins={[
// // dayGridPlugin,
// // timeGridPlugin,
// // interactionPlugin,
// // listPlugin,
// // ]}
// // headerToolbar={{
// // left: "prev,next today",
// // center: "title",
// // right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
// // }}
// // initialView="customTimeGrid"
// // views={{
// // customTimeGrid: {
// // type: 'timeGrid',
// // duration: { days: 13 }, // Set the duration to display 10 days
// // buttonText: '10 Days', // Custom button text
// // },
// // }}
// // editable={true}
// // selectable={true}
// // selectMirror={true}
// // dayMaxEvents={true}
// // select={handleDateClick}
// // eventClick={handleEventClick}
// // events={currentEvents}
// // />
// // {/* <FullCalendar
// // height="75vh"
// // plugins={[timeGridPlugin, interactionPlugin, listPlugin]}
// // headerToolbar={{
// // left: "prev,next today",
// // center: "title",
// // right: "customTimeGridMonth,timeGridWeek,timeGridDay,listMonth",
// // }}
// // initialView="customTimeGridMonth"
// // views={{
// // customTimeGridMonth: {
// // type: "timeGrid",
// // duration: { months: 1 }, // Display one month at a time
// // buttonText: "Month", // Display as "Month" in the button
// // slotDuration: { days: 1 }, // Display one day at a time
// // slotLabelFormat: { day: "numeric", month: "numeric" }, // Display day and month
// // },
// // }}
// // editable={true}
// // selectable={true}
// // selectMirror={true}
// // dayMaxEvents={true}
// // select={handleDateClick}
// // eventClick={handleEventClick}
// // events={currentEvents}
// // /> */}
// // </Box>
// // </Box>
// // </Box>
// // );
// // };
// // export default Calendar;
// // Importing required modules
// import { setCulture, L10n, loadCldr } from '@syncfusion/ej2-base';
// import { ScheduleComponent, Day, Week, WorkWeek, Month, Year, TimelineViews, TimelineMonth, TimelineYear, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop, Agenda, Print, ExcelExport, ICalendarImport, ICalendarExport, Timezone } from '@syncfusion/ej2-react-schedule';
// // Import the Syncfusion licensing module
// import * as ej from '@syncfusion/ej2-react-base';
// import * as React from 'react';
// import './overview.css';
// import { Fragment, useEffect, useRef, useState } from 'react';
// import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
// import { DropDownListComponent, MultiSelectComponent, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
// import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
// import { ToolbarComponent, ItemsDirective, ItemDirective, ContextMenuComponent, AppBarComponent } from '@syncfusion/ej2-react-navigations';
// // import { ScheduleComponent, Day, Week, WorkWeek, Month, Year, TimelineViews, TimelineMonth, TimelineYear, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop, Agenda, Print, ExcelExport, ICalendarImport, ICalendarExport, Timezone } from '@syncfusion/ej2-react-schedule';
// import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
// import { addClass, Browser, closest, extend, Internationalization, isNullOrUndefined, removeClass, remove, compile } from '@syncfusion/ej2-base';
// import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
// import { tz } from 'moment-timezone';
// import { EJ } from '@syncfusion/ej2-react-base';
// import { setLicense } from '@syncfusion/ej2-base';// Import setLicense from ej2-react-base
// import { registerLicense } from '@syncfusion/ej2-base';
// const Overview = () => {
// registerLicense('ORg4AjUWIQA/Gnt2UVhhQlVFfV5dXGRWfFN0QXNfdVtzflFFcDwsT3RfQF5iS39bd0xmWXxWdnxdQg==');
// const [currentView, setCurrentView] = useState('Week');
// const [isTimelineView, setIsTimelineView] = useState(false);
// let scheduleObj = useRef(null);
// let contextMenuObj = useRef(null);
// let timeBtn = useRef(null);
// let selectedTarget;
// let intl = new Internationalization();
// let workWeekObj = useRef(null);
// let resourceObj = useRef(null);
// let liveTimeInterval;
// const weekDays = [
// { text: 'Sunday', value: 0 },
// { text: 'Monday', value: 1 },
// { text: 'Tuesday', value: 2 },
// { text: 'Wednesday', value: 3 },
// { text: 'Thursday', value: 4 },
// { text: 'Friday', value: 5 },
// { text: 'Saturday', value: 6 }
// ];
// const exportItems = [
// { text: 'iCalendar', iconCss: 'e-icons e-export' },
// { text: 'Excel', iconCss: 'e-icons e-export-excel' }
// ];
// const contextMenuItems = [
// { text: 'New Event', iconCss: 'e-icons e-plus', id: 'Add' },
// { text: 'New Recurring Event', iconCss: 'e-icons e-repeat', id: 'AddRecurrence' },
// { text: 'Today', iconCss: 'e-icons e-timeline-today', id: 'Today' },
// { text: 'Edit Event', iconCss: 'e-icons e-edit', id: 'Save' },
// { text: 'Delete Event', iconCss: 'e-icons e-trash', id: 'Delete' },
// {
// text: 'Delete Event', id: 'DeleteRecurrenceEvent', iconCss: 'e-icons e-trash',
// items: [
// { text: 'Delete Occurrence', id: 'DeleteOccurrence' },
// { text: 'Delete Series', id: 'DeleteSeries' }
// ]
// },
// {
// text: 'Edit Event', id: 'EditRecurrenceEvent', iconCss: 'e-icons e-edit',
// items: [
// { text: 'Edit Occurrence', id: 'EditOccurrence' },
// { text: 'Edit Series', id: 'EditSeries' }
// ]
// }
// ];
// const calendarCollections = [
// { CalendarText: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081' },
// { CalendarText: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },
// { CalendarText: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },
// { CalendarText: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }
// ];
// const timezoneData = [
// { text: 'UTC -12:00', value: 'Etc/GMT+12' },
// { text: 'UTC -11:00', value: 'Etc/GMT+11' },
// { text: 'UTC -10:00', value: 'Etc/GMT+10' },
// { text: 'UTC -09:00', value: 'Etc/GMT+9' },
// { text: 'UTC -08:00', value: 'Etc/GMT+8' },
// { text: 'UTC -07:00', value: 'Etc/GMT+7' },
// { text: 'UTC -06:00', value: 'Etc/GMT+6' },
// { text: 'UTC -05:00', value: 'Etc/GMT+5' },
// { text: 'UTC -04:00', value: 'Etc/GMT+4' },
// { text: 'UTC -03:00', value: 'Etc/GMT+3' },
// { text: 'UTC -02:00', value: 'Etc/GMT+2' },
// { text: 'UTC -01:00', value: 'Etc/GMT+1' },
// { text: 'UTC +00:00', value: 'Etc/GMT' },
// { text: 'UTC +01:00', value: 'Etc/GMT-1' },
// { text: 'UTC +02:00', value: 'Etc/GMT-2' },
// { text: 'UTC +03:00', value: 'Etc/GMT-3' },
// { text: 'UTC +04:00', value: 'Etc/GMT-4' },
// { text: 'UTC +05:00', value: 'Etc/GMT-5' },
// { text: 'UTC +05:30', value: 'Asia/Calcutta' },
// { text: 'UTC +06:00', value: 'Etc/GMT-6' },
// { text: 'UTC +07:00', value: 'Etc/GMT-7' },
// { text: 'UTC +08:00', value: 'Etc/GMT-8' },
// { text: 'UTC +09:00', value: 'Etc/GMT-9' },
// { text: 'UTC +10:00', value: 'Etc/GMT-10' },
// { text: 'UTC +11:00', value: 'Etc/GMT-11' },
// { text: 'UTC +12:00', value: 'Etc/GMT-12' },
// { text: 'UTC +13:00', value: 'Etc/GMT-13' },
// { text: 'UTC +14:00', value: 'Etc/GMT-14' }
// ];
// const majorSlotData = [
// { Name: '1 hour', Value: 60 },
// { Name: '1.5 hours', Value: 90 },
// { Name: '2 hours', Value: 120 },
// { Name: '2.5 hours', Value: 150 },
// { Name: '3 hours', Value: 180 },
// { Name: '3.5 hours', Value: 210 },
// { Name: '4 hours', Value: 240 },
// { Name: '4.5 hours', Value: 270 },
// { Name: '5 hours', Value: 300 },
// { Name: '5.5 hours', Value: 330 },
// { Name: '6 hours', Value: 360 },
// { Name: '6.5 hours', Value: 390 },
// { Name: '7 hours', Value: 420 },
// { Name: '7.5 hours', Value: 450 },
// { Name: '8 hours', Value: 480 },
// { Name: '8.5 hours', Value: 510 },
// { Name: '9 hours', Value: 540 },
// { Name: '9.5 hours', Value: 570 },
// { Name: '10 hours', Value: 600 },
// { Name: '10.5 hours', Value: 630 },
// { Name: '11 hours', Value: 660 },
// { Name: '11.5 hours', Value: 690 },
// { Name: '12 hours', Value: 720 }
// ];
// const minorSlotData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// const timeFormatData = [
// { Name: "12 hours", Value: "hh:mm a" },
// { Name: "24 hours", Value: "HH:mm" }
// ];
// const weekNumberData = [
// { Name: 'Off', Value: 'Off' },
// { Name: 'First Day of Year', Value: 'FirstDay' },
// { Name: 'First Full Week', Value: 'FirstFullWeek' },
// { Name: 'First Four-Day Week', Value: 'FirstFourDayWeek' }
// ];
// const tooltipData = [
// { Name: 'Off', Value: 'Off' },
// { Name: 'On', Value: 'On' }
// ];
// const importTemplateFn = (data) => {
// const template = '<div class="e-template-btn"><span class="e-btn-icon e-icons e-upload-1 e-icon-left"></span>${text}</div>';
// return compile(template.trim())(data);
// };
// const updateLiveTime = () => {
// let scheduleTimezone = scheduleObj ? scheduleObj.current.timezone : 'Etc/GMT';
// let liveTime;
// if (scheduleObj.current.isAdaptive) {
// liveTime = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: scheduleTimezone });
// }
// else {
// liveTime = new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone });
// }
// timeBtn.current.innerHTML = liveTime;
// };
// const onImportClick = (args) => {
// scheduleObj.current.importICalendar(args.event.target.files[0]);
// };
// const onPrint = () => {
// scheduleObj.current.print();
// };
// const onExportClick = (args) => {
// if (args.item.text === 'Excel') {
// let exportDatas = [];
// let eventCollection = scheduleObj.current.getEvents();
// let resourceCollection = scheduleObj.current.getResourceCollections();
// let resourceData = resourceCollection[0].dataSource;
// for (let resource of resourceData) {
// let data = eventCollection.filter((e) => e.CalendarId === resource.CalendarId);
// exportDatas = exportDatas.concat(data);
// }
// scheduleObj.current.exportToExcel({ exportType: 'xlsx', customData: exportDatas, fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId'] });
// }
// else {
// scheduleObj.current.exportToICalendar();
// }
// };
// const getEventData = () => {
// const date = scheduleObj.current.selectedDate;
// return {
// Id: scheduleObj.current.getEventMaxID(),
// Subject: '',
// StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),
// EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),
// Location: '',
// Description: '',
// IsAllDay: false,
// CalendarId: 1
// };
// };
// const onToolbarItemClicked = (args) => {
// switch (args.item.text) {
// case 'Day':
// setCurrentView(isTimelineView ? 'TimelineDay' : 'Day');
// break;
// case 'Week':
// setCurrentView(isTimelineView ? 'TimelineWeek' : 'Week');
// break;
// case 'WorkWeek':
// setCurrentView(isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek');
// break;
// case 'Month':
// setCurrentView(isTimelineView ? 'TimelineMonth' : 'Month');
// break;
// case 'Year':
// setCurrentView(isTimelineView ? 'TimelineYear' : 'Year');
// break;
// case 'Agenda':
// setCurrentView('Agenda');
// break;
// case 'New Event':
// const eventData = getEventData();
// scheduleObj.current.openEditor(eventData, 'Add', true);
// break;
// case 'New Recurring Event':
// const recEventData = getEventData();
// scheduleObj.current.openEditor(recEventData, 'Add', true, 1);
// break;
// }
// };
// useEffect(() => {
// let updatedView = currentView;
// switch (currentView) {
// case 'Day':
// case 'TimelineDay':
// updatedView = isTimelineView ? 'TimelineDay' : 'Day';
// break;
// case 'Week':
// case 'TimelineWeek':
// updatedView = isTimelineView ? 'TimelineWeek' : 'Week';
// break;
// case 'WorkWeek':
// case 'TimelineWorkWeek':
// updatedView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
// break;
// case 'Month':
// case 'TimelineMonth':
// updatedView = isTimelineView ? 'TimelineMonth' : 'Month';
// break;
// case 'Year':
// case 'TimelineYear':
// updatedView = isTimelineView ? 'TimelineYear' : 'Year';
// break;
// case 'Agenda':
// updatedView = 'Agenda';
// break;
// }
// scheduleObj.current.currentView = updatedView;
// }, [isTimelineView]);
// const onChange = (args) => {
// setIsTimelineView(args.checked);
// };
// const timelineTemplate = () => {
// return (<div className='template'>
// <div className='icon-child'>
// <CheckBoxComponent id='timeline_views' checked={isTimelineView} change={onChange}/>
// </div>
// <div className='text-child'>Timeline Views</div>
// </div>);
// };
// const groupTemplate = () => {
// return (<div className='template'>
// <div className='icon-child'>
// <CheckBoxComponent id='grouping' checked={true} change={(args) => { scheduleObj.current.group.resources = args.checked ? ['Calendars'] : []; }}/>
// </div>
// <div className='text-child'>Grouping</div>
// </div>);
// };
// const gridlineTemplate = () => {
// return (<div className='template'>
// <div className='icon-child'>
// <CheckBoxComponent id='timeSlots' checked={true} change={(args) => { scheduleObj.current.timeScale.enable = args.checked; }}/>
// </div>
// <div className='text-child'>Gridlines</div>
// </div>);
// };
// const autoHeightTemplate = () => {
// return (<div className='template'>
// <div className='icon-child'>
// <CheckBoxComponent id='row_auto_height' checked={false} change={(args) => { scheduleObj.current.rowAutoHeight = args.checked; }}/>
// </div>
// <div className='text-child'>Row Auto Height</div>
// </div>);
// };
// const getDateHeaderDay = (value) => {
// return intl.formatDate(value, { skeleton: 'E' });
// };
// const getDateHeaderDate = (value) => {
// return intl.formatDate(value, { skeleton: 'd' });
// };
// const getWeather = (value) => {
// switch (value.getDay()) {
// case 0:
// return '<img class="weather-image" src= "src/schedule/images/weather-clear.svg" />';
// case 1:
// return '<img class="weather-image" src="src/schedule/images/weather-clouds.svg"/>';
// case 2:
// return '<img class="weather-image" src="src/schedule/images/weather-rain.svg"/>';
// case 3:
// return '<img class="weather-image" src="src/schedule/images/weather-clouds.svg"/>';
// case 4:
// return '<img class="weather-image" src="src/schedule/images/weather-rain.svg"/>';
// case 5:
// return '<img class="weather-image" src="src/schedule/images/weather-clear.svg"/>';
// case 6:
// return '<img class="weather-image" src="src/schedule/images/weather-clouds.svg"/>';
// default:
// return null;
// }
// };
// const dateHeaderTemplate = (props) => {
// return (<Fragment>
// <div>{getDateHeaderDay(props.date)}</div>
// <div>{getDateHeaderDate(props.date)}</div>
// <div className="date-text" dangerouslySetInnerHTML={{ __html: getWeather(props.date) }}></div>
// </Fragment>);
// };
// const onResourceChange = (args) => {
// let resourcePredicate;
// for (let value of args.value) {
// if (resourcePredicate) {
// resourcePredicate = resourcePredicate.or(new Predicate('CalendarId', 'equal', value));
// }
// else {
// resourcePredicate = new Predicate('CalendarId', 'equal', value);
// }
// }
// scheduleObj.current.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) : new Query().where('CalendarId', 'equal', 1);
// };
// let generateEvents = () => {
// let eventData = [];
// let eventSubjects = [
// 'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Traveling', 'Annual Conference', 'Birthday Celebration',
// 'Farewell Celebration', 'Wedding Anniversary', 'Alaska: The Last Frontier', 'Deadliest Catch', 'Sports Day', 'MoonShiners',
// 'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class',
// 'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation'
// ];
// let weekDate = new Date(new Date().setDate(new Date().getDate() - new Date().getDay()));
// let startDate = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 10, 0);
// let endDate = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 11, 30);
// eventData.push({
// Id: 1,
// Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
// StartTime: startDate,
// EndTime: endDate,
// Location: '',
// Description: 'Event Scheduled',
// RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;',
// IsAllDay: false,
// IsReadonly: false,
// CalendarId: 1
// });
// for (let a = 0, id = 2; a < 500; a++) {
// let month = Math.floor(Math.random() * (11 - 0 + 1) + 0);
// let date = Math.floor(Math.random() * (28 - 1 + 1) + 1);
// let hour = Math.floor(Math.random() * (23 - 0 + 1) + 0);
// let minutes = Math.floor(Math.random() * (59 - 0 + 1) + 0);
// let start = new Date(new Date().getFullYear(), month, date, hour, minutes, 0);
// let end = new Date(start.getTime());
// end.setHours(end.getHours() + 2);
// let startDate = new Date(start.getTime());
// let endDate = new Date(end.getTime());
// eventData.push({
// Id: id,
// Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
// StartTime: startDate,
// EndTime: endDate,
// Location: '',
// Description: 'Event Scheduled',
// IsAllDay: id % 10 === 0,
// IsReadonly: endDate < new Date(),
// CalendarId: (a % 4) + 1
// });
// id++;
// }
// if (Browser.isIE) {
// Timezone.prototype.offset = (date, timezone) => tz.zone(timezone).utcOffset(date.getTime());
// }
// let overviewEvents = extend([], eventData, undefined, true);
// let timezone = new Timezone();
// let currentTimezone = timezone.getLocalTimezoneName();
// for (let event of overviewEvents) {
// event.StartTime = timezone.convert(event.StartTime, 'UTC', currentTimezone);
// event.EndTime = timezone.convert(event.EndTime, 'UTC', currentTimezone);
// }
// return overviewEvents;
// };
// const createUpload = () => {
// const element = document.querySelector('.calendar-import .e-css.e-btn');
// element.classList.add('e-inherit');
// };
// const btnClick = () => {
// let settingsPanel = document.querySelector('.overview-content .right-panel');
// if (settingsPanel.classList.contains('hide')) {
// removeClass([settingsPanel], 'hide');
// workWeekObj.current.refresh();
// resourceObj.current.refresh();
// }
// else {
// addClass([settingsPanel], 'hide');
// }
// scheduleObj.current.refreshEvents();
// };
// const contextMenuOpen = (args) => {
// let newEventElement = document.querySelector('.e-new-event');
// if (newEventElement) {
// remove(newEventElement);
// removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');
// }
// scheduleObj.current.closeQuickInfoPopup();
// let targetElement = args.event.target;
// if (closest(targetElement, '.e-contextmenu')) {
// return;
// }
// selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
// if (isNullOrUndefined(selectedTarget)) {
// args.cancel = true;
// return;
// }
// if (selectedTarget.classList.contains('e-appointment')) {
// let eventObj = scheduleObj.current.getEventDetails(selectedTarget);
// if (eventObj.RecurrenceRule) {
// contextMenuObj.current.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
// contextMenuObj.current.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
// }
// else {
// contextMenuObj.current.showItems(['Save', 'Delete'], true);
// contextMenuObj.current.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
// }
// return;
// }
// else if ((selectedTarget.classList.contains('e-work-cells') || selectedTarget.classList.contains('e-all-day-cells')) &&
// !selectedTarget.classList.contains('e-selected-cell')) {
// removeClass([].slice.call(scheduleObj.current.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell');
// selectedTarget.setAttribute('aria-selected', 'true');
// selectedTarget.classList.add('e-selected-cell');
// }
// contextMenuObj.current.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
// contextMenuObj.current.showItems(['Add', 'AddRecurrence', 'Today'], true);
// };
// const contextMenuSelect = (args) => {
// let selectedMenuItem = args.item.id;
// let eventObj = {};
// if (selectedTarget && selectedTarget.classList.contains('e-appointment')) {
// eventObj = scheduleObj.current.getEventDetails(selectedTarget);
// }
// switch (selectedMenuItem) {
// case 'Today':
// scheduleObj.current.selectedDate = new Date();
// break;
// case 'Add':
// case 'AddRecurrence':
// let selectedCells = scheduleObj.current.getSelectedElements();
// let activeCellsData = scheduleObj.current.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);
// if (selectedMenuItem === 'Add') {
// scheduleObj.current.openEditor(activeCellsData, 'Add');
// }
// else {
// scheduleObj.current.openEditor(activeCellsData, 'Add', false, 1);
// }
// break;
// case 'Save':
// case 'EditOccurrence':
// case 'EditSeries':
// if (selectedMenuItem === 'EditSeries') {
// let query = new Query().where(scheduleObj.current.eventFields.id, 'equal', eventObj.RecurrenceID);
// eventObj = new DataManager(scheduleObj.current.eventsData).executeLocal(query)[0];
// }
// scheduleObj.current.openEditor(eventObj, selectedMenuItem);
// break;
// case 'Delete':
// scheduleObj.current.deleteEvent(eventObj);
// break;
// case 'DeleteOccurrence':
// case 'DeleteSeries':
// scheduleObj.current.deleteEvent(eventObj, selectedMenuItem);
// break;
// }
// };
// const timezoneChange = (args) => {
// scheduleObj.current.timezone = args.value;
// updateLiveTime();
// document.querySelector('.schedule-overview #timezoneBtn').innerHTML = '<span class="e-btn-icon e-icons e-time-zone e-icon-left"></span>' + args.itemData.text;
// };
// const weekNumberChange = (args) => {
// if (args.value == "Off") {
// scheduleObj.current.showWeekNumber = false;
// }
// else {
// scheduleObj.current.showWeekNumber = true;
// scheduleObj.current.weekRule = args.value;
// }
// };
// const tooltipChange = (args) => {
// if (args.value === "Off") {
// scheduleObj.current.eventSettings.enableTooltip = false;
// }
// else {
// scheduleObj.current.eventSettings.enableTooltip = true;
// }
// };
// return (<div className='schedule-control-section'>
// <div className='col-lg-12 control-section'>
// <div className='content-wrapper'>
// <div className="schedule-overview">
// <AppBarComponent colorMode="Primary">
// <span className="time e-icons e-time-zone"></span>
// <span id="timezoneBtn" className="time ">UTC</span>
// <span className="time e-icons e-clock"></span>
// <span id="timeBtn" className="time current-time" ref={timeBtn}></span>
// <div className="e-appbar-spacer"></div>
// <div className='control-panel calendar-export'>
// <ButtonComponent id='printBtn' cssClass='title-bar-btn e-inherit' iconCss='e-icons e-print' onClick={(onPrint)} content='Print'/>
// </div>
// <div className='control-panel import-button'>
// <UploaderComponent id='fileUpload' type='file' allowedExtensions='.ics' cssClass='calendar-import' buttons={{ browse: importTemplateFn({ text: 'Import' })[0] }} multiple={false} showFileList={false} selected={(onImportClick)} created={createUpload}/>
// </div>
// <div className='control-panel calendar-export'>
// <DropDownButtonComponent id='exportBtn' content='Export' cssClass='e-inherit' items={exportItems} select={onExportClick}/>
// </div>
// <ButtonComponent id='settingsBtn' cssClass='overview-toolbar-settings e-inherit' iconCss='e-icons e-settings' iconPosition='Top' content='' onClick={btnClick}/>
// </AppBarComponent>
// <ToolbarComponent id='toolbarOptions' cssClass='overview-toolbar' width='100%' height={70} overflowMode='Scrollable' scrollStep={100} created={() => liveTimeInterval = setInterval(() => { updateLiveTime(); }, 1000)} clicked={onToolbarItemClicked}>
// <ItemsDirective>
// <ItemDirective prefixIcon='e-icons e-plus' tooltipText='New Event' text='New Event' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-repeat' tooltipText='New Recurring Event' text='New Recurring Event' tabIndex={0}/>
// <ItemDirective type='Separator'/>
// <ItemDirective prefixIcon='e-icons e-day' tooltipText='Day' text='Day' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-week' tooltipText='Week' text='Week' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-week' tooltipText='WorkWeek' text='WorkWeek' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-month' tooltipText='Month' text='Month' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-month' tooltipText='Year' text='Year' tabIndex={0}/>
// <ItemDirective prefixIcon='e-icons e-agenda-date-range' tooltipText='Agenda' text='Agenda' tabIndex={0}/>
// <ItemDirective tooltipText='Timeline Views' text='Timeline Views' template={timelineTemplate}/>
// <ItemDirective type='Separator'/>
// <ItemDirective tooltipText='Grouping' text='Grouping' template={groupTemplate}/>
// <ItemDirective tooltipText='Timme Slots' text='Timme Slots' template={gridlineTemplate}/>
// <ItemDirective tooltipText='Auto Fit Rows' text='Auto Fit Rows' template={autoHeightTemplate}/>
// </ItemsDirective>
// </ToolbarComponent>
// <div className='overview-content'>
// <div className='left-panel'>
// <div className='overview-scheduler'>
// <ScheduleComponent id='scheduler' cssClass='schedule-overview' ref={scheduleObj} width='100%' height='100%' currentView={currentView} group={{ resources: ['Calendars'] }} timezone='UTC' eventSettings={{ dataSource: generateEvents() }} dateHeaderTemplate={dateHeaderTemplate}>
// <ResourcesDirective>
// <ResourceDirective field='CalendarId' title='Calendars' name='Calendars' dataSource={calendarCollections} query={new Query().where('CalendarId', 'equal', 1)} textField='CalendarText' idField='CalendarId' colorField='CalendarColor'/>
// </ResourcesDirective>
// <ViewsDirective>
// <ViewDirective option='Day'/>
// <ViewDirective option='Week'/>
// <ViewDirective option='WorkWeek'/>
// <ViewDirective option='Month'/>
// <ViewDirective option='Year'/>
// <ViewDirective option='Agenda'/>
// <ViewDirective option='TimelineDay'/>
// <ViewDirective option='TimelineWeek'/>
// <ViewDirective option='TimelineWorkWeek'/>
// <ViewDirective option='TimelineMonth'/>
// <ViewDirective option='TimelineYear'/>
// </ViewsDirective>
// <Inject services={[Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, TimelineMonth, TimelineYear, DragAndDrop, Resize, Print, ExcelExport, ICalendarImport, ICalendarExport]}/>
// </ScheduleComponent>
// <ContextMenuComponent id='overviewContextMenu' cssClass='schedule-context-menu' ref={contextMenuObj} target='.e-schedule' items={contextMenuItems} beforeOpen={contextMenuOpen} select={contextMenuSelect}/>
// </div>
// </div>
// <div className='right-panel hide'>
// <div className='control-panel e-css'>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Calendar</label>
// </div>
// <div className='col-right'>
// <MultiSelectComponent id="resources" cssClass='schedule-resource' ref={resourceObj} dataSource={calendarCollections} mode='CheckBox' fields={{ text: 'CalendarText', value: 'CalendarId' }} enableSelectionOrder={false} showClearButton={false} showDropDownIcon={true} popupHeight={300} value={[1]} change={onResourceChange}>
// <Inject services={[CheckBoxSelection]}/>
// </MultiSelectComponent>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>First Day of Week</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="weekFirstDay" dataSource={weekDays} fields={{ text: 'text', value: 'value' }} value={0} popupHeight={400} change={(args) => { scheduleObj.current.firstDayOfWeek = args.value; }}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Work week</label>
// </div>
// <div className='col-right'>
// <MultiSelectComponent id="workWeekDays" cssClass='schedule-workweek' ref={workWeekObj} dataSource={weekDays} mode='CheckBox' fields={{ text: 'text', value: 'value' }} enableSelectionOrder={false} showClearButton={false} showDropDownIcon={true} value={[1, 2, 3, 4, 5]} change={(args) => scheduleObj.current.workDays = args.value}>
// <Inject services={[CheckBoxSelection]}/>
// </MultiSelectComponent>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Timezone</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="timezone" dataSource={timezoneData} fields={{ text: 'text', value: 'value' }} value='Etc/GMT' popupHeight={150} change={timezoneChange}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Day Start Hour</label>
// </div>
// <div className='col-right'>
// <TimePickerComponent id='dayStartHour' showClearButton={false} value={new Date(new Date().setHours(0, 0, 0))} change={(args) => scheduleObj.current.startHour = intl.formatDate(args.value, { skeleton: 'Hm' })}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Day End Hour</label>
// </div>
// <div className='col-right'>
// <TimePickerComponent id='dayEndHour' showClearButton={false} value={new Date(new Date().setHours(23, 59, 59))} change={(args) => scheduleObj.current.endHour = intl.formatDate(args.value, { skeleton: 'Hm' })}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Work Start Hour</label>
// </div>
// <div className='col-right'>
// <TimePickerComponent id='workHourStart' showClearButton={false} value={new Date(new Date().setHours(9, 0, 0))} change={(args) => scheduleObj.current.workHours.start = intl.formatDate(args.value, { skeleton: 'Hm' })}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Work End Hour</label>
// </div>
// <div className='col-right'>
// <TimePickerComponent id='workHourEnd' showClearButton={false} value={new Date(new Date().setHours(18, 0, 0))} change={(args) => scheduleObj.current.workHours.end = intl.formatDate(args.value, { skeleton: 'Hm' })}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Slot Duration</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="slotDuration" dataSource={majorSlotData} fields={{ text: 'Name', value: 'Value' }} value={60} popupHeight={150} change={(args) => { scheduleObj.current.timeScale.interval = args.value; }}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Slot Interval</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="slotInterval" dataSource={minorSlotData} value={2} popupHeight={150} change={(args) => { scheduleObj.current.timeScale.slotCount = args.value; }}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Time Format</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="timeFormat" dataSource={timeFormatData} fields={{ text: 'Name', value: 'Value' }} value={"hh:mm a"} popupHeight={150} change={(args) => { scheduleObj.current.timeFormat = args.value; }}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Week Numbers</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="weekNumber" dataSource={weekNumberData} fields={{ text: 'Name', value: 'Value' }} value={"Off"} popupHeight={150} change={weekNumberChange}/>
// </div>
// </div>
// <div className='col-row'>
// <div className='col-left'>
// <label style={{ lineHeight: '34px', margin: '0' }}>Tooltip</label>
// </div>
// <div className='col-right'>
// <DropDownListComponent id="tooltip" dataSource={tooltipData} fields={{ text: 'Name', value: 'Value' }} value={"Off"} popupHeight={150} change={tooltipChange}/>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>);
// };
// export default Overview;
import * as React from 'react';
import { useEffect } from 'react';
import { ScheduleComponent, ResourcesDirective, ResourceDirective, ViewsDirective, ViewDirective, Inject, TimelineViews, Resize, DragAndDrop, TimelineMonth, Day } from '@syncfusion/ej2-react-schedule';
import './index.css';
import { extend } from '@syncfusion/ej2-base';
import * as dataSource from './datasource.json';
/**
* schedule block events sample
*/
const BlockEvents = () => {
const data = extend([], dataSource, null, true);
const employeeData = [
{ Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Content writer' },
{ Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Designer' },
{ Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Software Engineer' },
{ Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Support Engineer' },
{ Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Human Resource' },
{ Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Content Analyst' }
];
const getEmployeeName = (value) => {
return value.resourceData[value.resource.textField];
};
const getEmployeeImage = (value) => {
return getEmployeeName(value).toLowerCase();
};
const getEmployeeDesignation = (value) => {
return value.resourceData.Designation;
};
const resourceHeaderTemplate = (props) => {
return (<div className="template-wrap">
<div className="employee-category">
<div className={"employee-image " + getEmployeeImage(props)}/>
<div className="employee-name"> {getEmployeeName(props)}</div>
<div className="employee-designation">{getEmployeeDesignation(props)}</div>
</div>
</div>);
};
return (<div className='schedule-control-section'>
<div className='col-lg-12 control-section'>
<div className='control-wrapper drag-sample-wrapper'>
<div className="schedule-container">
<ScheduleComponent cssClass='block-events' width='100%' height='650px' selectedDate={new Date(2021, 7, 2)} currentView='TimelineDay' resourceHeaderTemplate={resourceHeaderTemplate} eventSettings={{ dataSource: data }} group={{ enableCompactView: false, resources: ['Employee'] }}>
<ResourcesDirective>
<ResourceDirective field='EmployeeId' title='Employees' name='Employee' allowMultiple={true} dataSource={employeeData} textField='Text' idField='Id' colorField='Color'/>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Day'/>
<ViewDirective option='TimelineDay'/>
<ViewDirective option='TimelineMonth'/>
</ViewsDirective>
<Inject services={[Day, TimelineViews, TimelineMonth, Resize, DragAndDrop]}/>
</ScheduleComponent>
</div>
</div>
</div>
</div>);
};
export default BlockEvents;
THIS IS CSS
.block-events.e-schedule .template-wrap {
width: 100%;
}
.block-events.e-schedule .e-vertical-view .e-resource-cells {
height: 58px;
}
.block-events.e-schedule .e-timeline-view .e-resource-left-td,
.block-events.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 170px;
}
.block-events.e-schedule .e-resource-cells.e-child-node .employee-category,
.block-events.e-schedule .e-resource-cells.e-child-node .employee-name {
padding: 5px
}
.block-events.e-schedule .employee-image {
width: 45px;
height: 40px;
float: left;
border-radius: 50%;
margin-right: 10px;
background-repeat: no-repeat;
background-size: 45px;
}
.block-events.e-schedule .employee-name {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.block-events.e-schedule .employee-designation {
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.block-events.e-schedule .template-wrap .employee-image.alice {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/alice.png');
}
.block-events.e-schedule .template-wrap .employee-image.robert {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/robert.png');
}
.block-events.e-schedule .template-wrap .employee-image.robson {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/robson.png');
}
.block-events.e-schedule .template-wrap .employee-image.laura {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/laura.png');
}
.block-events.e-schedule .template-wrap .employee-image.nancy {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/nancy.png');
}
.block-events.e-schedule .template-wrap .employee-image.margaret {
background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/margaret.png');
}
Editor is loading...
Leave a Comment