import React from 'react'

import FullCalendar from '@fullcalendar/react'

import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import timeGridPlugin from '@fullcalendar/timegrid' // a
plugin!
import listPlugin from '@fullcalendar/list' // a plugin!

const WeekCalandar = () => {

let adjustSlotLabels = (arg) => {
if (arg.date.getHours() === 13) {
return ''; // Return an empty string to remove the
label for 1:00 PM
}
return arg.text; // Return the original label for other
times
}
return (
<div className='flex-grow h-[calc(100vh-80px)]'>
<FullCalendar
plugins={[ dayGridPlugin, timeGridPlugin, listPlugin ]}
initialView="timeGridWeek"
height={'89vh'}
allDaySlot={false}
hiddenDays={[0]}
slotLabelContent={adjustSlotLabels}
headerToolbar={{
start: 'today', // will normally be on the left. if
RTL, will be on the right
center: 'title',
end: 'prev,next' // will normally be on the right. if
RTL, will be on the left
}}
slotMinTime="08:00:00" // Set the earliest time to
display
slotMaxTime="19:00:00" // Set the latest time to
display
slotDuration="01:00:00"
views={{
customTimeGridWeek: {
type: 'timeGridWeek',
 slotMinTime: '08:00:00', // Set the earliest time
to display for the custom view
slotMaxTime: '12:00:00',
// Set the latest time to display for the custom
view
// Add any other customizations specific to this
view
},
customTimeGridWeekAfternoon: {
type: 'timeGridWeek',
slotMinTime: '14:00:00', // Set the earliest time
to display for the custom view
slotMaxTime: '18:00:00', // Set the latest time to
display for the custom view
// Add any other customizations specific to this
view
}

}}
/>
</div>
)
}

let hideAllDayRow = (slotLaneContentArgs) => {

if (slotLaneContentArgs.isAllDay) {
return null; // Return null to hide the all-day row
}
return slotLaneContentArgs.table; // Return the default table
for other rows
}
export default WeekCalandar