Hapio är ett headless-system. Vi tillhandahåller API:et för bokning och schemaläggning – tjänster, resurser, scheman, bokningsbara tider – och du skapar den upplevelse som dina kunder ser. Det fungerar bra för själva bokningsflödet, men förr eller senare behöver de flesta projekt en riktig kalender: en veckovy där personalen kan flytta runt bokningar, en dagsvy som visar var det finns lediga tider och en månadsvy för helhetsöversikten.

Hittills har det inneburit att man antingen har fått använda ett färdigt kalenderbibliotek eller bygga ett helt från grunden. Inget av alternativen är särskilt bra när din datamodell redan finns i Hapio.

Idag lanserar vi Hapio Calendar, en öppen källkodskomponent för kalendrar i full storlek avsedd för React 19 och shadcn/ui. Den innehåller vecko-, dags-, månads- och listvyer, stöd för att dra och ändra storlek, tidszoner per kalender samt återkommande händelser, och är utformad för att kommunicera med Hapio API direkt utan ytterligare inställningar. Den är licensierad under MIT-licensen och det finns ingen premiumversion.

Veckovyn. Öppettiderna är skuggade, bokningarna visas i rutnätet och den röda linjen markerar aktuell tid.

Vad den gör

Hapio Calendar är en fullfjädrad kalender, inte ett datumväljare. Direkt efter installationen får du:

• Fyra visningslägen: vecka, dag, månad och lista. Visningsläget och datumet kan valfritt inkluderas i webbadressen så att länkarna går att dela.
• Dra, ändra storlek och redigera med tangentbordet. Händelser kan flyttas och ändras i storlek med musen eller med tangentbordet via en åtgärdsmeny som finns för varje händelse. Du kan också dra in objekt från utanför kalendern, till exempel från en lista över icke tilldelade bokningar.
• Tidszoner hanteras korrekt. Varje kalender har sin egen tidszon, och du kan byta den utan att behöva montera om den. Dagar med 23 eller 25 timmar visas korrekt, så övergångarna till och från sommartid stör inte rutnätet.
• Bokningsregler. Öppettider, kontroller av tidsöverlappningar och egna anpassade kontroller. När en bokning avvisas visar kalendern användaren varför.
• Optimistisk lagring. En ändring visas omedelbart, förblir i vänteläge medan API:et lagrar den och återställs om lagringen misslyckas.
• Återkommande händelser. Redigering enligt RFC 5545-serien, inklusive utökning på serversidan när servern känner till tidszonen och datumet.
• Inbyggd tillgänglighet. Tangentbordsnavigering, röstmeddelanden i realtid och kontroll av axlar i varje exempel.
• Lokalisering. Flera språk, däribland svenska, samt layouter med skrivriktning från höger till vänster.
• Serverrendering. Fungerar med SSR och React Server Components, och levereras med en guide till Content Security Policy.

Månadsvyn, med ISO-veckonummer, flerdagsevenemang och en ”+N till”-markering för att visa ytterligare händelser på dagar med många evenemang.

Utvecklad för Hapio

Kalendern är en generisk komponent, men den har utformats utifrån hur ett Hapio-projekt faktiskt fungerar. Integrationen bygger på tre återanrop:

1. Ladda. En händelsekälla hämtar bokningar för varje synligt datumintervall från en rutt på din server.
2. Bokning. Tillgängliga tidsluckor från Hapio visas som lediga tider. När en kund eller medarbetare väljer en av dem skapar din app bokningen.
3. Boka om. Drag- och tangentbordsrörelser onEventChange. Om Hapio avvisar ändringen – resursen är upptagen, tidsslotet ligger utanför öppettiderna – återställer kalendern ändringen och visar orsaken.

Flytta en bokning genom att dra den. Det ursprungliga tidsfönstret förblir gråmarkerat tills din server bekräftar ändringen.

Precis som i vår administratörspanel skickas aldrig din API-token till webbläsaren. Din server kommunicerar med Hapio via hapio-sdk paketet, och kalendern kommunicerar endast med din server. Behörigheterna för tokenet hanteras som vanligt av Hapio.

Du äger koden

Vi ville inte lansera ännu en kalender av typen ”black box”. Hapio Calendar är uppdelad i tre lager, och du väljer själv hur djupt du vill gå:

• @hapio/calendar-core — logiken utan ramverk: layout, tidszonsberäkningar, regler, återkommande händelser. Inget React.
• @hapio/calendar-react — headless hooks ovanpå kärnan. Ta med din egen markup och styling.
• Den @hapio shadcn-registret — den formaterade, färdiga komponenten. Den installeras med shadcn-kommandoradsverktyget och kopieras till din projektet, så du kan redigera filerna precis som vilken annan shadcn-komponent som helst.

De flesta projekt börjar med registerkomponenten och går vidare till krokarna endast om de behöver något ovanligt. Hur som helst finns det inget som du inte kan ändra.

Kom igång

Du behöver React 19.2 eller senare och en shadcn/ui-app baserad på Tailwind CSS 4 (antingen Radix- eller Base UI-basen). För serverrendering krävs Node 22.12 eller senare.

Börja med att lägga till @hapio registret till din components.json:

{
  "registries": {
    "@hapio": "https://calendar.hapio.io/r/{name}.json"
  }
}

Lägg sedan till kalendern:

npx shadcn@latest add @hapio/hapio-calendar

Detta kopierar komponenten till components/hapio-calendar/, drar in shadcn button, popover och scroll-area komponenter och installationer @hapio/calendar-react och temporal-polyfill. Ladda polyfill-koden en gång i appens rotkatalog och visa sedan kalendern med en höjd och en tidszon:

<HapioCalendar
  events={events}
  timeZone="Europe/Stockholm"
  className="h-[36rem]"
/>

Baskomponenten är skrivskyddad. Lägg till calendar-selection för att låta användarna välja tider, calendar-editing för att flytta och ändra storlek på händelser, samt calendar-external-draggable för att släppa in föremål utifrån. Den installationsanvisning går igenom varje steg, och Din första kalender tar vid därifrån.

Hapio Calendar är utvecklat med React 19, shadcn/ui, TypeScript, Tailwind CSS och polyfillen Temporal, och släpps under MIT-licensen. Varje exempel genomgår automatiska tillgänglighetskontroller, och testsuiten medföljer källkoden. Felrapporter och pull-förfrågningar är mycket välkomna.

Bläddra bland exempel, läs dokument, eller kör npx shadcn@latest add @hapio/hapio-calendar och prova det i ditt eget projekt redan idag.

Länkar: calendar.hapio.io · GitHub-arkiv · Hapio-dokumentation · Hapio-portalen