glide-design-system/src/lib/components/weekScheduler/WeekviewScheduler.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState, useRef, useEffect } from "react";
import classes from "./WeekviewScheduler.module.css";
import WeekCalender from "../weekCalender/WeekCalender";
// import DayBlock from "./DayBlock";
// import CreateSession from './sessionForm/CreateSession';

const WeekviewScheduler = ({
  title,
  data,
  header,
  calenderHeaderContainerStyle,
  calenderHeaderContainerClassName,
  calenderHeaderClassName,
  calenderHeaderStyle,
  days,
}) => {
  const [weekDays, setWeekDays] = useState();
  const [selectedRows, setSelectedRows] = useState([]);
  const [checkIn, setCheckIn] = useState([]);
  const tableContainerRef = useRef(null);
  const isMouseMoveDown = useRef(false);
  const hours = Array.from({ length: 24 }, (_, index) => index + 1);

  useEffect(() => {
    const handleOutsideClick = (event) => {
      setSelectedRows([]);
    };
    isMouseMoveDown.current = false;
    document.addEventListener("mousedown", handleOutsideClick);

    return () => {
      document.removeEventListener("mousedown", handleOutsideClick);
    };
  }, []);

  return (
    <div ref={tableContainerRef} className={classes.nonSelectable}>
      <div style={{ overflowX: "auto" }}>
        <div className={classes.parentContainer}>
          <div>
            <div
              style={calenderHeaderContainerStyle}
              className={`${classes.calenderHeaderContainer} ${
                calenderHeaderContainerClassName &&
                calenderHeaderContainerClassName
              }`}
            >
              <div
                className={`${classes.calenderHeader} ${
                  calenderHeaderClassName && calenderHeaderClassName
                }`}
                style={calenderHeaderStyle}
              >
                {header ? header : ""}
              </div>
            </div>

            <div className={classes.tableParent}>
              <div
                style={{
                  marginTop: "200px",
                  paddingTop: title === "admin" ? "10px" : "5px",
                }}
              >
                <div
                  style={{
                    position: "fixed",
                    width: "100%",
                    left: "0",

                    zIndex: "10",
                    marginTop: "-106px",
                    backgroundColor: "white",
                    marginBottom: "5px",
                  }}
                >
                  <div
                    style={{
                      display: "grid",
                      gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
                      justifyContent: "space-around",
                      marginLeft: "120px",
                      borderBottom: "1px solid #DDD",
                      marginRight: "40px",
                    }}
                  >
                    {weekDays?.map((weekDay) => {
                      const dateObj = new Date(weekDay);
                      const today = new Date();

                      const date = dateObj.getDate();
                      const month = dateObj.getMonth();
                      const year = dateObj.getFullYear();
                      const weekDays = [
                        "Sun",
                        "Mon",
                        "Tue",
                        "Wed",
                        "Thu",
                        "Fri",
                        "Sat",
                      ];
                      let days = weekDays[dateObj.getDay()];
                      return (
                        <div
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            flexDirection: "column",
                            alignItems: "center",
                            marginTop: "50px",
                            borderRight: "1px solid #ddd",
                          }}
                        >
                          <div
                            className={
                              today.getDate() === date &&
                              today.getMonth() === month &&
                              today.getFullYear() === year
                                ? classes.todayDay
                                : classes.day
                            }
                          >
                            {days}
                          </div>
                          <div
                            className={
                              today.getDate() === date &&
                              today.getMonth() === month &&
                              today.getFullYear() === year
                                ? classes.todayDate
                                : classes.date
                            }
                          >
                            {date}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WeekviewScheduler;