Add double-click selection to create events in Agenda calendar

[Copilot]

Users can now create timed events in the Agenda view by double-clicking and dragging on the calendar grid. This provides a rapid workflow for visual time blocking, matching the pattern already present in the week view.

Changes

New hook: useAgendaSelection

• Detects double-clicks with standard 300ms window
• Tracks pointer movement during drag using pointer capture
• Creates draft event with calculated start/end times from Y coordinates
• Opens EventForm on pointer release with pre-populated times

New component: AgendaSelectionPreview

• Renders semi-transparent overlay during selection
• Displays time range (e.g., "2:00pm - 3:00pm")
• Minimum height of one time slot (15 minutes)

Integration: TimedAgendaEvents

• Merged selection handlers with existing floating-ui interactions
• Cursor changes to ns-resize during selection (Y-axis only)
• Preview renders conditionally during active selection

Example Usage

// Double-click at 2:00pm, drag down to 3:00pm
// Preview shows: "2:00pm - 3:00pm"
// On release: EventForm opens with times pre-populated
const { selection, handlers } = useAgendaSelection();

<Droppable
  {...interactions?.getReferenceProps({
    onClick: openEventForm,
    onPointerDown: handlers.onPointerDown,
    onPointerMove: handlers.onPointerMove,
    onPointerUp: handlers.onPointerUp,
  })}
  style={{ cursor: selection.isSelecting ? "ns-resize" : "default" }}
>
  {selection.isSelecting && (
    <AgendaSelectionPreview startY={selection.startY} currentY={selection.currentY} />
  )}
</Droppable>

Technical Notes

• Uses requestAnimationFrame + queueMicrotask for reliable DOM timing before opening form
• Bidirectional drag support (up or down from initial click point)
• Snaps to 15-minute time slots via existing getEventTimeFromPosition utility
• No breaking changes; existing click-to-create workflow remains intact

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Select a section of the Agenda calendar surface to create a timed event</issue_title>
<issue_description>Allow users to create new calendar events by selecting a section of the grid surface in the Agenda calendar. When a user selects a region (by click and drag or shift/click), the selection will determine the event's start and end time (duration), and the EventForm should open via a portal at the selected location. The EventForm should be pre-populated with the calculated start/end times and allow for further editing before saving.

Feature Requirements:

• Selecting a section of the grid creates a new calendar event matching the selection's duration
• EventForm pops up in a portal, positioned at the selected location and containing the calculated duration

Use Case:
This feature supports a rapid workflow for scheduling events intuitively and visually, making the agenda calendar much quicker for users who work with time blocks.</issue_description>

<agent_instructions>To implement the select function, consider leveraging the pointer-down-double-click event plus mouse-move. When the pointer is held down(on double click), the event form should open. With the pointer still held down, when the user moves the pointer, the bottom resize handle should be activated and a resize of the DraggableAgendaEvent component should ensue until the pointer is release. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

@tyler-dane We should also include the "preview" rectangle, as this is good UX and is consistent with what we're doing on the week view.

Up to you whether you wanna do that here or in a separate issue, though

</comment_new>
<comment_new>@tyler-dane
Another aspect of this is the form position. Currently, it is based on the XY mouse coordinates, but this UX feels too freeform. As we add the preview event, we can ensure the form position is more consistent.

For example, we can provide an order preference for consistency: bottom, top, right, left. (The reason left is last is so that the form doesn't block the tasks whenever possible)</comment_new>
<comment_new>@tyler-dane
Finally, I think the crosshair cursor isn't the right one. Or rather — it won't be the right cursor to use once we add the preview.

A crosshair suggests that the user needs to select something based on both the X and Y coordinates. But for the agenda, only the Y really matters. Having a crosshair pressures the user to spend time thinking about the right X coordinate, when it really doesn't matter.</comment_new>
<comment_new>@victor-enogwe

Another aspect of this is the form position. Currently, it is based on the XY mouse coordinates, but this UX feels too freeform. As we add the preview event, we can ensure the form position is more consistent.

For example, we can provide an order preference for consistency: bottom, top, right, left. (The reason left is last is so that the form doesn't block the tasks whenever possible)

#1364 </comment_new>
<comment_new>@victor-enogwe

We should also include the "preview" rectangle, as this is good UX and is consistent with what we're doing on the week view.

Up to you whether you wanna do that here or in a separate issue, though

#1363 </comment_new>

• Fixes Select a section of the Agenda calendar surface to create a timed event #1333

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.