-
Notifications
You must be signed in to change notification settings - Fork 439
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a54d71a
commit 3a28ce7
Showing
6 changed files
with
342 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,129 @@ | ||
| import React from "react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| import CareIcon from "@/CAREUI/icons/CareIcon"; | ||
|
|
||
| interface Props { | ||
| className?: string; | ||
| initialMonth?: Date; | ||
| onMonthChange?: (month: Date) => void; | ||
| renderDay?: (date: Date) => React.ReactNode; | ||
| } | ||
|
|
||
| export default function Calendar(props: Props) { | ||
| return <div className={props.className}>TODO: build a calendar!</div>; | ||
| const [currentMonth, setCurrentMonth] = React.useState( | ||
| props.initialMonth ?? new Date(), | ||
| ); | ||
|
|
||
| // Get first day of the month and total days | ||
| const firstDayOfMonth = new Date( | ||
| currentMonth.getFullYear(), | ||
| currentMonth.getMonth(), | ||
| 1, | ||
| ); | ||
| const lastDayOfMonth = new Date( | ||
| currentMonth.getFullYear(), | ||
| currentMonth.getMonth() + 1, | ||
| 0, | ||
| ); | ||
|
|
||
| // Calculate days to display from previous month | ||
| const startingDayOfWeek = firstDayOfMonth.getDay(); | ||
|
|
||
| // Generate calendar days array for current month only | ||
| const calendarDays: Date[] = []; | ||
|
|
||
| // Add empty slots for previous month days | ||
| for (let i = 0; i < startingDayOfWeek; i++) { | ||
| calendarDays.push(null as unknown as Date); | ||
| } | ||
|
|
||
| // Add current month's days | ||
| for (let i = 1; i <= lastDayOfMonth.getDate(); i++) { | ||
| calendarDays.push( | ||
| new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i), | ||
| ); | ||
| } | ||
|
|
||
| const handlePrevMonth = () => { | ||
| const prevMonth = new Date( | ||
| currentMonth.getFullYear(), | ||
| currentMonth.getMonth() - 1, | ||
| ); | ||
| setCurrentMonth(prevMonth); | ||
| props.onMonthChange?.(prevMonth); | ||
| }; | ||
|
|
||
| const handleNextMonth = () => { | ||
| const nextMonth = new Date( | ||
| currentMonth.getFullYear(), | ||
| currentMonth.getMonth() + 1, | ||
| ); | ||
| setCurrentMonth(nextMonth); | ||
| props.onMonthChange?.(nextMonth); | ||
| }; | ||
|
|
||
| const weekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; | ||
|
|
||
| return ( | ||
| <div className={`${props.className} w-full`}> | ||
| <div className="mb-4 flex items-center justify-between"> | ||
| <h2 className="text-xl font-bold uppercase"> | ||
| {currentMonth.toLocaleString("default", { | ||
| month: "long", | ||
| year: "numeric", | ||
| })} | ||
| </h2> | ||
| <div className="flex gap-2"> | ||
| <button | ||
| onClick={handlePrevMonth} | ||
| className="rounded-lg bg-gray-100 p-2 hover:bg-gray-200" | ||
| > | ||
| <CareIcon icon="l-angle-left" /> | ||
| </button> | ||
| <button | ||
| onClick={handleNextMonth} | ||
| className="rounded-lg bg-gray-100 p-2 hover:bg-gray-200" | ||
| > | ||
| <CareIcon icon="l-angle-right" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-7 gap-0.5 md:gap-1.5"> | ||
| {weekDays.map((day) => ( | ||
| <div key={day} className="text-center font-medium"> | ||
| {day} | ||
| </div> | ||
| ))} | ||
|
|
||
| {calendarDays.map((date, index) => { | ||
| if (!date) { | ||
| return <div key={`empty-${index}`} className="min-h-[80px]" />; | ||
| } | ||
|
|
||
| const isToday = date.toDateString() === new Date().toDateString(); | ||
|
|
||
| return ( | ||
| <div | ||
| key={index} | ||
| className={cn( | ||
| "relative min-h-[80px] rounded-lg", | ||
| isToday && "ring-2 ring-primary-400", | ||
| )} | ||
| > | ||
| {props.renderDay ? ( | ||
| props.renderDay(date) | ||
| ) : ( | ||
| <span className="block text-right p-2 transition-all rounded-lg bg-white text-gray-900"> | ||
| {date.getDate()} | ||
| </span> | ||
| )} | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.