glide-design-system/src/lib/components/scheduler/Scheduler.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, createContext } from "react";
import dayjs from "dayjs";
import DayView from "./DayView";
import styles from "./Scheduler.module.css";

export const EventsContext = createContext();

export const EventDetails = createContext();

function Scheduler({
  events,
  customEventForm,
  setStartTime,
  setEndTime,
  customEventDescription,
  style,
  showWeek,
  timeRange,
  formOpen,
  setFormOpen,
  descriptionStyle,
  customDatePicker,
  choosenDate,
  tableCellStyle,
  setUpdateData,
  edit,
  setEventDescrption,
  eventDescription,
  width,
}) {
  const dateString = choosenDate;

  const formattedDate = dayjs(dateString);

  const today = dayjs();
  const [selectedDate, setSelectedDate] = useState(today);

  const eventDetial = {
    eventForm: customEventForm ? customEventForm : "",
    eventDescription: customEventDescription ? customEventDescription : "",
  };

  return (
    <div>
      <div className={styles.dayViewContainer}>
        <div className={styles.dayViewContainer}>
          {formattedDate ? customDatePicker : ""}
        </div>
      </div>

      <div style={{ marginTop: "10px" }}>
        <EventsContext.Provider value={events ? events : ""}>
          <EventDetails.Provider value={eventDetial}>
            <div>
              <DayView
                selectedDate={formattedDate ? formattedDate : selectedDate}
                setStartTime={setStartTime}
                setEndTime={setEndTime}
                timeRange={timeRange}
                formOpen={formOpen}
                setFormOpen={setFormOpen}
                descriptionStyle={descriptionStyle}
                tableCellStyle={tableCellStyle}
                setUpdateData={setUpdateData}
                edit={edit}
                eventDescription={eventDescription}
                setEventDescrption={setEventDescrption}
                events={events}
                width={width}
              />
            </div>
          </EventDetails.Provider>
        </EventsContext.Provider>
      </div>
    </div>
  );
}

export default Scheduler;