Collaboration
Project Management
Finance
Calendar
The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
Installation
npx love-ui@latest add calendarUsage
import { CalendarProvider, CalendarDate, CalendarDatePicker, CalendarMonthPicker, CalendarYearPicker, CalendarDatePagination, CalendarHeader, CalendarBody, CalendarItem } from "@/components/calendar"<CalendarProvider>
<CalendarDate>
<CalendarDatePicker>
<CalendarMonthPicker />
<CalendarYearPicker start={2024} end={2025} />
</CalendarDatePicker>
<CalendarDatePagination />
</CalendarDate>
<CalendarHeader />
<CalendarBody features={features}>
{({ feature }) => <CalendarItem feature={feature} key={feature.id} />}
</CalendarBody>
</CalendarProvider>Features
- Features are grouped by day
- Features are color-coded by their status
- Features are truncated if there are too many to fit in the grid cell
- Selectable date range
- Pagination of dates
- Internationalization through
localeprop
Examples
Without a date picker
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
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
Optimize integrated convergence
26
27
28
29
30
1
2
3
4
5
6
"use client";
import { faker } from "@faker-js/faker";
import {
CalendarBody,
CalendarHeader,
CalendarItem,
CalendarProvider,
} from "../../../../../packages/calendar";
// Seed faker to ensure consistent data between server and client
faker.seed(123);
const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
const statuses = [
{ id: faker.string.uuid(), name: "Planned", color: "#6B7280" },
{ id: faker.string.uuid(), name: "In Progress", color: "#F59E0B" },
{ id: faker.string.uuid(), name: "Done", color: "#10B981" },
];
const exampleFeatures = Array.from({ length: 20 })
.fill(null)
.map(() => ({
id: faker.string.uuid(),
name: capitalize(faker.company.buzzPhrase()),
startAt: faker.date.past({ years: 0.5, refDate: new Date() }),
endAt: faker.date.future({ years: 0.5, refDate: new Date() }),
status: faker.helpers.arrayElement(statuses),
}));
const Example = () => (
<CalendarProvider>
<CalendarHeader />
<CalendarBody features={exampleFeatures}>
{({ feature }) => <CalendarItem feature={feature} key={feature.id} />}
</CalendarBody>
</CalendarProvider>
);
export default Example;