import { Role } from "@koh/common" ; import moment from "moment" ; import React , { ReactElement } from "react" ; import { Calendar , CalendarProps , Event , momentLocalizer , View , } from "react-big-calendar" ; import styled from "styled-components" ; import { useCourse } from "../../hooks/useCourse" ; import { useRoleInCourse } from "../../hooks/useRoleInCourse" ; import UpdateCalendarButton from "./UpdateCalendarButton" ; const ScheduleCalendar = styled ( Calendar ) < CalendarProps > `
  height: 70vh;
` ; type ScheduleProps = { courseId : number ; defaultView ? : View ; } ; export default function SchedulePanel ( { courseId , defaultView = "week" , } ) { const { course } = useCourse ( courseId ) ; const role = useRoleInCourse ( courseId ) ; const myEvents = course ?. officeHours . map ( ( e ) => ( { start : e . startTime , end : e . endTime , title : e . title , } ) ) ?? [ ] ; const today = new Date ( ) ; return ( < div > < ScheduleCalendar localizer = { momentLocalizer ( moment ) } events = { myEvents } defaultView = { defaultView } scrollToTime = { new Date ( today . getFullYear ( ) , today . getMonth ( ) , today . getDate ( ) , 8 ) } showMultiDayTimes / > { role === Role . PROFESSOR && < UpdateCalendarButton courseId = { courseId } />} < /div>); }