Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | import PropTypes from 'prop-types'
import { useState } from 'react'
import dayjs from 'dayjs'
import CalendarEvent from './CalendarEvent'
import { generateMonth, DAYS, MONTHS } from '../lib/calendarUtils'
export default function Calendar({
events,
toggleCalenderView,
isCalendarView,
t,
}) {
const currentDate = dayjs()
const [today, setToday] = useState(currentDate)
return (
<div className="w-full">
<div className="flex mb-3">
<div>
<button
onClick={() => {
setToday(today.subtract(1, 'month'))
}}
className="uppercase rounded text-periwinkle border px-2 border-periwinkle hover:bg-periwinkle hover:text-white "
>
{t.prev}
</button>
<button
onClick={() => {
setToday(today.add(1, 'month'))
}}
className="uppercase rounded text-periwinkle border px-2 border-periwinkle hover:bg-periwinkle hover:text-white ml-1"
>
{t.next}
</button>
</div>
<div>
<p className="text-periwinkle text-xl font-bold mx-3">
{today.year()} {MONTHS[today.month()]}
</p>
</div>
<div className="grow">
<div className="float-right">
<button
onClick={() => toggleCalenderView(1)}
className={`rounded text-periwinkle border px-2 border-periwinkle hover:bg-periwinkle hover:text-white ${
isCalendarView && 'bg-periwinkle text-white'
}`}
>
{t.calendar}
</button>
<button
onClick={() => toggleCalenderView(0)}
className={`rounded text-periwinkle border px-2 border-periwinkle hover:bg-periwinkle hover:text-white ml-1 ${
!isCalendarView && 'bg-periwinkle text-white'
}`}
>
{t.list}
</button>
</div>
</div>
</div>
<div className="grid grid-cols-7">
{DAYS.map((day, index) => {
return (
<p
className="-mt-px -ml-px border border-periwinkle text-left text-periwinkle px-1 bg-periwinkle/10"
key={index}
>
{day.substring(0, 3)}
</p>
)
})}
</div>
<div className="grid grid-cols-7">
{generateMonth(today.month(), today.year()).map(
({ date, isInCurrentMonth, isToday }, index) => {
const eventsForDay = events.filter(
(e) =>
dayjs(e.startDate).format('YYYY-MM-DD') ===
date.format('YYYY-MM-DD')
)
return (
<div
key={index}
className={`-mt-px -ml-px border border-periwinkle aspect-[4/5] ${
!isInCurrentMonth ? 'invisible' : ''
}`}
>
<div
className={`h-full border-2 border-white hover:border-periwinkle ${
isToday ? 'border-periwinkle/10' : ''
}`}
>
<div
className={`h-full text-periwinkle ${
isToday ? 'bg-periwinkle/10' : ''
}`}
>
<p className="px-1 text-right">{date.date()}</p>
<div className="flex flex-col">
{eventsForDay.length > 0 &&
eventsForDay.map((e, index) => (
<CalendarEvent
key={index}
event={e}
hasMultipleEvents={eventsForDay.length > 1}
/>
))}
</div>
</div>
</div>
</div>
)
}
)}
</div>
</div>
)
}
|