Dragging in from outside

npx shadcn@latest add @hapio/calendar-external-draggable

'use client'

import type { CalendarEventInput, EventRules, ExternalDrop } from '@hapio/calendar-react'

import { CalendarDraggable } from '@/components/hapio-calendar/calendar-draggable'
import { CalendarEditing } from '@/components/hapio-calendar/calendar-editing'
import { CalendarExternalDrops } from '@/components/hapio-calendar/calendar-external-drops'
import { HapioCalendar } from '@/components/hapio-calendar/hapio-calendar'
import { createBooking } from '@/lib/bookings'
import { SERVICES, type Service } from '@/lib/services'

/** What this calendar takes: it narrows `drop.data` to `Service`. */
function isService(data: unknown): data is Service {
  return typeof data === 'object' && data !== null && 'kind' in data && data.kind === 'service'
}

const RULES: { readonly event: EventRules<undefined> } = {
  event: {
    constraint: 'businessHours',
    // `kind: 'external'` is a drop; a string is the reason users hear.
    allow: (proposal) =>
      proposal.kind === 'external' && proposal.next.allDay ? 'Drop it on a time' : true,
  },
}

export function ServiceScheduler({
  events,
  onBooked,
}: {
  events: readonly CalendarEventInput[]
  onBooked: () => void
}) {
  // The calendar shows a placeholder where the item landed until your events change.
  const onExternalDrop = async ({ data, span }: ExternalDrop<Service>) => {
    await createBooking({ serviceId: data.id, startsAt: span.startIso, endsAt: span.endIso })
    onBooked() // refetch or add the booking: the new events replace the placeholder
  }
  return (
    <CalendarEditing>
      <CalendarExternalDrops>
        <ul aria-label="Services" className="flex flex-wrap gap-2">
          {SERVICES.map((service) => (
            <li key={service.id}>
              <CalendarDraggable
                data={service}
                label={`${service.name} · ${service.minutes} min`}
                duration={{ minutes: service.minutes }}
              />
            </li>
          ))}
        </ul>
        <HapioCalendar
          events={events}
          timeZone="Europe/Stockholm"
          businessHours
          rules={RULES}
          droppable
          acceptExternal={isService}
          onExternalDrop={onExternalDrop}
          className="h-[36rem]"
        />
      </CalendarExternalDrops>
    </CalendarEditing>
  )
}

'use client'

import type { CalendarEventInput, DateSpan } from '@hapio/calendar-react'

import { CalendarExternalDrops } from '@/components/hapio-calendar/calendar-external-drops'
import { HapioCalendar } from '@/components/hapio-calendar/hapio-calendar'

interface Photos {
  readonly kind: 'photos'
  readonly files: readonly File[]
}

const PHOTO_DROP = {
  // While the drag is over the calendar the browser shows only the items' kinds and types.
  canAccept: (data: DataTransfer) =>
    Array.from(data.items).some((item) => item.kind === 'file' && item.type.startsWith('image/')),
  // At the drop: the drop's `data`, or `null` to refuse it.
  accept: (data: DataTransfer): Photos | null => {
    const files = Array.from(data.files).filter((file) => file.type.startsWith('image/'))
    return files.length === 0 ? null : { kind: 'photos', files }
  },
  label: 'Photo shoot', // the mirror's and the placeholder's title
  duration: { hours: 1 },
}

export function PhotoCalendar({
  events,
  upload,
}: {
  events: readonly CalendarEventInput[]
  upload: (files: readonly File[], span: DateSpan) => Promise<void>
}) {
  return (
    <CalendarExternalDrops>
      <HapioCalendar
        events={events}
        timeZone="Europe/Stockholm"
        droppable
        nativeDrop={PHOTO_DROP}
        onExternalDrop={(drop) => upload(drop.data.files, drop.span)}
        className="h-[36rem]"
      />
    </CalendarExternalDrops>
  )
}

'use client'

import { DndContext, useDraggable, useDroppable, type DragEndEvent } from '@dnd-kit/core'
import {
  CalendarProvider,
  useCalendar,
  type CalendarEventInput,
  type DateSpan,
} from '@hapio/calendar-react'
import type { ReactNode } from 'react'

import { CalendarDescriptions } from '@/components/hapio-calendar/calendar-descriptions'
import { CalendarExternalDrops } from '@/components/hapio-calendar/calendar-external-drops'
import { CalendarLiveRegion } from '@/components/hapio-calendar/calendar-live-region'
import { useCalendarSelectionParts } from '@/components/hapio-calendar/calendar-selection-context'
import { CalendarToolbar } from '@/components/hapio-calendar/calendar-toolbar'
import { CalendarView } from '@/components/hapio-calendar/calendar-view'
import { SERVICES, type Service } from '@/lib/services'

interface SchedulerProps {
  readonly events: readonly CalendarEventInput[]
  readonly book: (service: Service, span: DateSpan) => void
}

/** `hitTest` needs the external-drop engine, which `<CalendarExternalDrops>` provides. */
export function DndKitScheduler(props: SchedulerProps) {
  return (
    <CalendarExternalDrops>
      <Scheduler {...props} />
    </CalendarExternalDrops>
  )
}

function Scheduler({ events, book }: SchedulerProps) {
  const parts = useCalendarSelectionParts()
  const calendar = useCalendar(
    { events, timeZone: 'Europe/Stockholm', interaction: parts?.engine },
    { selectionParts: parts !== null },
  )

  const onDragEnd = ({ active, over, activatorEvent, delta }: DragEndEvent) => {
    const service = SERVICES.find((item) => item.id === active.id)
    if (over?.id !== 'calendar' || service === undefined) return
    if (!(activatorEvent instanceof PointerEvent)) return // the pointer sensor only, here
    // Where the pointer let go, in viewport coordinates.
    const x = activatorEvent.clientX + delta.x
    const y = activatorEvent.clientY + delta.y
    const hit = calendar.store.hitTest(x, y) // the slot or day under the point, or null
    if (hit !== null) book(service, hit.span)
  }

  return (
    <DndContext onDragEnd={onDragEnd} autoScroll={false}>
      <ul aria-label="Services">
        {SERVICES.map((service) => (
          <li key={service.id}>
            <ServiceChip service={service} />
          </li>
        ))}
      </ul>
      <DropTarget>
        <CalendarProvider value={calendar}>
          <div {...calendar.getRootProps({ className: 'flex h-[36rem] flex-col gap-3' })}>
            <CalendarToolbar />
            <CalendarView />
            <CalendarDescriptions />
            <CalendarLiveRegion />
          </div>
        </CalendarProvider>
      </DropTarget>
    </DndContext>
  )
}

function DropTarget({ children }: { children: ReactNode }) {
  const { setNodeRef } = useDroppable({ id: 'calendar' })
  return <div ref={setNodeRef}>{children}</div>
}

function ServiceChip({ service }: { service: Service }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: service.id })
  const moved = transform === null ? undefined : `translate(${transform.x}px, ${transform.y}px)`
  return (
    <button
      ref={setNodeRef}
      type="button"
      style={{ transform: moved }}
      {...listeners}
      {...attributes}
    >
      {service.name}
    </button>
  )
}