text: // import React, { useState } from "react";
  // import FullCalendar, { formatDate } from "@fullcalendar/react";
  // import dayGridPlugin from "@fullcalendar/daygrid";
  // import timeGridPlugin from "@fullcalendar/timegrid";
  // import interactionPlugin from "@fullcalendar/interaction";
  // import { INITIAL_EVENTS, createEventId } from "./event-utils";
  
  // import S from "../../styles/pages/schedule";
  
  // const Index = () => {
  //   const [currentEvents, setCurrentEvents] = useState([]);
  //   const [weekendsVisible, setWeekendsVisible] = useState(true);
  
  //   function renderEventContent(eventInfo) {
  //     return (
  //       <>
  //         <b>{eventInfo.timeText}</b>
  //         <i>{eventInfo.event.title}</i>
  //       </>
  //     );
  //   }
  
  //   function renderSidebarEvent(event) {
  //     return (
  //       <li key={event.id}>
  //         <b>
  //           {formatDate(event.start, {
  //             year: "numeric",
  //             month: "short",
  //             day: "numeric",
  //           })}
  //         </b>
  //         <i>{event.title}</i>
  //       </li>
  //     );
  //   }
  
  //   const renderSidebar = () => {
  //     return (
  //       <div className="demo-app-sidebar">
  //         <div className="demo-app-sidebar-section">
  //           <label>
  //             <input
  //               type="checkbox"
  //               checked={weekendsVisible}
  //               onChange={handleWeekendsToggle}
  //             ></input>
  //             toggle weekends
  //           </label>
  //         </div>
  //         <div className="demo-app-sidebar-section">
  //           <h2>All Events ({currentEvents.length})</h2>
  //           <ul>{currentEvents.map(renderSidebarEvent)}</ul>
  //         </div>
  //       </div>
  //     );
  //   };
  
  //   const handleWeekendsToggle = () => {
  //     setWeekendsVisible(!weekendsVisible);
  //   };
  
  //   const handleDateSelect = (selectInfo) => {
  //     let title = prompt("Please enter a new title for your event");
  //     let calendarApi = selectInfo.view.calendar;
  
  //     calendarApi.unselect(); // clear date selection
  
  //     if (title) {
  //       calendarApi.addEvent({
  //         id: createEventId(),
  //         title,
  //         start: selectInfo.startStr,
  //         end: selectInfo.endStr,
  //         allDay: selectInfo.allDay,
  //       });
  //     }
  //   };
  
  //   const handleEventClick = (clickInfo) => {
  //     if (
  //       window.confirm(
  //         `Are you sure you want to delete the event '${clickInfo.event.title}'`
  //       )
  //     ) {
  //       clickInfo.event.remove();
  //     }
  //   };
  
  //   const handleEvents = (events) => {
  //     setCurrentEvents(events);
  //   };
  
  //   return (
  //     <S.Wrapper>
  //       <div className="schedule">
  //         {/* {renderSidebar()} */}
  //         <div className="schedule__block">
  //           <FullCalendar
  //             plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  //             headerToolbar={{
  //               left: "prev,next today",
  //               center: "title",
  //               right: "dayGridMonth,timeGridWeek,timeGridDay",
  //             }}
  //             initialView="dayGridMonth"
  //             editable={true}
  //             selectable={true}
  //             selectMirror={true}
  //             dayMaxEvents={true}
  //             weekends={weekendsVisible}
  //             initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
  //             select={handleDateSelect}
  //             eventContent={renderEventContent} // custom render function
  //             eventClick={handleEventClick}
  //             eventsSet={handleEvents} // called after events are initialized/added/changed/removed
  //             /* you can update a remote database when these fire:
  //             eventAdd={function(){}}
  //             eventChange={function(){}}
  //             eventRemove={function(){}}
  //             */
  //           />
  //         </div>
  //       </div>
  //     </S.Wrapper>
  //   );
  // };
  
  // export default Index;
  