SUN
MON
TUE
WED
THU
FRI
SAT
26
27
28
29
30
31
28Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
1 Mar
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
import { CalendarViewer, useCalendarViewer } from "calendar-viewer";
import { formatDate } from "date-fns";
export const App = () => {
const control = useCalendarViewer({ type: "gregorian" });
const events = [
{
date: new Date(),
title: "Lorem Ipsum is simply dummy text",
},
{
date: new Date(),
title: "Lorem Ipsum is simply dummy text",
},
{
date: new Date(),
title: "Lorem Ipsum is simply dummy text",
},
];
return (
<div className="p-10">
{/* head */}
<div className="flex gap-x-2 mb-2">
<div>{formatDate(control.startDate, "MMMM yyyy")}</div>
<span className="flex-1"></span>
<button
className="py-1 px-3 text-sm rounded-md bg-gray-100"
onClick={control.prev}
>
prev
</button>
<button
className="py-1 px-3 text-sm rounded-md bg-gray-100"
onClick={control.next}
>
next
</button>
</div>
{/* calendar */}
<CalendarViewer control={control} events={events} />
</div>
);
};