Untitled

import React, { Fragment, useEffect, useState } from "react";
import { Calendar, momentLocalizer, Views } from "react-big-calendar";
import moment from "moment";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";

import "./calendar.css";
import {
  CardContent,
  CardHeader,
  Icon,
  Menu,
  MenuItem,
  Typography,
} from "@material-ui/core";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import EventComponent from "./EventComponent";
import Dialog from "@material-ui/core/Dialog";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Slide from "@material-ui/core/Slide";

import AddEvent from "./AddEvent";
import { getAll } from "../../api/events";

const localizer = momentLocalizer(moment);

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
  control: {
    padding: theme.spacing(1),
  },
  appBar: {
    position: "relative",
    background: "#c0beb475",
    color: "#111110",
    paddingRight: "0px !important",
    boxShadow:
      "0px 1px 6px 0px rgba(142, 142, 142, 0.2), 0px 1px 1px 0px rgba(243, 243, 243, 0.14), 0px 2px 1px -1px rgba(204, 204, 204, 0.12)",
  },
  title: {
    marginLeft: theme.spacing(0),
    flex: 1,
    fontSize: "16px",
    fontWeight: "bold",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
  },
}));

const Transition = React.forwardRef((props, ref) => (
  <Slide direction="left" ref={ref} {...props} />
));

const ITEM_HEIGHT = 48;

const backgrounds = [
  "bg-primary",
  "bg-info",
  "bg-success",
  "bg-warning",
  "bg-danger",
  "bg-secondary",
];

function Mycaledarfase_2(props) {
  const [spacing, setSpacing] = useState(2);
  const classes = useStyles();
  const [currentDate, setCurrentDate] = useState(new Date());
  const [viewMode, setViewMode] = useState(Views.MONTH);
  const [anchorElOpt, setAchorElOpt] = useState(null);
  const [openModel, setOpenModel] = useState(false);
  const [eventItem, setEventItem] = useState();

  const handleClickOpt = (event) => {
    setAchorElOpt(event.currentTarget);
  };

  const handleCloseOpt = () => {
    setAchorElOpt(null);
  };

  const handleClickOpenModel = () => {
    setOpenModel(true);
  };

  const handleCloseModel = () => {
    setOpenModel(false);
  };

  const handleViewMode = (e) => {
    setCurrentDate(moment(e)._d);
    setViewMode(Views.DAY);
  };

  const _setViewMode = (view) => {
    setViewMode(view);
    setAchorElOpt(null);
  };

  const todayLabel = () => {
    if (viewMode === "day") {
      return "Today";
    }
    if (viewMode === "week") {
      return "This Week";
    }

    return "This Month";
  };

  const getIcon = () => {
    if (viewMode === "day") {
      return "view_day";
    }
    if (viewMode === "week") {
      return "view_week";
    }
    return "view_comfy";
  };

  const getView = () => {
    if (viewMode === "day") {
      return "Day";
    }
    if (viewMode === "week") {
      return "Week";
    }
    return "Month";
  };

  useEffect(() => {
    calendarData();
  }, []);

  const [events, setEvents] = useState({
    data: [],
    users: [],
  });

  const calendarData = async () => {
    const _events = await getAll(false);
    const ids = [];
    const users = [];
    const _myevents = [];
    _events.forEach((event) => {
      if (!ids.includes(event.user.id)) {
        users.push(event.user);
        ids.push(event.user.id);
      }
      const start = new Date(event.start_time + "Z");
      const end = new Date(event.end_time + "Z");
      event["start"] = start;
      event["end"] = end;
      _myevents.push(event);
    });
    const eData = {
      data: _myevents,
      users: users,
    };

    setEvents(eData);
  };

  const refreshData = async () => {
    await calendarData();
  };

  return (
    <Fragment>
      <div className="roww mt-1 mb-2 connected-users">
        {events.users.map((user, i) => (
          <div key={"mouse-over-popover-" + i.toString()} className="col-auto">
            <div className="position-relative">
              <img
                width="48"
                height="48"
                className="avatar rounded-circle border border-4 border-info bg-l25-primary cursor-pointer has-popover"
                src={user.avatar}
              />
              <div className="popover">
                <span className="title">{user.name}</span>
                <p>Appointments: 1</p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <Grid container className={classes.root} spacing={1}>
        <Grid item lg={12} xs={12}>
          <Card style={{background:"transparent", boxShadow:"none"}}>
            <CardHeader
              className="mycalendar-header"
              action={
                <IconButton
                  className="calendar-views"
                  color="primary"
                  aria-label="Views"
                  onClick={handleClickOpt}>
                  <Icon>{getIcon()}</Icon> <span>&nbsp; {getView()} </span>{" "}
                  <Icon>arrow_drop_down</Icon>
                </IconButton>
              }
              title={
                <>
                  <div className={classes.toggleContainer}>
                    <ToggleButtonGroup exclusive>
                      <ToggleButton
                        onClick={(e) =>
                          setCurrentDate(
                            moment(currentDate).add(-1, viewMode)._d
                          )
                        }
                        value="left">
                        <Icon>chevron_left</Icon>
                      </ToggleButton>
                      <ToggleButton
                        onClick={(e) => setCurrentDate(moment()._d)}
                        value="center">
                        {todayLabel()}
                      </ToggleButton>
                      <ToggleButton
                        onClick={(e) =>
                          setCurrentDate(
                            moment(currentDate).add(1, viewMode)._d
                          )
                        }
                        value="right">
                        <Icon>chevron_right</Icon>
                      </ToggleButton>
                    </ToggleButtonGroup>
                  </div>
                </>
              }
            />
            <Menu
              id="veiw-type"
              anchorEl={anchorElOpt}
              open={Boolean(anchorElOpt)}
              onClose={handleCloseOpt}
              PaperProps={{
                style: {
                  maxHeight: ITEM_HEIGHT * 4.5,
                  width: 200,
                },
              }}>
              <MenuItem onClick={(e) => _setViewMode(Views.MONTH)}>
                <Icon>view_comfy</Icon> Month
              </MenuItem>
              <MenuItem onClick={(e) => _setViewMode(Views.WEEK)}>
                <Icon>view_week</Icon> Week
              </MenuItem>
              <MenuItem onClick={(e) => _setViewMode(Views.DAY)}>
                <Icon>view_day</Icon> Day
              </MenuItem>
            </Menu>
            <CardContent>
              <Calendar
                selectable
                date={currentDate}
                onNavigate={(_date) => setCurrentDate(_date)}
                defaultDate={new Date()}
                toolbar={false}
                localizer={localizer}
                events={events.data}
                defaultView={Views.MONTH}
                scrollToTime={new Date(1970, 1, 1, 6)}
                views={Object.keys(Views).map((k) => Views[k])}
                view={viewMode}
                startAccessor="start"
                endAccessor="end"
                style={{ height: 600 }}
                components={{
                  event: EventComponent,
                }}
                eventPropGetter={(event, start, end, isSelected) => {
                  const index = event.id % 6;
                  return {
                    className: `${backgrounds[index]}`,
                  };
                }}
                onSelectEvent={(event) => {
                  setOpenModel(true);
                  setEventItem(event);
                }}
                onSelectSlot={({ start, end }) => {
                  setEventItem({
                    id: null,
                    title: null,
                    description: null,
                    location: null,
                    start_time: start,
                    end_time: end,
                    user: { name: "" },
                    participants: [],
                    users: events.users,
                    comment: null,
                  });
                  setOpenModel(true);
                }}
                onView={handleViewMode}
                onDrillDown={handleViewMode}
              />
            </CardContent>
          </Card>
        </Grid>
      </Grid>
      {/* Event Dialog */}
      <div className="add_event_section">
        <Dialog
          disableEnforceFocus
          id="right-dialog"
          className="add_event_model"
          fullScreen
          open={openModel}
          onClose={handleCloseModel}
          TransitionComponent={Transition}>
          <AppBar className={classes.appBar}>
            <Toolbar className="p-3">
              <Typography variant="h6" className={classes.title}>
                {(eventItem && eventItem.title) || "Add Event"}
              </Typography>
              <IconButton
                edge="start"
                color="inherit"
                onClick={handleCloseModel}
                aria-label="close">
                <CloseIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <AddEvent
            event={eventItem}
            onClose={handleCloseModel}
            refresh={refreshData}
          />
        </Dialog>
      </div>
    </Fragment>
  );
}

export default Mycaledarfase_2;