react-headless-agenda

Headless agenda for react

Completely unstyled components to build your own agenda. Give it a try! It's really simple to use, and allows fully customization (the markup is all yours!). It might look intimidating at first but I'm sure you'll like it.

This library makes it easy to display events in their respective columns (or "days"), with their corresponding position and height, based on their durations. It's not meant to be used as a "calendar" or a "month" view.

🔧 Flexible

✅ Controlled

🚀 Performant

💅🏻 Unstyled but easy to style

⏰ Uses the default Date object only

↔️ Supports drag and resize for events

📖 All examples and documentation here!

🚧🚧 This repo is under heavy development 🚧🚧

Use your markup and custom logic to achieve virtually anything!

A bit of framer-motion was used to make the navigation look smooth - See code

You can easily adapt it for mobile!

Installation

npm i react-headless-agenda

Usage

All examples use date-fns but you can use the library of your choice to manipulate dates.

<Agenda>

Our parent component. Just provide a start day, and some events.

import { startOfWeek, addHours }  from 'date-fns'

// only `start` and `end` are required! This event starts now and ends in five hours
const events = [
  {
    id: 'event1',
    someTitle: 'Hey there!',
    start: new Date(),
    end:  addHours(new Date(), 5),
  }
]

<Agenda
  startDate={startOfWeek(new Date())}
  events={events}
/>

This is a controlled component. The agenda will NOT have an "inner" state in sync with events or startDate. Instead, it will fire an event for you to update your state when needed. You'll find more of this in the docs.

<Days>

It lets you render whatever you need to, for each day. For example, let's render its name and number:

import { format }  from 'date-fns'

<div className="flex">
  <Days>
    {({ date }) => (
      <div key={date.toString()} className="flex-1">
        {format(date, 'ccc d')}
      </div>
    )}
  </Days>
</div>

Now the fun part, render your events!

// this will be inside <Agenda/> and will receive the events from the context.
<Days>
  {({ date, containerRef, events }) => (
    <div
      key={date.toString()}
      ref={containerRef}
      className="relative h-full"
    >
      {events.map(({ event, top, bottom }) => (
        <div
          className="absolute w-full p-4 rounded-lg"
          style={{ top, bottom }}
        >
          {event.someTitle}
        </div>
      ))}
    </div>
  )}
</Days>

That's it! You also have <Ticks>, <Needle>, and <Crosshair>, but you'll learn them as you go.

---

PR's are welcome!