Calendar Editor with React | Drag & Resize Elements
There is a time-tracker app, Increaser, with an interface for adding work sessions the same way you would add an event in Google Calendar. Let me show you how I implemented it with React.
To make it comfortable for the user, we want to distinguish an editable session from the existing ones and make it easy to change session boundaries and position.
import {
MouseEventHandler,
ReactNode,
useEffect,
useMemo,
useRef,
useState,
} from "react"
import { useEvent } from "react-use"
import { Interval } from "shared/entities/Interval"
import { enforceRange } from "shared/utils/enforceRange"
import { formatDuration } from "shared/utils/formatDuration"
import styled, { css } from "styled-components"
import { HSLA } from "ui/colors/HSLA"
import { MoveIcon } from "ui/icons/MoveIcon"
import { Text } from "ui/Text"
import { HourSpace } from "ui/timeline/HourSpace"
import { centerContentCSS } from "ui/utils/centerContentCSS"
import { getVerticalMarginCSS } from "ui/utils/getVerticalMarginCSS"
import { MS_IN_HOUR, MS_IN_MIN } from "utils/time"
import { InteractiveBoundaryArea } from "./InteractiveBoundaryArea"
import { IntervalRect } from "./IntervalRect"
import { MaxIntervalEndBoundary } from "./MaxIntervalEndBoundary"
interface RenderContentParams {
pxInMs: number
}
export interface IntervalInputProps {
color: HSLA
value: Interval
onChange: (value: Interval) => void
startOfDay: number
startHour: number
endHour: number
maxIntervalEnd?: number
minDuration?: number
renderContent?: (params: RenderContentParams) => ReactNode
}
const pxInHour = 60
const defaultMinDurationInMin = 10
const Container = styled.div`
${getVerticalMarginCSS(8)}
`
type IntervalEditorControl = "start" | "end" | "position"
const MoveIconWr = styled.div`
font-size: 16px;
`
const CurrentIntervalRect = styled(IntervalRect)`
${centerContentCSS}
${({ $color }) => css`
background: ${$color.getVariant({ a: () => 0.12 }).toCssValue()};
border: 2px solid ${$color.toCssValue()};
color: ${$color.toCssValue()};
`}
`
const InteractiveDragArea = styled.div`
position: absolute;
width: 100%;
cursor: grab;
`
const DurationText = styled(Text)`
position: absolute;
width: 100%;
text-align: center;
transition: none;
`
export const IntervalInput = ({
color,
value,
onChange,
startOfDay,
endHour,
startHour,
renderContent,
minDuration = defaultMinDurationInMin * MS_IN_MIN,
maxIntervalEnd: optionalMaxIntervalEnd,
}: IntervalInputProps) => {
const hoursCount = endHour - startHour
const maxIntervalEnd =
optionalMaxIntervalEnd ?? startOfDay + MS_IN_HOUR * endHour
const minIntervalStart = startOfDay + MS_IN_HOUR * startHour
const height = hoursCount * pxInHour
const pxInMs = height / (hoursCount * MS_IN_HOUR)
const [activeControl, setActiveControl] =
useState<IntervalEditorControl | null>(null)
useEvent("mouseup", () => setActiveControl(null))
const containerElement = useRef<HTMLDivElement | null>(null)
const intervalElement = useRef<HTMLDivElement | null>(null)
useEffect(() => {
intervalElement.current?.scrollIntoView()
}, [intervalElement])
const valueDuration = value.end - value.start
const handleMouseMove: MouseEventHandler<HTMLDivElement> = ({ clientY }) => {
if (!activeControl) return
const containerRect = containerElement?.current?.getBoundingClientRect()
if (!containerRect) return
const y =
enforceRange(clientY, containerRect.top, containerRect.bottom) -
containerRect.top
const getNewInterval = () => {
if (activeControl === "position") {
const oldCenter =
(value.start + valueDuration / 2 - startOfDay) * pxInMs
const offset = y - oldCenter
const msOffset = enforceRange(
offset / pxInMs,
minIntervalStart - value.start,
maxIntervalEnd - value.end
)
return {
start: value.start + msOffset,
end: value.end + msOffset,
}
} else {
const timestamp = startOfDay + y / pxInMs
return {
start:
activeControl === "start"
? Math.max(
Math.min(timestamp, value.end - minDuration),
minIntervalStart
)
: value.start,
end:
activeControl === "end"
? Math.min(
Math.max(timestamp, value.start + minDuration),
maxIntervalEnd
)
: value.end,
}
}
}
onChange(getNewInterval())
}
const cursor = useMemo(() => {
if (!activeControl) return undefined
if (activeControl === "position") return "grabbing"
return "row-resize"
}, [activeControl])
const intervalStartInPx = pxInMs * (value.start - startOfDay)
const intervalEndInPx = pxInMs * (value.end - startOfDay)
const intervalDurationInPx = pxInMs * valueDuration
return (
<Container
ref={containerElement}
style={{ height: height, cursor }}
onMouseMove={handleMouseMove}
>
<HourSpace
formatHour={(hour) => {
const date = new Date(startOfDay + hour * MS_IN_HOUR)
return date.toLocaleString(undefined, { hour: "numeric" })
}}
start={0}
end={hoursCount}
hourLabelWidthInPx={20}
>
{renderContent && renderContent({ pxInMs })}
<CurrentIntervalRect
$color={color}
ref={intervalElement}
style={{
top: intervalStartInPx,
height: intervalDurationInPx,
}}
>
<MoveIconWr style={{ opacity: activeControl ? 0 : 1 }}>
<MoveIcon />
</MoveIconWr>
</CurrentIntervalRect>
<DurationText
style={{
top: intervalEndInPx + 2,
}}
weight="bold"
>
{formatDuration(valueDuration, "ms")}
</DurationText>
{optionalMaxIntervalEnd && (
<MaxIntervalEndBoundary
timestamp={optionalMaxIntervalEnd}
y={pxInMs * (optionalMaxIntervalEnd - startOfDay)}
isActive={!!activeControl}
/>
)}
{!activeControl && (
<>
<InteractiveDragArea
style={{
top: intervalStartInPx,
height: intervalDurationInPx,
}}
onMouseDown={() => setActiveControl("position")}
/>
<InteractiveBoundaryArea
y={intervalStartInPx}
onMouseDown={() => setActiveControl("start")}
/>
<InteractiveBoundaryArea
y={intervalEndInPx}
onMouseDown={() => setActiveControl("end")}
/>
</>
)}
</HourSpace>
</Container>
)
}The component receives the session's color and interval, onChange handler, the start of day timestamp, and start and end hours to show only part of the day. To disable making a session later than a given part of the day and disable sessions smaller than a given duration, we pass optional maxIntervalEnd and minDuration properties. We can show an existing session by passing a function to the renderContent property.
First, we want to make a fixed height container using hours count multiplied by the pixelsInHour constant. Then we use the HourSpace component to spread lines with hours numbers along the container.
import styled from "styled-components"
import { Text } from "ui/Text"
import { getRange } from "utils/generic"
import { VStack } from "../Stack"
interface Props {
start: number
end: number
className?: string
hourLabelWidthInPx?: number
children?: React.ReactNode
underLinesContent?: React.ReactNode
formatHour?: (hour: number) => string | number
}
const Container = styled(VStack)`
position: relative;
`
const HourWr = styled.div`
position: relative;
display: flex;
align-items: center;
`
const HourContainer = styled.div`
position: absolute;
width: 100%;
`
const HourContent = styled.div<{ labelWidth: number }>`
width: 100%;
display: grid;
gap: 8px;
grid-template-columns: ${({ labelWidth }) => labelWidth}px 1fr;
align-items: center;
`
const HourLine = styled.div`
background: ${({ theme }) => theme.colors.backgroundGlass.toCssValue()};
height: 1px;
width: 100%;
`
const Content = styled.div<{ leftOffset: number }>`
position: absolute;
width: calc(100% - ${(p) => p.leftOffset}px);
height: 100%;
left: ${(p) => p.leftOffset}px;
display: flex;
`
export const HourSpace = ({
start,
end,
className,
hourLabelWidthInPx = 20,
children,
underLinesContent,
formatHour = (v) => v,
}: Props) => {
const hours = getRange(end + 1 - start).map((index) => start + index)
return (
<Container
className={className}
justifyContent="space-between"
fullHeight
fullWidth
>
{underLinesContent && (
<Content leftOffset={hourLabelWidthInPx}>{underLinesContent}</Content>
)}
{hours.map((hour) => {
return (
<HourWr key={hour}>
<HourContainer>
<HourContent labelWidth={hourLabelWidthInPx}>
<Text
style={{ textAlign: "start" }}
size={14}
color="supporting"
>
{formatHour(hour)}
</Text>
<HourLine />
</HourContent>
</HourContainer>
</HourWr>
)
})}
{children && (
<Content leftOffset={hourLabelWidthInPx}>{children}</Content>
)}
</Container>
)
}Inside it, we first render the content from parents, if there are any, and proceed with the current editable interval. To distinguish it from the other session, we make the content almost transparent, add a border color, and place the move icon inside to indicate to the user that they can interact with the element. Then we render the session duration and max interval boundary.
To start the editing process user will interact with one of three elements: two boundaries for editing the start and end of the interval and an interactive area for dragging the session. Each has a custom cursor pointer, absolute position, and onMouseDown handler to set active control. Once we are in the editing mode, we hide them. Once we have active control, we should listen for mouse movement and update the interval. Once the user lifts the mouse, we set the activeControl value to null and reappear invisible interactive areas. To update interval boundaries, we use the clientY variable from the mousemove event against the container's bounding box to calculate the new start and end for the session.