Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
66 kB
9
Indexable
Never
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');
}


Leave a Comment