mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
f00c14d0c1
* feat: implement booking calendar view with weekly layout - Create reusable WeekCalendarView component that displays bookings in a weekly calendar format - Replace EmptyScreen in BookingsCalendar with the new calendar view - Calendar view includes: - Week navigation with Today, Previous, and Next buttons - 7-day week view with time slots from 12 AM to 11 PM - Bookings displayed as colored blocks positioned by time - Support for event type colors and status-based colors - Responsive design that fills the viewport - Hover tooltips showing booking details - Filters remain functional at the top of the view Co-Authored-By: [email protected] <[email protected]> * refactor: use existing Calendar component from weeklyview - Replace custom calendar implementation with the existing Calendar component - Use parseEventTypeColor to properly handle event type colors - Simplify implementation by leveraging existing calendar infrastructure - Maintain week navigation and filtering functionality Co-Authored-By: [email protected] <[email protected]> * fix imports * fix: replace isSameOrAfter with isAfter || isSame - isSameOrAfter method does not exist in dayjs - Use combination of isAfter and isSame instead Co-Authored-By: [email protected] <[email protected]> * remove useBookerTime dependency from weekly calendar view * modify date range filters * initial callback * sort events * clean up FilterBar * add showBackgroundPattern * update styles * update style * update styles * fix type error * fix error * update styles * update styles * update event colors * rename component * persist weekStart on the url * use FilterBar * apply feedback * extract BorderColor type * use client * clean up * adjust styles * color-code events * rename borderColor to color * restore class name * add feature flag * update class name --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import dayjs from "@calcom/dayjs";
|
|
import type { TimeRange } from "@calcom/types/schedule";
|
|
|
|
import type { CalendarEvent } from "./types/events";
|
|
|
|
const startDate = dayjs().set("hour", 11).set("minute", 0);
|
|
|
|
export const events: CalendarEvent[] = [
|
|
{
|
|
id: 1,
|
|
title: "Event 1",
|
|
start: startDate.add(10, "minutes").toDate(),
|
|
end: startDate.add(45, "minutes").toDate(),
|
|
options: {
|
|
allDay: false,
|
|
color: "#ff0000",
|
|
status: "ACCEPTED",
|
|
},
|
|
source: "Booking",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Event 2",
|
|
start: startDate.add(1, "day").toDate(),
|
|
end: startDate.add(1, "day").add(30, "minutes").toDate(),
|
|
source: "Booking",
|
|
options: {
|
|
status: "ACCEPTED",
|
|
allDay: false,
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Event 3",
|
|
start: startDate.add(2, "day").toDate(),
|
|
end: startDate.add(2, "day").add(60, "minutes").toDate(),
|
|
source: "Booking",
|
|
options: {
|
|
status: "PENDING",
|
|
color: "#ff0000",
|
|
allDay: false,
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Event 4",
|
|
start: startDate.add(3, "day").toDate(),
|
|
end: startDate.add(3, "day").add(2, "hour").add(30, "minutes").toDate(),
|
|
source: "Booking",
|
|
options: {
|
|
status: "ACCEPTED",
|
|
allDay: false,
|
|
},
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Event 4 Overlap",
|
|
start: startDate.add(3, "day").add(30, "minutes").toDate(),
|
|
end: startDate.add(3, "day").add(2, "hour").add(45, "minutes").toDate(),
|
|
source: "Booking",
|
|
options: {
|
|
status: "ACCEPTED",
|
|
allDay: false,
|
|
},
|
|
},
|
|
];
|
|
|
|
export const blockingDates: TimeRange[] = [
|
|
{
|
|
start: startDate.add(1, "day").hour(10).toDate(),
|
|
end: startDate.add(1, "day").hour(13).toDate(),
|
|
},
|
|
];
|