diff --git a/src/components/TaskStatus/TaskStatus.tsx b/src/components/TaskStatus/TaskStatus.tsx
index 4440557..37f2e16 100644
--- a/src/components/TaskStatus/TaskStatus.tsx
+++ b/src/components/TaskStatus/TaskStatus.tsx
@@ -3,22 +3,23 @@ import notStarted from './not-started.svg';
import inProgress from './in-progress.svg';
import completed from './completed.svg';
import cancelled from './cancelled.svg';
+import { Status } from '../App/types';
-export const TaskStatus = ({status}) => {
+export const TaskStatus = ({status}: {status: Status}) => {
switch (status) {
- case 'notStarted':
+ case Status.TODO:
return (
)
- case 'inProgress':
+ case Status.IN_PROGRESS:
return (
)
- case 'completed':
+ case Status.DONE:
return (
)
- case 'cancelled':
+ case Status.CANCELLED:
return (
)
diff --git a/src/components/Tasks/Tasks.tsx b/src/components/Tasks/Tasks.tsx
index b9aeb80..9b51741 100644
--- a/src/components/Tasks/Tasks.tsx
+++ b/src/components/Tasks/Tasks.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Task } from '../Task/Task';
import styles from './Tasks.module.css';
+import { Status } from '../App/types';
const tasks = [
{
@@ -13,7 +14,7 @@ const tasks = [
)},
- status: 'notStarted',
+ status: Status.TODO,
priority: (
<>
@@ -35,7 +36,7 @@ const tasks = [
)},
- status: 'inProgress',
+ status: Status.IN_PROGRESS,
priority: (
<>
@@ -50,7 +51,7 @@ const tasks = [
id: 3,
title: "Buy light bulbs",
project: {title: 'Home', color: '#E8F5E9'},
- status: 'completed',
+ status: Status.DONE,
priority: (
<>
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
new file mode 100644
index 0000000..2bbffd3
--- /dev/null
+++ b/src/components/Text/Text.tsx
@@ -0,0 +1,71 @@
+import React, { forwardRef, AnchorHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+type CommonProps = {
+ size?: 'xs' | 'sm' | 'md' | 'lg';
+ muted?: boolean;
+ bold?: boolean;
+ interactive?: boolean;
+ inherit?: boolean;
+ link?: boolean;
+ children: ReactNode;
+};
+
+type SpanProps = {
+ as?: 'span';
+} & CommonProps & HTMLAttributes
+
+type AnchorProps = {
+ as?: 'a';
+} & CommonProps & AnchorHTMLAttributes
+
+export const Text = forwardRef((props, ref: React.Ref) => {
+ const {
+ children,
+ as = 'span',
+ ...rest
+ } = props;
+
+ return (
+ {children}
+ )
+});
+
+const Root = styled.span`
+ font-family: 'Open Sans', sans-serif;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ text-align: left;
+ min-height: 18px;
+ font-weight: ${p => p.bold ? 600 : 'normal'};
+ font-size: ${p => {
+ switch (p.size) {
+ case 'xs':
+ return '10px';
+ case 'sm':
+ return '12px';
+ case 'lg':
+ return '15px';
+ case 'md':
+ default:
+ return '13px';
+ }
+ }};
+ color: ${p => {
+ // p.muted ? p.theme.mutedColor : p.inherit ? 'inherit' : p.theme.textColor
+ if (p.muted) {
+ return p.theme.mutedColor;
+ }
+ if (p.inherit) {
+ return 'inherit';
+ }
+ if (p.link) {
+ return p.theme.primaryColor;
+ }
+
+ return p.theme.textColor;
+ }};
+ cursor: ${p => p.interactive ? 'pointer' : 'inherit'};
+`;
diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts
new file mode 100644
index 0000000..b0c76af
--- /dev/null
+++ b/src/components/Text/index.ts
@@ -0,0 +1 @@
+export * from './Text';
diff --git a/src/components/WeekCalendar/components/WeekCalendar.tsx b/src/components/WeekCalendar/components/WeekCalendar.tsx
new file mode 100644
index 0000000..7d04d9e
--- /dev/null
+++ b/src/components/WeekCalendar/components/WeekCalendar.tsx
@@ -0,0 +1,212 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+import type {
+ IDraggable,
+ WeekCalendarColorScheme,
+ WeekEvent,
+ WeekEventDates,
+ WeekTimezone,
+ WeekTimebox,
+} from "../types";
+import { WeekCalendarView } from "../types";
+import { DayView } from "./views/DayView/DayView";
+import { type ReactElement } from "react";
+import { DAYS_COUNT_BY_VIEWS } from "./views/DayView/constants";
+
+type Props = {
+ /**
+ * Color scheme for the calendar.
+ */
+ colorScheme?: WeekCalendarColorScheme;
+ /**
+ * Currently selected date of the calendar.
+ */
+ date: Date;
+ /**
+ * Currently selected view of the calendar.
+ */
+ view: WeekCalendarView;
+ /**
+ * Height of one hour in pixels.
+ */
+ hourHeight?: number;
+ /**
+ * Drag'n'drop layers
+ */
+ layers: Partial>;
+ /**
+ * List of accepted drop targets.
+ */
+ accepts: (string | symbol)[];
+ /**
+ * Events to display.
+ */
+ events: WeekEvent[];
+ /**
+ * Timeboxes to display.
+ */
+ timeboxes: WeekTimebox[];
+ /**
+ * Timezones to display.
+ */
+ timezones: WeekTimezone[];
+ /**
+ * Renders an event with a custom styling.
+ *
+ * @param event Event to render.
+ * @param params Event's start and end dates.
+ */
+ renderEvent: (
+ event: WeekEvent,
+ params: { startDateTime: Date; endDateTime: Date },
+ ) => React.ReactNode;
+
+ /**
+ * Any additional info to display in the day header.
+ *
+ * @param date Date of the day..
+ */
+ renderDayInfo?(date: Date, events: WeekEvent[]): React.ReactNode;
+
+ /**
+ * Called when user scrolls calendar to a different date.
+ *
+ * @param date New date.
+ */
+ onDateChange(date: Date): void;
+
+ /**
+ * Called when user changes calendar's visible range.
+ *
+ * @param range New range.
+ */
+ onRangeChange(range: Interval): void;
+
+ /**
+ * Called when user adds a new event.
+ *
+ * @param dates New dates of the event.
+ * @param event The changed event.
+ */
+ onEventAdd(dates: WeekEventDates, event: TDroppable): void;
+
+ /**
+ * Called when user requests to add a new event.
+ *
+ * @param dates Dates of the new event.
+ */
+ onEventAddRequest(dates: WeekEventDates): void;
+
+ /**
+ * Called when user changes event dates.
+ *
+ * @param dates New dates of the event.
+ * @param event The changed event.
+ */
+ onEventChange(dates: WeekEventDates, event: WeekEvent): void;
+
+ /**
+ * Called when user changes timebox dates.
+ *
+ * @param dates New dates of the timebox.
+ * @param timebox The changed timebox.
+ */
+ onTimeboxChange(dates: WeekEventDates, timebox: WeekTimebox): void;
+
+ /**
+ * Called when user clicks on an event.
+ *
+ * @param event WeekEvent that was clicked.
+ */
+ onEventSelect?(event: WeekEvent): void;
+
+ /**
+ * Called when user tries to open context menu on an event.
+ *
+ * @param event WeekEvent that was clicked
+ */
+ onEventContextMenu?(event: WeekEvent, e: React.MouseEvent): void;
+
+ /**
+ * Called when user tries to open context menu on a timebox.
+ *
+ * @param timebox WeekTimebox that was clicked
+ */
+ onTimeboxContextMenu?(timebox: WeekTimebox, e: React.MouseEvent): void;
+};
+
+/**
+ * Main WeekCalendar component. It is a wrapper for all other components.
+ */
+export const WeekCalendar = (
+ props: Props,
+): JSX.Element => {
+ const {
+ events,
+ timeboxes,
+ colorScheme,
+ date,
+ view,
+ timezones,
+ layers,
+ accepts,
+ hourHeight,
+ renderEvent,
+ renderDayInfo,
+ onDateChange,
+ onRangeChange,
+ onEventAdd,
+ onEventAddRequest,
+ onEventChange,
+ onTimeboxChange,
+ onEventSelect,
+ onEventContextMenu,
+ onTimeboxContextMenu,
+ } = props;
+
+ const renderContent = () => {
+ switch (view) {
+ case WeekCalendarView.Day:
+ case WeekCalendarView.Week:
+ return (
+
+ {renderContent()}
+
+ );
+};
+
+const Root = styled.div`
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/AllDayEventBlock.tsx b/src/components/WeekCalendar/components/views/DayView/AllDayEventBlock.tsx
new file mode 100644
index 0000000..3244541
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/AllDayEventBlock.tsx
@@ -0,0 +1,248 @@
+import React, { type ReactNode, useEffect, useRef, useState } from "react";
+import type { IDraggable, WeekEvent, WeekEventDates } from "../../../types";
+import type { CSSProperties } from "react";
+import { useDrag } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import {
+ addDays,
+ differenceInDays,
+ endOfDay,
+ startOfDay,
+ subDays,
+} from "date-fns";
+import styled from "styled-components";
+import {
+ getAllDayDateFromPosition,
+ getCorrectedPosition,
+ getDateFromPosition,
+} from "./utils";
+import { EVENTS_PADDING_RIGHT } from "./constants";
+
+type ResizingState = "left" | "right" | false;
+
+type Props = {
+ event: WeekEvent;
+ style?: CSSProperties;
+ start: Date;
+ left: number;
+ length: number;
+ dayWidth: number;
+ hourHeight: number;
+ asideWidth: number;
+ container: HTMLDivElement;
+ containerRect: DOMRect;
+ headerHeight: number;
+ renderEvent(event: WeekEvent, params: WeekEventDates): React.ReactNode;
+ onEventChange(dates: WeekEventDates, event: WeekEvent): void;
+};
+
+export const AllDayEventBlock = (
+ props: Props,
+): JSX.Element => {
+ const {
+ renderEvent,
+ event: { startDate, endDate, ...event },
+ start,
+ dayWidth,
+ container,
+ containerRect,
+ headerHeight,
+ asideWidth,
+ onEventChange,
+ } = props;
+
+ const [isResizing, setResizing] = useState(false);
+ const [left, setLeft] = useState(props.left);
+ const [length, setLength] = useState(props.length);
+ const datesRef = useRef<[Date, Date]>([startDate!, endDate!]);
+
+ useEffect(() => {
+ setLeft(props.left);
+ setLength(props.length);
+ }, [props.left, props.length]);
+
+ const [{ isDragging }, drag, preview] = useDrag({
+ type: event.data.type,
+ item: event,
+ collect: (monitor) => ({
+ isDragging: Boolean(monitor.isDragging()),
+ }),
+ });
+
+ useEffect(() => {
+ preview(getEmptyImage());
+ }, []);
+
+ useEffect(() => {
+ const handleResize = (event: MouseEvent) => {
+ if (!isResizing) {
+ return;
+ }
+
+ const [x, y] = getCorrectedPosition([event.x, event.y], {
+ snapSize: [dayWidth, 100 / 4],
+ containerRect,
+ headerHeight,
+ asideWidth,
+ direction: isResizing,
+ });
+
+ const newDate = getAllDayDateFromPosition([x + container.scrollLeft, y], {
+ start,
+ headerHeight,
+ dayWidth,
+ asideWidth,
+ hourHeight: 100,
+ timeFrom: 0,
+ timeTo: 24,
+ });
+
+ if (isResizing === "right") {
+ const diffLength = differenceInDays(newDate, endDate) + 1;
+ const oldLength = props.length + 1;
+
+ setLength(oldLength + diffLength);
+ datesRef.current = [startDate!, newDate];
+ } else if (isResizing === "left") {
+ const diffLength = differenceInDays(startDate, newDate);
+ const oldLength = props.length + 1;
+
+ setLeft(x + container.scrollLeft);
+ setLength(oldLength + diffLength);
+ datesRef.current = [newDate, endDate!];
+ }
+ };
+
+ if (isResizing) {
+ document.addEventListener("mousemove", handleResize);
+ document.addEventListener("mouseup", handleStopResizing);
+ }
+
+ return () => {
+ document.removeEventListener("mousemove", handleResize);
+ document.removeEventListener("mouseup", handleStopResizing);
+ };
+ }, [
+ isResizing,
+ containerRect,
+ asideWidth,
+ headerHeight,
+ dayWidth,
+ left,
+ length,
+ ]);
+
+ const handleStartResizingLeft = (
+ event: React.MouseEvent,
+ ) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing("left");
+ };
+
+ const handleStartResizingRight = (
+ event: React.MouseEvent,
+ ) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing("right");
+ };
+
+ const handleStopResizing = (ev) => {
+ ev.stopPropagation();
+ ev.preventDefault();
+
+ if (!isResizing) {
+ return;
+ }
+
+ onEventChange(
+ {
+ startDate: startOfDay(datesRef.current[0]),
+ endDate: endOfDay(datesRef.current[1]),
+ },
+ event,
+ );
+ };
+
+ return (
+ {
+ setResizing(false);
+ // if (!isResizing) {
+ // onEventSelect(event);
+ // }
+ }}
+ isDragging={isDragging}
+ style={{
+ ...props.style,
+ height: 25,
+ left: isResizing ? left : props.left,
+ width: isResizing
+ ? `${length * dayWidth - EVENTS_PADDING_RIGHT}px`
+ : `${(props.length + 1) * dayWidth - EVENTS_PADDING_RIGHT}px`,
+ }}
+ ref={drag}
+ >
+ {renderEvent(event, {
+ startDate: isResizing === "left" ? datesRef.current[0] : startDate!,
+ endDate: isResizing === "right" ? datesRef.current[1] : endDate!,
+ })}
+
+
+
+
+
+ );
+};
+
+const ResizeHandlerContainer = styled.div`
+ position: absolute;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ width: 8px;
+ display: flex;
+ justify-content: center;
+ cursor: ew-resize;
+`;
+
+const ResizeHandlerContainerLeft = styled(ResizeHandlerContainer)`
+ left: 0;
+ padding-left: 5px;
+`;
+
+const ResizeHandlerContainerRight = styled(ResizeHandlerContainer)`
+ right: 0;
+ padding-right: 5px;
+`;
+
+const ResizeHandler = styled.span`
+ position: absolute;
+ display: inline-block;
+ width: 3px;
+ background-color: #fff;
+ border-radius: 3px;
+ height: calc(100% - 20%);
+ top: 10%;
+ opacity: 0;
+ transition: all 0.35s;
+`;
+
+const Root = styled.div<{ isDragging: boolean }>`
+ user-select: none;
+ position: absolute;
+ overflow: hidden;
+ background: ${(p) => p.theme.contentBackgroundColor};
+ color: ${(p) => p.theme.defaultEventTextColor};
+ border-radius: 4px;
+ margin: 0px;
+ z-index: 3;
+ opacity: ${(p) => (p.isDragging ? 0.5 : 1)};
+
+ &:hover ${ResizeHandler} {
+ opacity: 0.3;
+ }
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/CurrentTime.tsx b/src/components/WeekCalendar/components/views/DayView/CurrentTime.tsx
new file mode 100644
index 0000000..56eb685
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/CurrentTime.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { getPositionFromDate } from './utils';
+import { formatInTimeZone as formatTz } from 'date-fns-tz';
+import type { WeekTimezone } from '../../../types';
+
+type Props = {
+ startDate: Date;
+ asideWidth: number;
+ dayWidth: number;
+ headerHeight: number;
+ hourHeight: number;
+ startHour: number;
+ timeFormat: 12 | 24;
+ timezones: WeekTimezone[];
+};
+
+export const CurrentTime = (props: Props): JSX.Element => {
+ const {
+ startDate,
+ dayWidth,
+ timeFormat,
+ asideWidth,
+ headerHeight,
+ hourHeight,
+ startHour,
+ timezones = [],
+ } = props;
+
+ const [now, setNow] = useState(-1);
+ const intervalRef = useRef();
+
+ useEffect(() => {
+ const handleUpdate = () => {
+ const date = new Date();
+ const [, now] = getPositionFromDate(date, {
+ startDate,
+ dayWidth,
+ headerHeight,
+ startHour,
+ hourHeight,
+ });
+
+ setNow(now);
+ };
+
+ handleUpdate();
+
+ intervalRef.current = setInterval(handleUpdate, 1000);
+
+ return () => {
+ setNow(-1);
+ clearInterval(intervalRef.current);
+ };
+ }, [startDate, dayWidth, hourHeight]);
+
+ return (
+
+ {timezones.map((timezone) => (
+
+ {formatTz(new Date(), timezone.name, timeFormat === 12 ? 'h:mm aaa' : 'HH:mm', {})}
+
+ ))}
+
+ );
+};
+
+const Now = styled.div`
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ position: absolute;
+ justify-content: space-between;
+ z-index: 5;
+ background: ${(p) => p.theme.weekendTextColor};
+ color: #fff;
+ padding: 2px 4px;
+ right: 0;
+ transform: translateY(-50%);
+ border-radius: 3px;
+
+ & > span {
+ color: #fff;
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ }
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/DayView.tsx b/src/components/WeekCalendar/components/views/DayView/DayView.tsx
new file mode 100644
index 0000000..afcda4b
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/DayView.tsx
@@ -0,0 +1,1148 @@
+import React, {
+ memo,
+ useEffect,
+ useRef,
+ useState,
+ useLayoutEffect,
+ type ReactElement,
+ type MouseEvent,
+} from "react";
+import styled from "styled-components";
+import {
+ addDays,
+ addMinutes,
+ differenceInDays,
+ differenceInMinutes,
+ format,
+ isToday,
+ set,
+ startOfDay,
+ subDays,
+} from "date-fns";
+import { formatInTimeZone as formatTz } from "date-fns-tz";
+import { eachHourOfInterval, isSameDay, isWeekend, setHours } from "date-fns";
+import { useDayLayout } from "./useDayLayout";
+import {
+ ASIDE_WIDTH,
+ DATE_FORMAT,
+ DATE_LABEL_HEIGHT,
+ DAYS_DIFF,
+ DAYS_THRESHOLD,
+ EVENTS_PADDING_RIGHT,
+} from "./constants";
+import {
+ getCorrectedPosition,
+ getDateFromPosition,
+ getDnDDateFromPosition,
+ getPositionOfEvent,
+ getRange,
+} from "./utils";
+import type {
+ IDraggable,
+ WeekEvent,
+ WeekEventDates,
+ WeekTimezone,
+ WeekTimebox,
+} from "../../../types";
+import { EventBlock } from "./EventBlock";
+import { useDrop } from "react-dnd";
+import {
+ CALENDAR_EVENT_BLOCK,
+ CALENDAR_TASK_BLOCK,
+ CALENDAR_TIMEBOX_BLOCK,
+} from "../../../constants";
+import { useAllDayLayout } from "./useAllDayLayout";
+import { AllDayEventBlock } from "./AllDayEventBlock";
+import { useTimeboxesLayout } from "./useTimeboxesLayout";
+import { TimeboxBlock } from "./TimeboxBlock";
+import { Timeline } from "./Timeline";
+import { CurrentTime } from "./CurrentTime";
+import type { NewAllDayEvent, NewEvent } from "./types";
+
+type Props = {
+ /**
+ * Currently selected date of the calendar.
+ */
+ date: Date;
+
+ /**
+ * Events to display.
+ */
+ events: WeekEvent[];
+
+ /**
+ * Timeboxes to display.
+ */
+ timeboxes: WeekTimebox[];
+
+ /**
+ * Timezones to display.
+ */
+ timezones: WeekTimezone[];
+
+ /**
+ * Edit mode of the calendar.
+ */
+ mode?: "events" | "timeboxes";
+
+ /**
+ * List of accepted drop targets
+ */
+ accepts?: (string | symbol)[];
+
+ /**
+ * Drag'n'drop layer for displaying dragging events
+ */
+ layer?: ReactElement;
+
+ /**
+ * Amount of days to display.
+ */
+ daysCount: number;
+
+ /**
+ * Hour from which to start displaying calendar grid.
+ */
+ startHour?: number;
+
+ /**
+ * Hour at which to end displaying calendar grid.
+ */
+ endHour?: number;
+
+ /**
+ * Height of an hour in pixels.
+ */
+ hourHeight?: number;
+
+ /**
+ * Calls to render an event with a custom styling.
+ *
+ * @param event Event to render.
+ * @param params Actual value of event start and end dates.
+ */
+ renderEvent(
+ event: WeekEvent,
+ params: { startDateTime: Date; endDateTime: Date },
+ ): React.ReactNode;
+
+ /**
+ * Any additional info to display in the day header.
+ *
+ * @param date Date of the day..
+ */
+ renderDayInfo?(date: Date, events: WeekEvent[]): React.ReactNode;
+
+ /**
+ * Called when user scrolls calendar to a different date.
+ *
+ * @param date New date.
+ */
+ onDateChange(date: Date): void;
+
+ /**
+ * Called when user changes calendar's visible range.
+ *
+ * @param range New range.
+ */
+ onRangeChange(range: Interval): void;
+
+ /**
+ * Called when user adds a new event.
+ *
+ * @param dates New dates of the event.
+ * @param event The changed event.
+ */
+ onEventAdd(dates: WeekEventDates, event: TDroppable): void;
+
+ /**
+ * Called when user requests to add a new event.
+ *
+ * @param dates Dates of the new event.
+ */
+ onEventAddRequest(dates: WeekEventDates): void;
+
+ /**
+ * Called when user changes event dates.
+ *
+ * @param dates New dates of the event.
+ * @param event The changed event.
+ */
+ onEventChange(dates: WeekEventDates, event: WeekEvent): void;
+
+ /**
+ * Called when user changes timebox dates.
+ *
+ * @param dates New dates of the timebox.
+ * @param timebox The changed timebox.
+ */
+ onTimeboxChange(dates: WeekEventDates, timebox: WeekTimebox): void;
+
+ /**
+ * Called when user clicks on an event.
+ *
+ * @param event WeekEvent that was clicked.
+ */
+ onEventSelect?(event: WeekEvent): void;
+
+ /**
+ * Called when user tries to open context menu on an event.
+ *
+ * @param event WeekEvent that was clicked
+ */
+ onEventContextMenu?(event: WeekEvent, e: React.MouseEvent): void;
+
+ /**
+ * Called when user tries to open context menu on a timebox.
+ *
+ * @param timebox WeekTimebox that was clicked
+ */
+ onTimeboxContextMenu?(timebox: WeekTimebox, e: React.MouseEvent): void;
+};
+
+export const DayView = (
+ props: Props,
+): JSX.Element => {
+ const {
+ date,
+ events = [],
+ timeboxes = [],
+ timezones = [],
+ accepts = [],
+ mode = "events",
+ layer,
+ daysCount,
+ startHour = 0,
+ endHour = 23,
+ hourHeight = 100,
+ renderEvent,
+ renderDayInfo = () => null,
+ onDateChange,
+ onRangeChange,
+ onEventAdd,
+ onEventChange,
+ onEventAddRequest,
+ onTimeboxChange,
+ onEventSelect,
+ onEventContextMenu,
+ onTimeboxContextMenu,
+ } = props;
+
+ const isFirstRender = useRef(true);
+
+ const rootRef = useRef(null);
+ const bodyRef = useRef(null);
+ const rootRectRef = useRef(null);
+
+ const edges = useRef({
+ left: 0,
+ right: 0,
+ });
+ const direction = useRef(0);
+
+ const asideWidth = ASIDE_WIDTH * timezones.length;
+ const [dayWidth, setDayWidth] = useState(0);
+ const [headerHeight] = useState(DATE_LABEL_HEIGHT + (100 / 4) * 2.5);
+ const [range, setRange] = useState(getRange(date));
+
+ const [newEvent, setNewEvent] = useState(null);
+ const [newAllDayEvent, setNewAllDayEvent] = useState(
+ null,
+ );
+
+ const hours = eachHourOfInterval({
+ start: setHours(date, startHour),
+ end: setHours(date, endHour),
+ });
+
+ const eventsMap = useDayLayout(events);
+ const allDayEvents = useAllDayLayout(events);
+ const timeboxesMap = useTimeboxesLayout(timeboxes);
+
+ const [, dropRef] = useDrop({
+ accept: [
+ ...accepts,
+ CALENDAR_EVENT_BLOCK,
+ CALENDAR_TASK_BLOCK,
+ CALENDAR_TIMEBOX_BLOCK,
+ ],
+ collect: (monitor) => ({
+ type: monitor.getItemType(),
+ }),
+ drop: (item, monitor) => {
+ const type = monitor.getItemType();
+ const coords = monitor.getClientOffset();
+
+ if (!coords || !rootRectRef.current || !rootRef.current) {
+ return null;
+ }
+
+ const event = item as WeekEvent;
+ let duration = 30;
+ let dates;
+
+ const dateInfo = getDnDDateFromPosition([coords.x, coords.y], {
+ start: range[0],
+ snapSize: [dayWidth, hourHeight / 4],
+ scrollLeft: rootRef.current.scrollLeft,
+ scrollTop: rootRef.current.scrollTop,
+ containerRect: rootRectRef.current,
+ asideWidth,
+ hourHeight: hourHeight,
+ headerHeight,
+ });
+
+ if (
+ type === CALENDAR_EVENT_BLOCK ||
+ type === CALENDAR_TASK_BLOCK ||
+ type === CALENDAR_TIMEBOX_BLOCK ||
+ accepts.includes(type)
+ ) {
+ if (!dateInfo.isAllDay) {
+ if (event.endDateTime) {
+ duration = differenceInMinutes(
+ new Date(event.endDateTime),
+ new Date(event.startDateTime),
+ );
+ } else {
+ duration = 60 / 2;
+ }
+ } else {
+ if (event.endDate) {
+ duration = differenceInMinutes(
+ new Date(event.endDate),
+ new Date(event.startDate),
+ );
+ } else {
+ duration = 60 * 24;
+ }
+ }
+ }
+
+ if (dateInfo.date) {
+ dates = {
+ startDate: dateInfo.date,
+ endDate: addMinutes(dateInfo.date, duration),
+ startDateTime: null,
+ endDateTime: null,
+ };
+ } else {
+ dates = {
+ startDate: null,
+ endDate: null,
+ startDateTime: dateInfo.dateTime,
+ endDateTime: addMinutes(dateInfo.dateTime, duration),
+ };
+ }
+
+ if (type === CALENDAR_TASK_BLOCK || type === CALENDAR_EVENT_BLOCK) {
+ onEventChange(dates, item as WeekEvent);
+ } else if (type === CALENDAR_TIMEBOX_BLOCK) {
+ onTimeboxChange(dates, item as WeekTimebox);
+ } else {
+ onEventAdd(dates, item as TDroppable);
+ }
+ },
+ });
+
+ useEffect(() => {
+ if (rootRef.current) {
+ if (direction.current === 0) {
+ const index = range.findIndex((d) => isSameDay(d, date));
+ rootRef.current.scrollLeft = dayWidth * index;
+ rootRef.current.scrollTop = 800;
+ } else if (direction.current === -1) {
+ rootRef.current.scrollLeft = edges.current.left + DAYS_DIFF * dayWidth;
+ } else if (direction.current === 1) {
+ rootRef.current.scrollLeft = edges.current.right - DAYS_DIFF * dayWidth;
+ }
+
+ direction.current = 0;
+ }
+ }, [range, dayWidth]);
+
+ const handleResize = (element) => {
+ const rect = element?.getBoundingClientRect();
+
+ if (rect) {
+ const dayWidth = (rect.width - asideWidth) / daysCount;
+
+ if (rootRef.current) {
+ rootRectRef.current = rootRef.current.getBoundingClientRect();
+ }
+
+ edges.current = {
+ left: DAYS_THRESHOLD * dayWidth,
+ right: (range.length - DAYS_THRESHOLD * 2) * dayWidth,
+ };
+
+ setDayWidth(dayWidth);
+ }
+ };
+
+ useEffect(() => {
+ const resize = () => {
+ handleResize(bodyRef.current);
+ };
+
+ const observer = new ResizeObserver(resize);
+ observer.observe(rootRef.current);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, []);
+
+ useLayoutEffect(() => {
+ const newRange = getRange(date);
+
+ onRangeChange({
+ start: newRange[0],
+ end: newRange[newRange.length - 1],
+ });
+ setRange(newRange);
+ }, [date]);
+
+ const renderEvents = (date: Date) => {
+ const key = format(date, DATE_FORMAT);
+ const events = eventsMap.get(key) || [];
+
+ return events.map((eventData) => {
+ const position = getPositionOfEvent(
+ {
+ start: eventData.startDateTime,
+ end: eventData.endDateTime,
+ },
+ {
+ startTime: set(date, {
+ hours: startHour,
+ minutes: 0,
+ seconds: 0,
+ milliseconds: 0,
+ }),
+ hourHeight,
+ },
+ );
+
+ const eventWidth = (dayWidth - EVENTS_PADDING_RIGHT) * eventData.width;
+ const colWidth = (dayWidth - EVENTS_PADDING_RIGHT) * eventData.colWidth;
+
+ return (
+
+ {hours.map((hour) => (
+
+ );
+ };
+
+ const renderAllDay = (date, index) => {
+ const style = {
+ width: `${dayWidth}px`,
+ height: headerHeight - DATE_LABEL_HEIGHT,
+ left: index * dayWidth,
+ };
+
+ return (
+
+ {format(newEvent.dates[0], "HH:mm")} -{" "}
+ {format(newEvent.dates[1], "HH:mm")}
+
+ );
+ };
+
+ const renderNewAllDayEvent = () => {
+ if (!newAllDayEvent) {
+ return null;
+ }
+
+ const left = dayWidth * differenceInDays(newAllDayEvent.start, range[0]);
+
+ return (
+
+
+
+
+ {timezones.map((timezone) => (
+ {timezone.label}
+ ))}
+
+ All day
+
+
+
+ {range.map((date) => (
+
+
+
+ {format(date, "EEE")}
+
+
+ {format(date, "d")}
+
+
+
+ {renderDayInfo(
+ date,
+ (eventsMap.get(format(date, DATE_FORMAT)) || []).map(
+ (e) => e.event,
+ ),
+ )}
+
+
+ ))}
+
+
+ {range.map(renderAllDay)}
+ {renderAllDayEvents()}
+ {renderNewAllDayEvent()}
+
+
+
+
+ event.stopPropagation()}
+ >
+ {hours.map((hour) => (
+
+
+ {timezones.map((timezone) => (
+
+ {formatTz(
+ set(hour, {
+ minutes: 0,
+ seconds: 0,
+ milliseconds: 0,
+ }),
+ timezone.name,
+ "HH:mm",
+ {},
+ )}
+
+ ))}
+
+
+ ))}
+
+
+ {range.map(renderDay)}
+ {renderNewEvent()}
+
+
+
+
+
+ );
+};
+
+const Root = styled.div`
+ overflow: scroll;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ overscroll-behavior: auto;
+ scroll-snap-type: x proximity;
+ border: 1px solid ${(p) => p.theme.delimiter};
+ user-select: none;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+const Container = memo(styled.div`
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ height: 100%;
+`);
+
+const Body = styled.div`
+ position: relative;
+ display: flex;
+ flex-shrink: 0;
+ width: 100%;
+ height: 100%;
+`;
+
+const Day = styled.div`
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ scroll-snap-align: start;
+ scroll-snap-stop: always;
+`;
+
+const Hour = styled.div<{ $isWeekend?: boolean; $hourHeight: number }>`
+ position: relative;
+ height: ${(p) => p.$hourHeight}px;
+ width: 100%;
+ box-sizing: border-box;
+
+ border-width: 1px 1px 0 0;
+ border-style: solid;
+ border-color: ${(p) => p.theme.delimiter};
+ background-color: ${(p) =>
+ p.$isWeekend ? p.theme.weekendBackgroundColor : p.theme.dayBackgroundColor};
+`;
+
+const Aside = styled.aside`
+ position: sticky;
+ left: -1px;
+ bottom: 0;
+ border-left: 1px solid ${(p) => p.theme.delimiter};
+ background-color: ${(p) => p.theme.dayBackgroundColor};
+ z-index: 5;
+`;
+
+const Header = styled.header`
+ position: sticky;
+ display: flex;
+ top: 0;
+ margin-left: -1px;
+ background-color: ${(p) => p.theme.dayBackgroundColor};
+ border-bottom: 1px solid ${(p) => p.theme.delimiter};
+ z-index: 6;
+`;
+
+const AllDayLabel = styled.div`
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: ${(p) => p.theme.dayTextColor};
+`;
+
+const AllDayContainer = styled.div`
+ position: relative;
+ display: flex;
+ overflow-y: scroll;
+`;
+
+const AllDay = styled.div<{ $isWeekend?: boolean }>`
+ position: sticky;
+ top: 0;
+ box-sizing: border-box;
+ border-width: 0 0 0 1px;
+ border-style: solid;
+ border-color: ${(p) => p.theme.delimiter};
+ background-color: ${(p) =>
+ p.$isWeekend ? p.theme.weekendBackgroundColor : p.theme.dayBackgroundColor};
+`;
+
+const Timezones = styled.div`
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+`;
+
+const Timezone = styled.div`
+ font-size: 12px;
+ color: ${(p) => p.theme.dayTextColor};
+`;
+
+const Corner = styled.div`
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ background-color: ${(p) => p.theme.dayBackgroundColor};
+ position: sticky;
+ left: -1px;
+ border-right: 1px solid ${(p) => p.theme.delimiter};
+ border-bottom: 1px solid ${(p) => p.theme.delimiter};
+ z-index: 4;
+
+ & ${Timezones} {
+ border-bottom: 1px solid ${(p) => p.theme.delimiter};
+ }
+`;
+
+const Dates = styled.div`
+ position: sticky;
+ display: flex;
+`;
+
+const HeaderContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ position: relative;
+`;
+
+const Days = styled.div``;
+
+const HeaderDate = styled.div<{ $isToday?: boolean }>`
+ display: flex;
+ height: ${DATE_LABEL_HEIGHT}px;
+ box-sizing: border-box;
+ padding: 4px;
+ border-left: 1px solid ${(p) => p.theme.delimiter};
+ text-align: left;
+ & > div {
+ flex: 1 0;
+ }
+
+ ${(p) =>
+ p.$isToday
+ ? `border-bottom: 2px solid ${p.theme.weekendTextColor}`
+ : `border-bottom: 1px solid ${p.theme.delimiter}`}
+`;
+
+const DayOfWeek = styled.div<{ $isWeekend?: boolean }>`
+ font-size: 12px;
+ color: ${(p) =>
+ p.$isWeekend ? p.theme.weekendTextColor : p.theme.dayTextColor};
+`;
+
+const DateNumber = styled.div<{ $isToday?: boolean }>`
+ font-size: 20px;
+ color: ${(p) =>
+ p.$isToday ? p.theme.weekendTextColor : p.theme.dayTextColor};
+`;
+
+const BlankEvent = styled.div`
+ position: absolute;
+ font-size: 12px;
+ color: ${(p) => p.theme.dayTextColor};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: ${(p) => p.theme.eventBackgroundColor};
+ z-index: 5;
+ border-radius: 4px;
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/EmptyBlock.tsx b/src/components/WeekCalendar/components/views/DayView/EmptyBlock.tsx
new file mode 100644
index 0000000..e5b45f3
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/EmptyBlock.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const EmptyBlock = (): JSX.Element => {
+
+ return ;
+ editable?: boolean;
+ style?: React.CSSProperties;
+ top: number;
+ height: number;
+ startDate: Date;
+ dayWidth: number;
+ hourHeight: number;
+ container: HTMLDivElement;
+ containerRect: DOMRect;
+ headerHeight: number;
+ asideWidth: number;
+ startHour: number;
+ endHour: number;
+ onEventSelect(event: WeekEvent): void;
+ onEventChange(dates: WeekEventDates, event: WeekEvent): void;
+ onEventContextMenu(event: WeekEvent, e: React.MouseEvent): void;
+ renderEvent: (
+ event: WeekEvent,
+ params: {
+ startDateTime: Date;
+ endDateTime: Date;
+ },
+ ) => React.ReactNode;
+};
+
+type ResizingState = 'top' | 'bottom' | false;
+
+export const EventBlock = (props: Props): JSX.Element => {
+ const {
+ event,
+ editable = true,
+ startDate,
+ container,
+ containerRect,
+ headerHeight,
+ asideWidth,
+ hourHeight,
+ dayWidth,
+ startHour,
+ endHour,
+ style,
+ onEventSelect,
+ onEventChange,
+ onEventContextMenu,
+ renderEvent,
+ } = props;
+
+ const resizingPos = useRef<[number, number]>();
+ const [currentDates, setCurrentDates] = useState<[Date, Date]>([null, null]);
+
+ const [isResizing, setResizing] = useState(false);
+ const [top, setTop] = useState(props.top || 0);
+ const [height, setHeight] = useState(props.height || 0);
+
+ const [{ isDragging }, dragRef, preview] = useDrag({
+ type: event.data.type,
+ item: event,
+ collect: (monitor) => ({
+ isDragging: Boolean(monitor.isDragging()),
+ }),
+ // canDrag: () => event.isEditable && editable,
+ });
+
+ useEffect(() => {
+ preview(getEmptyImage());
+ }, []);
+
+ useEffect(() => {
+ const handleResize = (event: MouseEvent) => {
+ if (!isResizing) {
+ return;
+ }
+
+ const [x, y] = getCorrectedPosition([event.x, event.y + (container?.scrollTop || 0)], {
+ snapSize: [dayWidth, hourHeight / 4],
+ containerRect: containerRect,
+ headerHeight,
+ asideWidth,
+ direction: isResizing,
+ });
+
+ const date = getDateFromPosition([x + container.scrollLeft + asideWidth, y], {
+ start: startDate,
+ headerHeight,
+ dayWidth,
+ hourHeight,
+ asideWidth,
+ timeFrom: startHour,
+ timeTo: endHour,
+ });
+
+ if (isResizing === 'bottom') {
+ setHeight(Math.max(y - props.top - headerHeight, hourHeight / 4));
+ setCurrentDates([currentDates[0], date]);
+ } else if (isResizing === 'top') {
+ const newHeight = props.top - y + headerHeight + props.height;
+
+ if (newHeight > hourHeight / 4) {
+ setTop(y - headerHeight);
+ }
+ setHeight(Math.max(newHeight, hourHeight / 4));
+ setCurrentDates([date, currentDates[1]]);
+ }
+ resizingPos.current = [x, y];
+ };
+
+ if (isResizing) {
+ document.addEventListener('mousemove', handleResize);
+ document.addEventListener('mouseup', handleStopResizing);
+ }
+
+ return () => {
+ document.removeEventListener('mousemove', handleResize);
+ document.removeEventListener('mouseup', handleStopResizing);
+ };
+ }, [dayWidth, hourHeight, containerRect, container, headerHeight, asideWidth, isResizing]);
+
+ const handleStartResizingTop = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing('top');
+
+ return false;
+ };
+
+ const handleStartResizingBottom = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing('bottom');
+
+ return false;
+ };
+
+ const handleStopResizing = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (resizingPos.current && container) {
+ const [x, y] = resizingPos.current;
+
+ const date = getDateFromPosition([x + container.scrollLeft + asideWidth, y], {
+ start: startDate,
+ headerHeight,
+ dayWidth,
+ hourHeight,
+ asideWidth,
+ timeFrom: startHour,
+ timeTo: endHour,
+ });
+
+ if (isResizing === 'bottom') {
+ onEventChange(
+ {
+ startDateTime: event.startDateTime,
+ endDateTime: max([date, addMinutes(event.startDateTime, 15)]),
+ },
+ event,
+ );
+ } else if (isResizing === 'top') {
+ onEventChange(
+ {
+ startDateTime: min([date, subMinutes(event.endDateTime, 15)]),
+ endDateTime: event.endDateTime,
+ },
+ event,
+ );
+ }
+ }
+
+ setCurrentDates([null, null]);
+ setResizing(false);
+ };
+
+ const handleContextMenu = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ onEventContextMenu(event, e);
+ };
+
+ return (
+ {
+ e.stopPropagation();
+
+ return false;
+ }}
+ onContextMenu={handleContextMenu}
+ >
+
+
+ {
+ if (editable && !isResizing) {
+ onEventSelect(event);
+ }
+ }}
+ ref={dragRef}
+ />
+
+
+ {renderEvent(props.event, {
+ startDateTime: currentDates[0],
+ endDateTime: currentDates[1],
+ })}
+
+ );
+};
+
+const ResizeHandler = styled.span`
+ display: inline-block;
+ height: 3px;
+ background-color: rgba(0, 0, 0, 0.4);
+ border-radius: 3px;
+ width: 100%;
+ opacity: 0;
+ transition: all 0.35s;
+`;
+
+const Root = styled.div<{ $dragging?: boolean; $editable?: boolean }>`
+ position: absolute;
+ z-index: 4;
+ border: 1px solid transparent;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:hover ${ResizeHandler} {
+ opacity: 0.7;
+ }
+`;
+
+const DragHandler = styled.div`
+ inset: 2px 0;
+ position: absolute;
+ z-index: 1;
+`;
+
+const ResizeHandlerContainer = styled.div`
+ left: 25%;
+ width: 50%;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ cursor: ns-resize;
+ z-index: 3;
+`;
+
+const ResizeHandlerContainerTop = styled(ResizeHandlerContainer)`
+ top: 0;
+ padding-top: 1px;
+`;
+
+const ResizeHandlerContainerBottom = styled(ResizeHandlerContainer)`
+ bottom: 0;
+ padding-bottom: 1px;
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/TimeboxBlock.tsx b/src/components/WeekCalendar/components/views/DayView/TimeboxBlock.tsx
new file mode 100644
index 0000000..e9c5380
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/TimeboxBlock.tsx
@@ -0,0 +1,158 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDrag } from "react-dnd";
+import { CALENDAR_TIMEBOX_BLOCK } from "../../../constants";
+import type { WeekTimebox } from "../../../types";
+import { colord } from "colord";
+import styled, { useTheme } from "styled-components";
+import { getEmptyImage } from "react-dnd-html5-backend";
+
+type ResizingState = "top" | "bottom" | false;
+
+type Props = {
+ top: number;
+ height: number;
+ timebox: WeekTimebox;
+ editable: boolean;
+ start: Date;
+ dayWidth: number;
+ hourHeight: number;
+ headerHeight: number;
+ asideWidth: number;
+ containerRect: DOMRect;
+ container: HTMLDivElement | null;
+};
+
+export const TimeboxBlock = (props: Props): JSX.Element => {
+ const { timebox, dayWidth, editable } = props;
+ const { isLight } = useTheme();
+
+ const [isResizing, setResizing] = useState(false);
+ const [top, setTop] = useState(props.top || 0);
+ const [height, setHeight] = useState(props.height || 0);
+ const [currentDates, setCurrentDates] = useState<[Date, Date]>([null, null]);
+ const resizingPos = useRef<[number, number]>();
+
+ const [, drag, preview] = useDrag({
+ type: CALENDAR_TIMEBOX_BLOCK,
+ item: timebox,
+ canDrag: () => editable,
+ });
+
+ useEffect(() => {
+ preview(getEmptyImage());
+ }, []);
+
+ const opacity = isLight ? (editable ? 0.75 : 0.55) : editable ? 0.25 : 0.15;
+
+ const background =
+ "repeating-linear-gradient(45deg," +
+ `${colord(timebox.backgroundColor).alpha(opacity).toRgbString()}, ` +
+ `${colord(timebox.backgroundColor).alpha(opacity).toRgbString()} 4px, ` +
+ `${colord(timebox.backgroundColor).alpha(0.01).toRgbString()} 4px, ` +
+ `${colord(timebox.backgroundColor).alpha(0.01).toRgbString()} 10px` +
+ ")";
+
+ const handleStartResizingTop = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing("top");
+
+ return false;
+ };
+
+ const handleStartResizingBottom = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setResizing("bottom");
+
+ return false;
+ };
+
+ return (
+
+
+ {timebox.title}
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+const ResizeHandlerContainer = styled.div`
+ left: 25%;
+ width: 50%;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ cursor: ns-resize;
+ z-index: 1;
+`;
+
+const ResizeHandlerContainerTop = styled(ResizeHandlerContainer)`
+ top: 0;
+ padding-top: 2px;
+`;
+
+const ResizeHandlerContainerBottom = styled(ResizeHandlerContainer)`
+ bottom: 0;
+ padding-bottom: 2px;
+`;
+
+const ResizeHandler = styled.span`
+ display: inline-block;
+ height: 3px;
+ background-color: rgba(0, 0, 0, 0.4);
+ border-radius: 3px;
+ width: 100%;
+ opacity: 0;
+ transition: all 0.35s;
+`;
+
+const Root = styled.div`
+ position: absolute;
+ font-size: 12px;
+ box-sizing: border-box;
+ padding: 2px;
+ z-index: 3;
+`;
+
+const Content = styled.div`
+ height: 100%;
+ position: relative;
+ z-index: 1;
+`;
+
+const Background = styled.div`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: start;
+ justify-content: start;
+ padding: 4px;
+ border-radius: 4px;
+ box-sizing: border-box;
+`;
+
+const DragHandler = styled.div<{ draggable: boolean }>`
+ position: absolute;
+ cursor: ${(p) => (p.draggable ? "grab" : "default")};
+ inset: 0;
+`;
diff --git a/src/components/WeekCalendar/components/views/DayView/Timeline.tsx b/src/components/WeekCalendar/components/views/DayView/Timeline.tsx
new file mode 100644
index 0000000..597cf49
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/Timeline.tsx
@@ -0,0 +1,117 @@
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { getPositionFromDate } from './utils';
+import { format } from 'date-fns';
+
+type Props = {
+ startDate: Date;
+ style: CSSProperties;
+ asideWidth: number;
+ startHour: number;
+ dayWidth: number;
+ headerHeight: number;
+ hourHeight: number;
+}
+
+export const Timeline = (props: Props): JSX.Element => {
+ const {
+ startDate,
+ style,
+ startHour,
+ asideWidth,
+ dayWidth,
+ headerHeight,
+ hourHeight,
+ } = props;
+
+ const [now, setNow] = useState(-1);
+ const [day, setDay] = useState(0);
+ const intervalRef = useRef();
+
+ useEffect(() => {
+ const handleUpdate = () => {
+ const date = new Date();
+ const [nowDay, now] = getPositionFromDate(date, {
+ startDate,
+ dayWidth,
+ headerHeight,
+ hourHeight,
+ startHour,
+ });
+
+ setNow(now);
+ setDay(nowDay);
+ };
+
+ handleUpdate();
+
+ intervalRef.current = setInterval(handleUpdate, 1000);
+
+ return () => {
+ clearInterval(intervalRef.current);
+ };
+ }, [startDate, dayWidth, hourHeight]);
+
+ return (
+ <>
+ = {
+ event: WeekEvent;
+ width: number;
+ offset: number;
+};
+
+export const useAllDayLayout = (events: WeekEvent[]) => {
+ return useMemo(() => {
+ const allEvents: AllDayEventData[] = [];
+
+ events
+ .filter((event) => event.startDate && event.endDate && event.startDate < event.endDate)
+ .forEach((event) => {
+ allEvents.push({
+ event,
+ width: differenceInCalendarDays(event.endDate!, event.startDate!) + 1,
+ offset: 0,
+ });
+ });
+
+ const rows: AllDayEventData[][] = [[]];
+ let rowIndex = 0;
+
+ allEvents
+ .sort((a, b) => {
+ return b.width - a.width;
+ })
+ .forEach((eventData) => {
+ let added = false;
+
+ while (!added) {
+ const row = rows[rowIndex] || [];
+
+ if (
+ row.some((e) =>
+ areIntervalsOverlapping(
+ {
+ start: eventData.event.startDate!,
+ end: eventData.event.endDate!,
+ },
+ {
+ start: e.event.startDate!,
+ end: e.event.endDate!,
+ },
+ ),
+ )
+ ) {
+ rowIndex++;
+ } else {
+ row.push(eventData);
+ rows[rowIndex] = row;
+
+ rowIndex = 0;
+ added = true;
+ }
+ }
+ });
+
+ console.log();
+
+ rows.forEach((row, index) => {
+ row.forEach((eventData) => {
+ eventData.offset = index;
+ });
+ });
+
+ return allEvents;
+ }, [events]);
+};
diff --git a/src/components/WeekCalendar/components/views/DayView/useDayLayout.ts b/src/components/WeekCalendar/components/views/DayView/useDayLayout.ts
new file mode 100644
index 0000000..c2b3338
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/useDayLayout.ts
@@ -0,0 +1,193 @@
+import {
+ areIntervalsOverlapping,
+ eachDayOfInterval,
+ endOfDay,
+ format,
+ isBefore,
+ startOfDay,
+} from 'date-fns';
+import { useMemo } from 'react';
+import { DATE_FORMAT } from './constants';
+import type { WeekEvent } from '../../../types';
+
+export type EventData = {
+ startDateTime: Date;
+ endDateTime: Date;
+ offset: number;
+ width: number;
+ event: WeekEvent;
+ overlaps: EventData[];
+ colWidth: number;
+};
+
+/**
+ * Hook for calculating layout of events for DayView
+ *
+ * @param events Array of WeekEvents
+ * @returns Map of EventData arrays, where key is date in DATE_FORMAT format
+ */
+export const useDayLayout = (
+ events: WeekEvent[],
+): Map[]> => {
+ return useMemo(() => {
+ const result = new Map[]>();
+
+ events
+ .filter(
+ (event) =>
+ event.startDateTime &&
+ event.endDateTime &&
+ isBefore(event.startDateTime, event.endDateTime),
+ )
+ .sort((b, a) => {
+ return (
+ (a.startDate?.getTime() || a.startDateTime!.getTime()) -
+ (b.startDate?.getTime() || b.startDateTime!.getTime())
+ );
+ })
+ .forEach((event) => {
+ if (event.startDateTime && event.endDateTime) {
+ const days = eachDayOfInterval({
+ start: event.startDateTime,
+ end: event.endDateTime,
+ });
+
+ days.forEach((day, index) => {
+ const key = format(day, DATE_FORMAT);
+ const l = days.length;
+ let startDateTime;
+ let endDateTime;
+
+ if (index === 0) {
+ startDateTime = event.startDateTime;
+ } else {
+ startDateTime = startOfDay(day);
+ }
+
+ if (index === l - 1) {
+ endDateTime = event.endDateTime;
+ } else {
+ endDateTime = endOfDay(day);
+ }
+
+ const dateEvents = result.get(key) || [];
+
+ dateEvents.push({
+ event,
+ startDateTime,
+ endDateTime,
+ offset: -1,
+ width: 1,
+ overlaps: [],
+ colWidth: 0,
+ });
+
+ result.set(key, dateEvents);
+ });
+ }
+ });
+
+ // Filling up array of overlapping events
+ result.forEach((day) => {
+ day.forEach((eventDataMain) => {
+ day.forEach((eventDataSecond) => {
+ try {
+ if (
+ eventDataMain !== eventDataSecond &&
+ areIntervalsOverlapping(
+ {
+ start: eventDataMain.event.startDateTime!,
+ end: eventDataMain.event.endDateTime!,
+ },
+ {
+ start: eventDataSecond.event.startDateTime!,
+ end: eventDataSecond.event.endDateTime!,
+ },
+ )
+ ) {
+ eventDataMain.overlaps.push(eventDataSecond);
+ }
+ } catch {
+ // Do nothing
+ }
+ });
+ });
+
+ const cols: EventData[][] = [];
+ let colIndex = 0;
+
+ day.forEach((eventDataMain) => {
+ let col = cols[colIndex] || [];
+ let added = false;
+
+ while (!added) {
+ if (
+ col.some((d) => {
+ try {
+ return areIntervalsOverlapping(
+ {
+ start: eventDataMain.event.startDateTime!,
+ end: eventDataMain.event.endDateTime!,
+ },
+ {
+ start: d.event.startDateTime!,
+ end: d.event.endDateTime!,
+ },
+ );
+ } catch (error) {
+ return false;
+ }
+ })
+ ) {
+ colIndex++;
+ col = cols[colIndex] || [];
+ } else {
+ col.push(eventDataMain);
+ cols[colIndex] = col;
+ colIndex = 0;
+ added = true;
+ }
+ }
+ });
+
+ cols.forEach((col, index) => {
+ col.forEach((d) => {
+ d.offset = index;
+ d.width = 1 / cols.length;
+ });
+ });
+
+ day.forEach((eventDataMain) => {
+ eventDataMain.colWidth = 1 / cols.length;
+
+ for (let colIndex = eventDataMain.offset + 1; colIndex < cols.length; colIndex++) {
+ const col = cols[colIndex];
+ if (
+ !col.some((d) => {
+ try {
+ return areIntervalsOverlapping(
+ {
+ start: eventDataMain.event.startDateTime!,
+ end: eventDataMain.event.endDateTime!,
+ },
+ {
+ start: d.event.startDateTime!,
+ end: d.event.endDateTime!,
+ },
+ );
+ } catch (error) {
+ return false;
+ }
+ })
+ ) {
+ eventDataMain.width += 1 / cols.length;
+ } else {
+ break;
+ }
+ }
+ });
+ });
+
+ return result;
+ }, [events]);
+};
diff --git a/src/components/WeekCalendar/components/views/DayView/useTimeboxesLayout.ts b/src/components/WeekCalendar/components/views/DayView/useTimeboxesLayout.ts
new file mode 100644
index 0000000..fa0df9d
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/useTimeboxesLayout.ts
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { eachDayOfInterval, endOfDay, format, startOfDay } from "date-fns";
+import { DATE_FORMAT } from "./constants";
+import type { WeekTimebox } from "../../../types";
+
+export const useTimeboxesLayout = (timeboxes: WeekTimebox[] = []): Map => {
+ return useMemo(() => {
+ const map = new Map();
+
+ timeboxes.forEach((timebox) => {
+ const days = eachDayOfInterval({
+ start: new Date(timebox.startDateTime),
+ end: new Date(timebox.endDateTime),
+ });
+
+ days.forEach((day, index) => {
+ const key = format(day, DATE_FORMAT);
+ const data = map.get(key) || [];
+
+ data.push({
+ ...timebox,
+ startDateTime: index === 0 ? timebox.startDateTime : startOfDay(day),
+ endDateTime: index === days.length - 1 ? timebox.endDateTime : endOfDay(day),
+ });
+ map.set(key, data);
+ })
+ });
+
+ return map;
+ }, [timeboxes]);
+};
diff --git a/src/components/WeekCalendar/components/views/DayView/utils.ts b/src/components/WeekCalendar/components/views/DayView/utils.ts
new file mode 100644
index 0000000..e247381
--- /dev/null
+++ b/src/components/WeekCalendar/components/views/DayView/utils.ts
@@ -0,0 +1,246 @@
+import {
+ addDays,
+ addMinutes,
+ differenceInDays,
+ differenceInMinutes,
+ eachDayOfInterval,
+ startOfDay,
+ subDays,
+} from 'date-fns';
+import { DAYS_DIFF } from './constants';
+
+/**
+ * Get the range of dates to render.
+ *
+ * @param date Date from which to get the range.
+ * @returns Array of the dates to render.
+ */
+export const getRange = (date: Date): Date[] => {
+ return eachDayOfInterval({
+ start: subDays(date, DAYS_DIFF),
+ end: addDays(date, DAYS_DIFF * 2),
+ });
+};
+
+type Position = {
+ top: number;
+ height: number;
+};
+
+type GetPositionOfEventOptions = {
+ startTime: Date;
+ hourHeight: number;
+};
+
+/**
+ * Calculate absolute position of the event.
+ *
+ * @param eventDate start and end date of the event
+ * @param opts params for calculating position
+ * @returns Position of the event
+ */
+export const getPositionOfEvent = (
+ eventDate: { start: Date; end: Date },
+ opts: GetPositionOfEventOptions,
+): Position => {
+ const { startTime, hourHeight } = opts;
+
+ const diffMinsFromStart = differenceInMinutes(startTime, startOfDay(startTime));
+
+ const minuteHeight = hourHeight / 60;
+ const minutes = differenceInMinutes(eventDate.end, eventDate.start);
+
+ return {
+ top:
+ differenceInMinutes(eventDate.start, startOfDay(eventDate.end)) * minuteHeight -
+ diffMinsFromStart * minuteHeight,
+ height: minutes * minuteHeight,
+ };
+};
+
+type GetCorrectedPositionParams = {
+ snapSize: [number, number];
+ containerRect: DOMRect;
+ headerHeight: number;
+ asideWidth: number;
+ direction: 'top' | 'bottom' | 'left' | 'right';
+};
+
+type Coords = [number, number];
+
+/**
+ * Corrects position according to the params.
+ *
+ * @param coords Original coordinates of the event
+ * @param params
+ * @returns
+ */
+export const getCorrectedPosition = (
+ coords: Coords,
+ params: GetCorrectedPositionParams,
+): Coords => {
+ const [x, y] = coords;
+ const {
+ snapSize: [snapX, snapY],
+ containerRect,
+ headerHeight,
+ asideWidth,
+ direction,
+ } = params;
+
+ const tempX = x - containerRect.left - asideWidth;
+ const tempY = y - containerRect.top - headerHeight;
+
+ const roundFunctionForY = direction === 'top' ? Math.floor : Math.ceil;
+
+ const newX = Math.floor(tempX / snapX) * snapX;
+ const newY = roundFunctionForY(tempY / snapY) * snapY + headerHeight;
+
+ return [newX, newY];
+};
+
+type GetDateFromPositionParams = {
+ start: Date;
+ headerHeight: number;
+ dayWidth: number;
+ asideWidth: number;
+ hourHeight: number;
+ timeFrom: number;
+ timeTo: number;
+};
+
+/**
+ * Calculate date from the position.
+ *
+ * @param coords Coords of the position
+ * @param params Calendar properties to calculate the date
+ * @returns Date from the position
+ */
+export const getDateFromPosition = (coords: Coords, params: GetDateFromPositionParams): Date => {
+ const [x, y] = coords;
+ const { start, headerHeight, dayWidth, hourHeight, asideWidth, timeFrom } = params;
+
+ const minuteHeight = hourHeight / 60;
+ const date = addDays(start, Math.round((x - asideWidth) / dayWidth));
+ const mins = Math.round((y - headerHeight) / minuteHeight + timeFrom * 60);
+
+ return addMinutes(date, mins);
+};
+
+export const getAllDayDateFromPosition = (
+ coords: Coords,
+ params: GetDateFromPositionParams,
+): Date => {
+ const [x] = coords;
+ const { start, dayWidth, asideWidth } = params;
+
+ return addDays(start, Math.round((x - asideWidth) / dayWidth) + 1);
+};
+
+type GetDnDDateTimeFromPositionParams = {
+ start: Date;
+ containerRect: DOMRect;
+ snapSize: [number, number];
+ scrollLeft: number;
+ scrollTop: number;
+ asideWidth: number;
+ headerHeight: number;
+ hourHeight: number;
+};
+
+export const getDnDDateFromPosition = (
+ coords: Coords,
+ params: GetDnDDateTimeFromPositionParams,
+) => {
+ const [x, y] = coords;
+ const {
+ start,
+ snapSize: [snapX, snapY],
+ containerRect,
+ asideWidth,
+ scrollLeft,
+ scrollTop,
+ headerHeight,
+ hourHeight,
+ } = params;
+
+ const isAllDay = getIsAllDay({ y, containerRect, headerHeight });
+
+ let date = addDays(start, Math.floor((x + scrollLeft - containerRect.left - asideWidth) / snapX));
+
+ if (!isAllDay) {
+ const diff = Math.floor((y - containerRect.top - headerHeight + scrollTop) / snapY) * snapY;
+ const minuteHeight = hourHeight / 60;
+
+ date = addMinutes(date, diff / minuteHeight);
+ } else {
+ date = startOfDay(date);
+ }
+
+ return isAllDay ? { date, isAllDay } : { dateTime: date, isAllDay };
+};
+
+type GetIsAllDayParams = {
+ y: number;
+ containerRect: DOMRect;
+ headerHeight: number;
+};
+
+/**
+ * Returns true is dragged event is over all day block.
+ *
+ * @param params data required to calculate the position
+ */
+export const getIsAllDay = (params: GetIsAllDayParams): boolean => {
+ const { y, containerRect, headerHeight } = params;
+
+ return y < containerRect.top + headerHeight;
+};
+
+type GetDnDCorrectedPositionParams = {
+ snapSize: [number, number];
+ container: [number, number];
+ dateLabelHeight: number;
+ headerHeight: number;
+ scrollTop: number;
+};
+
+export const getDnDCorrectedPosition = (coords: Coords, params: GetDnDCorrectedPositionParams) => {
+ let [x, y] = coords;
+ const {
+ snapSize: [snapX, snapY],
+ container: [containerX, containerY],
+ headerHeight,
+ scrollTop,
+ } = params;
+
+ x -= containerX;
+ y -= containerY + headerHeight;
+
+ x = Math.floor(x / snapX) * snapX + containerX;
+ y = Math.floor((y + scrollTop) / snapY) * snapY - scrollTop + containerY + headerHeight;
+
+ return [x, y];
+};
+
+type GetPositionFromDateParams = {
+ startDate: Date;
+ dayWidth: number;
+ hourHeight: number;
+ startHour: number;
+ headerHeight: number;
+};
+
+export const getPositionFromDate = (
+ date: Date,
+ params: GetPositionFromDateParams,
+): [number, number] => {
+ const { startDate, dayWidth, hourHeight, startHour, headerHeight } = params;
+
+ const minuteHeight = hourHeight / 60;
+ const minutes = date.getHours() * 60 + date.getMinutes();
+
+ const daysDiff = differenceInDays(date, startDate);
+
+ return [daysDiff * dayWidth, hourHeight * (minutes - startHour * 60) / 60];
+};
diff --git a/src/components/WeekCalendar/constants.ts b/src/components/WeekCalendar/constants.ts
new file mode 100644
index 0000000..bea074e
--- /dev/null
+++ b/src/components/WeekCalendar/constants.ts
@@ -0,0 +1,18 @@
+import { type WeekCalendarColorScheme } from "./types";
+
+export const defaultColorScheme: WeekCalendarColorScheme = {
+ dayBackgroundColor: "#fff",
+ weekendBackgroundColor: "#fff",
+ dayTextColor: "#444",
+ weekendTextColor: "#e00",
+ mutedTextColor: "#ccc",
+ delimiter: "#e5e5e5",
+ weekDelimiter: "#ccc",
+ eventBorderRadius: "0.5rem",
+ defaultEventBackgroundColor: "#000",
+ defaultEventBackgroundTextColor: "#fff",
+};
+
+export const CALENDAR_EVENT_BLOCK = Symbol("CALENDAR_EVENT_BLOCK");
+export const CALENDAR_TASK_BLOCK = Symbol("CALENDAR_TASK_BLOCK");
+export const CALENDAR_TIMEBOX_BLOCK = Symbol("CALENDAR_TIMEBOX_BLOCK");
diff --git a/src/components/WeekCalendar/index.ts b/src/components/WeekCalendar/index.ts
new file mode 100644
index 0000000..8737e3e
--- /dev/null
+++ b/src/components/WeekCalendar/index.ts
@@ -0,0 +1 @@
+export { WeekCalendar } from './components/WeekCalendar';
diff --git a/src/components/WeekCalendar/stories/DayViewLayer.tsx b/src/components/WeekCalendar/stories/DayViewLayer.tsx
new file mode 100644
index 0000000..39af76e
--- /dev/null
+++ b/src/components/WeekCalendar/stories/DayViewLayer.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useDragLayer } from 'react-dnd';
+import { DayViewLayerProps } from '../types';
+import { CALENDAR_EVENT_BLOCK, CALENDAR_TASK_BLOCK, CALENDAR_TIMEBOX_BLOCK } from '../constants';
+import { getDnDCorrectedPosition, getDnDDateFromPosition, getIsAllDay } from '../components/views/DayView/utils';
+import { differenceInMinutes, format } from 'date-fns';
+
+export const TASK = Symbol('Task');
+
+const ALLOWED_TYPES = [CALENDAR_EVENT_BLOCK, CALENDAR_TASK_BLOCK, CALENDAR_TIMEBOX_BLOCK, TASK];
+
+export const DayViewLayer = (props: Partial): JSX.Element => {
+ const {
+ dayWidth,
+ start,
+ startHour,
+ endHour,
+ asideWidth,
+ dateLabelHeight,
+ headerHeight,
+ hourHeight,
+ container,
+ containerRect,
+ defaultDuration = 30,
+ } = props;
+
+ const { offset, item, type, isDragging } = useDragLayer((monitor) => ({
+ item: monitor.getItem(),
+ type: monitor.getItemType(),
+ offset: monitor.getClientOffset(),
+ isDragging: monitor.isDragging(),
+ }));
+
+ if (!isDragging || !offset || !ALLOWED_TYPES.includes(type as symbol)) {
+ return null;
+ }
+
+ const x = offset.x;
+ const y = offset.y;
+
+ let duration;
+
+ const event = item;
+ const isAllDay = getIsAllDay({ y, containerRect, headerHeight });
+
+ if (
+ type === CALENDAR_EVENT_BLOCK ||
+ type === CALENDAR_TASK_BLOCK ||
+ type === CALENDAR_TIMEBOX_BLOCK
+ ) {
+ if (event.startDateTime && event.endDateTime) {
+ duration = differenceInMinutes(new Date(event.endDateTime), new Date(event.startDateTime));
+ } else if (event.startDate && event.endDate) {
+ if (isAllDay) {
+ duration = differenceInMinutes(new Date(event.endDate), new Date(event.startDate));
+ } else {
+ duration = defaultDuration;
+ }
+ }
+ } else if (type === 'TASK_BLOCK') {
+ duration = event.duration || defaultDuration;
+ }
+
+ const [newX, newY] = getDnDCorrectedPosition([x, y], {
+ snapSize: [dayWidth, hourHeight / 4],
+ headerHeight: headerHeight,
+ dateLabelHeight: dateLabelHeight,
+ container: [containerRect.left + asideWidth, containerRect.top],
+ scrollTop: container.scrollTop,
+ });
+
+ const style = getItemStyle([x, y], [newX, newY], {
+ dayWidth,
+ asideWidth: asideWidth,
+ containerRect: containerRect,
+ dateLabelHeight: dateLabelHeight,
+ headerHeight: headerHeight,
+ hourHeight: isAllDay ? 100 : hourHeight,
+ duration,
+ });
+
+ const dates = getDnDDateFromPosition([newX, newY], {
+ start,
+ snapSize: [dayWidth, hourHeight / 4],
+ containerRect,
+ asideWidth,
+ headerHeight,
+ hourHeight: isAllDay ? 100 : hourHeight,
+ scrollLeft: container.scrollLeft,
+ scrollTop: container.scrollTop,
+ });
+
+ return (
+
+
+ {item.title}
+ {dates.dateTime && format(dates.dateTime, 'HH:mm')}
+
+
+ );
+};
+
+const Root = styled.section`
+ pointer-events: none;
+ position: fixed;
+ inset: 0;
+ z-index: 9999;
+`;
+
+const Task = styled.div`
+ overflow: hidden;
+ font-size: 12px;
+ box-sizing: border-box;
+ border: 1px solid ${p => p.theme.primaryColor};
+ border-radius: 4px;
+ background-color: ${p => p.theme.contentBackgroundColor};
+ padding: 2px 10px;
+`;
+
+type TransformState = 'free' | 'allDay' | 'event';
+type Coords = [number, number];
+
+type GetItemStyleParams = {
+ containerRect: DOMRect;
+ asideWidth: number;
+ dateLabelHeight: number;
+ headerHeight: number;
+ hourHeight: number;
+ dayWidth: number;
+ duration?: number;
+};
+
+const getItemStyle = (defaultPos: Coords, newPos: Coords, params: GetItemStyleParams) => {
+ const {
+ dayWidth,
+ hourHeight,
+ asideWidth,
+ dateLabelHeight,
+ headerHeight,
+ containerRect,
+ duration = 60 / 2,
+ } = params;
+ const [x, y] = defaultPos;
+ const [newX, newY] = newPos;
+
+ let width, height, transform;
+
+ let state: TransformState = 'free';
+
+ if (x > containerRect.left + asideWidth && y > containerRect.top + dateLabelHeight) {
+ if (y < containerRect.top + headerHeight) {
+ state = 'allDay';
+ } else {
+ state = 'event';
+ }
+ }
+
+ if (state === 'free') {
+ transform = `translate3d(${x}px, ${y}px, 0)`;
+ width = dayWidth;
+ height = hourHeight / 4;
+ } else if (state === 'allDay') {
+ // allDayEvent
+ height = 100 / 4;
+ transform = `translate3d(${newX}px, ${dateLabelHeight + containerRect.top}px, 0)`;
+ width = Math.max((duration / (24 * 60)) * dayWidth, dayWidth);
+ } else {
+ // event
+ transform = `translate3d(${newX}px, ${newY}px, 0)`;
+ width = `${dayWidth}px`;
+ height = (duration * hourHeight) / 60;
+ }
+
+ return {
+ transform,
+ height,
+ width,
+ };
+};
diff --git a/src/components/WeekCalendar/stories/WeekCalendar.stories.tsx b/src/components/WeekCalendar/stories/WeekCalendar.stories.tsx
new file mode 100644
index 0000000..c40ac27
--- /dev/null
+++ b/src/components/WeekCalendar/stories/WeekCalendar.stories.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import styled from 'styled-components';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { WeekCalendar } from '../components/WeekCalendar';
+import { CALENDAR_TASK_BLOCK, defaultColorScheme } from '../constants';
+import { WeekCalendarView, WeekEvent, WeekEventDates, WeekTimebox } from '../types';
+import { EventData, defaultEvents, defaultTimeboxes, defaultTimezones } from './data';
+import { format } from 'date-fns';
+import { useCallback } from 'react';
+import { DndProvider } from 'react-dnd';
+import { DayViewLayer } from './DayViewLayer';
+import { useMemo } from 'react';
+
+const meta: Meta = {
+ component: WeekCalendar,
+};
+
+export default meta;
+
+export const Primary = {
+ name: '7-day view',
+ render: (): JSX.Element => {
+ const [date, setDate] = useState(new Date());
+ const [events, setEvents] = useState[]>(defaultEvents);
+ const [timeboxes, setTimeboxes] = useState(defaultTimeboxes);
+
+ const renderEvent = useCallback((event: WeekEvent, params: WeekEventDates) => {
+ const dates =
+ event.startDateTime && event.endDateTime ? (
+
+ {format(params.startDateTime || event.startDateTime, 'HH:mm')}
+ -
+ {format(params.endDateTime || event.endDateTime, 'HH:mm')}
+
+ ) : null;
+
+ return (
+
+ {event.data.title}
+ {dates}
+
+ );
+ }, []);
+
+ const handleChangeEvent = useCallback((dates: WeekEventDates, event: WeekEvent) => {
+ setEvents((prev) =>
+ prev.map((e) => {
+ if (e.id === event.id) {
+ return {
+ ...e,
+ startDate: dates.startDate,
+ endDate: dates.endDate,
+ startDateTime: dates.startDateTime,
+ endDateTime: dates.endDateTime,
+ };
+ }
+
+ return e;
+ }),
+ );
+ }, []);
+
+ const handleAddNewEvent = useCallback((dates: WeekEventDates) => {
+ setEvents((prev) => [
+ ...prev,
+ {
+ id: Math.random().toString(),
+ startDate: dates.startDate,
+ endDate: dates.endDate,
+ startDateTime: dates.startDateTime,
+ endDateTime: dates.endDateTime,
+ data: {
+ title: 'New event',
+ type: CALENDAR_TASK_BLOCK,
+ },
+ },
+ ]);
+ }, []);
+
+ const layers = useMemo(
+ () => ({
+ [WeekCalendarView.Week]:
+
+
+ setDate(new Date(2024, 2, 23))}>23 march
+ setDate(new Date())}>Today
+ setDate(new Date(2024, 11, 16))}>16 december
+
+ null}
+ />
+
+
+
+ );
+ },
+};
+
+const Root = styled.div`
+ width: 100%;
+ height: 500px;
+`;
+
+const EventBlock = styled.div`
+ font-size: 12px;
+ background-color: ${(p) => p.theme.eventBackgroundColor};
+ height: 100%;
+ width: 100%;
+ border-radius: 4px;
+ padding: 2px 4px;
+ overflow: hidden;
+`;
+
+const EventTime = styled.div`
+ font-size: 10px;
+`;
diff --git a/src/components/WeekCalendar/stories/data.ts b/src/components/WeekCalendar/stories/data.ts
new file mode 100644
index 0000000..1fee666
--- /dev/null
+++ b/src/components/WeekCalendar/stories/data.ts
@@ -0,0 +1,60 @@
+import { set } from 'date-fns';
+import { WeekEvent, WeekTimezone, WeekTimebox } from '../types';
+import { CALENDAR_EVENT_BLOCK } from '../constants';
+
+export type EventData = {
+ title: string;
+ type: symbol;
+};
+
+export const defaultTimezones: WeekTimezone[] = [
+ {
+ label: '🏠',
+ name: 'Europe/Madrid',
+ isMain: true,
+ },
+ {
+ label: '🏢',
+ name: 'Europe/Moscow',
+ },
+];
+
+export const defaultEvents: WeekEvent[] = [
+ {
+ id: '1',
+ startDateTime: set(new Date(), { hours: 10, minutes: 15 }),
+ endDateTime: set(new Date(), { hours: 11, minutes: 15 }),
+ data: {
+ title: 'Event 1',
+ type: CALENDAR_EVENT_BLOCK,
+ },
+ },
+ {
+ id: '3',
+ startDateTime: set(new Date(), { hours: 0, minutes: 0 }),
+ endDateTime: set(new Date(), { hours: 3, minutes: 0 }),
+ data: {
+ title: 'Event 3',
+ type: CALENDAR_EVENT_BLOCK,
+ },
+ },
+ {
+ id: '2',
+ startDate: set(new Date(), { hours: 0, minutes: 0 }),
+ endDate: set(new Date(), { hours: 23, minutes: 59 }),
+ data: {
+ title: 'Event 2',
+ type: CALENDAR_EVENT_BLOCK,
+ },
+ }
+];
+
+export const defaultTimeboxes: WeekTimebox[] = [
+ {
+ id: '1',
+ title: 'Timebox 1',
+ startDateTime: set(new Date(), { hours: 8, minutes: 0 }),
+ endDateTime: set(new Date(), { hours: 18, minutes: 0 }),
+ backgroundColor: '#274ce9',
+ },
+];
diff --git a/src/components/WeekCalendar/types.ts b/src/components/WeekCalendar/types.ts
new file mode 100644
index 0000000..2e008a2
--- /dev/null
+++ b/src/components/WeekCalendar/types.ts
@@ -0,0 +1,69 @@
+export interface IDraggable {
+ type: symbol;
+}
+
+export enum WeekCalendarView {
+ Day = 'Day',
+ Days3 = 'Days3',
+ WorkWeek = 'WorkWeek',
+ Week = 'Week',
+ Month = 'Month',
+}
+
+export type WeekTimezone = {
+ label: string;
+ name: string;
+ isMain?: boolean;
+}
+
+export type WeekCalendarColorScheme = {
+ dayBackgroundColor: string;
+ weekendBackgroundColor: string;
+ dayTextColor: string;
+ weekendTextColor: string;
+ mutedTextColor: string;
+ delimiter: string;
+ weekDelimiter: string;
+ eventBorderRadius: string;
+ defaultEventBackgroundColor: string;
+ defaultEventBackgroundTextColor: string;
+};
+
+export type WeekEventDates = {
+ startDate?: Date;
+ endDate?: Date;
+ startDateTime?: Date;
+ endDateTime?: Date;
+};
+
+export type WeekEvent = {
+ id: string;
+ startDate?: Date;
+ endDate?: Date;
+ startDateTime?: Date;
+ endDateTime?: Date;
+ data: TData;
+};
+
+export type WeekTimebox = {
+ id: string;
+ title: string;
+ startDateTime: Date;
+ endDateTime: Date;
+ backgroundColor: string;
+}
+
+export type DayViewLayerProps = {
+ dayWidth: number;
+ start: Date;
+ startHour: number;
+ endHour: number;
+ asideWidth: number;
+ dateLabelHeight: number;
+ headerHeight: number;
+ hourHeight: number;
+ container: HTMLDivElement;
+ containerRect: DOMRect;
+ defaultDuration?: number;
+};
+
diff --git a/src/hooks/useCalendarRange.ts b/src/hooks/useCalendarRange.ts
new file mode 100644
index 0000000..e06017e
--- /dev/null
+++ b/src/hooks/useCalendarRange.ts
@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+ addDays,
+ endOfDay,
+ endOfWeek,
+ startOfDay,
+ startOfWeek,
+} from 'date-fns';
+import type { Interval } from 'date-fns';
+import { CalendarView } from '../types/calendar';
+import type { DateMutator } from '../types/calendar';
+
+export const useCalendarRange = (
+ startDate: Date,
+ view: CalendarView,
+ weekStart: 0 | 1,
+) => {
+ const [date, setDate] = useState(startDate);
+ const [range, setRange] = useState(
+ getRangeForView(date, view, weekStart),
+ );
+
+ useEffect(() => {
+ setRange(getRangeForView(date, view, weekStart));
+ }, [date, view, weekStart]);
+
+ const prev = useCallback(() => {
+ if (!view || !date) return;
+
+ const mutator = DateMutators[view];
+ setDate(mutator(date, -1, weekStart));
+ }, [view, date]);
+
+ const next = useCallback(() => {
+ if (!view || !date) return;
+
+ const mutator = DateMutators[view];
+ setDate(mutator(date, 1, weekStart));
+ }, [view, date]);
+
+ const today = useCallback(() => {
+ const mutator = DateMutators[view];
+ setDate(mutator(date, 0, weekStart));
+ }, [date]);
+
+ return {
+ date,
+ range,
+ today,
+ next,
+ prev,
+ setDate,
+ };
+};
+
+const getRangeForView = (
+ date: Date,
+ view: CalendarView,
+ weekStart: 0 | 1,
+): Interval => {
+ switch (view) {
+ case CalendarView.Days3:
+ return {
+ start: startOfDay(date),
+ end: endOfDay(addDays(date, 2)),
+ };
+ case CalendarView.Week: {
+ return {
+ start: date,
+ end: addDays(date, 6),
+ };
+ }
+ case CalendarView.Day:
+ return {
+ start: startOfDay(date),
+ end: endOfDay(date),
+ };
+ default:
+ throw new Error('There is no such View');
+ }
+};
+
+const DateMutators: Record = {
+ [CalendarView.Day]: (date, direction) =>
+ direction === 0 ? new Date() : addDays(date, 1 * direction),
+ [CalendarView.Days3]: (date, direction) =>
+ direction === 0 ? new Date() : addDays(date, 3 * direction),
+ [CalendarView.WorkWeek]: (date) => {
+ return date;
+ },
+ [CalendarView.Week]: (date, direction, weekStart) =>
+ direction === 0
+ ? startOfWeek(new Date(), { weekStartsOn: weekStart })
+ : startOfWeek(addDays(date, 7 * direction), { weekStartsOn: weekStart }),
+ [CalendarView.Month]: (date) => {
+ return date;
+ },
+};
diff --git a/src/hooks/useCalendarTheme.ts b/src/hooks/useCalendarTheme.ts
new file mode 100644
index 0000000..5caaf56
--- /dev/null
+++ b/src/hooks/useCalendarTheme.ts
@@ -0,0 +1,60 @@
+import { useMemo } from "react"
+
+const light = {
+ backgroundColor: "#fafafa",
+ textColor: "#444",
+ textColor2: "#626362",
+ altTextColor: "#fff",
+ mutedColor: "#888",
+ primaryColor: "#03a9f4",
+ successColor: "#00aa00",
+ dangerColor: "#e00",
+ warningColor: "#ee8a00",
+ contentBackgroundColor: "#fff",
+ borderColor: "#eee",
+ inputBorderColor: "#bbb",
+ selectedBackgroundColor: "#e1f5fe",
+ eventBackgroundColor: "#e1f5fe",
+ eventColor: "#047ad8",
+ shadow: "0 0 2px rgb(0 0 0 / 60%)",
+};
+
+
+export const dark = {
+ backgroundColor: "#474e5b",
+ textColor: "#eee",
+ textColor2: "#e3e3e3",
+ altTextColor: "#fff",
+ mutedColor: "#c4c6c9",
+ primaryColor: "#03a9f4",
+ successColor: "#00aa00",
+ dangerColor: "#f26464",
+ warningColor: "#ee8a00",
+ contentBackgroundColor: "#4b525f",
+ borderColor: "#5d5d5d",
+ inputBorderColor: "#6c6c6c",
+ selectedBackgroundColor: "#363e48",
+ eventBackgroundColor: "#e1f5fe",
+ eventColor: "#047ad8",
+ shadow: "0 0 2px rgb(0 0 0 / 60%)",
+};
+
+export const useCalendarTheme = () => {
+
+ const theme = light;
+
+ return useMemo(() => {
+ return {
+ dayBackgroundColor: theme.contentBackgroundColor,
+ weekendBackgroundColor: theme.backgroundColor,
+ delimiter: theme.borderColor,
+ weekendTextColor: theme.dangerColor,
+ eventBorderRadius: "4px",
+ weekDelimiter: theme.primaryColor,
+ dayTextColor: theme.textColor,
+ mutedTextColor: theme.mutedColor,
+ defaultEventBackgroundColor: theme.eventBackgroundColor,
+ defaultEventBackgroundTextColor: "#444",
+ };
+ }, []);
+}
\ No newline at end of file
diff --git a/src/hooks/useDebouncedCallback.ts b/src/hooks/useDebouncedCallback.ts
new file mode 100644
index 0000000..d3c4bb2
--- /dev/null
+++ b/src/hooks/useDebouncedCallback.ts
@@ -0,0 +1,31 @@
+import {useEffect, useRef} from 'react';
+
+export function useDebouncedCallback(
+ callback: (...args: A) => void,
+ wait: number
+) {
+ const argsRef = useRef ();
+ const timeout = useRef>();
+
+ function cleanup() {
+ if (timeout.current) {
+ clearTimeout(timeout.current);
+ }
+ }
+
+ useEffect(() => cleanup, []);
+
+ return function debouncedCallback(
+ ...args: A
+ ) {
+ argsRef.current = args;
+
+ cleanup();
+
+ timeout.current = setTimeout(() => {
+ if (argsRef.current) {
+ callback(...argsRef.current);
+ }
+ }, wait);
+ };
+}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index f1369e8..8e821e4 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -15,7 +15,6 @@ import Footer from '../components/Footer.astro';
+ {" "}
+ {title}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
@@ -35,7 +36,7 @@ const tasks = [
@@ -50,7 +51,7 @@ const tasks = [
id: 3,
title: "Buy light bulbs",
project: {title: 'Home', color: '#E8F5E9'},
- status: 'completed',
+ status: Status.DONE,
priority: (
<>
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
new file mode 100644
index 0000000..2bbffd3
--- /dev/null
+++ b/src/components/Text/Text.tsx
@@ -0,0 +1,71 @@
+import React, { forwardRef, AnchorHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+type CommonProps = {
+ size?: 'xs' | 'sm' | 'md' | 'lg';
+ muted?: boolean;
+ bold?: boolean;
+ interactive?: boolean;
+ inherit?: boolean;
+ link?: boolean;
+ children: ReactNode;
+};
+
+type SpanProps = {
+ as?: 'span';
+} & CommonProps & HTMLAttributes