https://github.com/dirheimerb/headless-calendar

https://github.com/dirheimerb/headless-calendar

Last synced: 12 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/dirheimerb/headless-calendar
• Owner: dirheimerb
• Created: 2024-10-10T22:40:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-12T11:06:16.000Z (over 1 year ago)
• Last Synced: 2025-03-12T12:20:31.958Z (over 1 year ago)
• Language: TypeScript
• Size: 7.05 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


# Headless calendar for react

A zero dependency library for react, with unstyled and controlled components to build your own agenda. Simple to use while allowing fully customization (markup is all yours!)

🔧 Flexible

✅ Controlled

🚀 Performant

🤯 Unstyled

↔️ Support for dragging and resizing events




## [📖 All examples and documentation here!](https://react-headless-calendar.vercel.app/)




## 🚧🚧 This repo is under heavy development 🚧🚧




Use your markup and custom logic to achieve virtually anything!

![full-example](./assets/full-example.gif)

A bit of [framer-motion](https://www.framer.com/motion/) was used to make the navigation look smooth - [See code](https://github.com/lucassaid/react-headless-agenda/blob/main/stories/full-examples/LimitIsTheSky.stories.tsx)




You can easily adapt it for mobile!




![vertical_example](./assets/vertical_example.gif)




# Installation

```bash

npm i react-headless-calendar

```

```bash

yarn add react-headless-calendar

```

```bash

pnpm add react-headless-calendar

```







# Usage

All examples use [date-fns](https://www.npmjs.com/package/date-fns) but you can use the library of your choice to manipulate dates.

## ``

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

```tsx

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

// only `start` and `end` are required!

const events = [

  {

    id: 'event1',

    someTitle: 'Hey there!',

    start: new Date(),

    end: addHours(new Date(), 5),

  }

]

```

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.




## ``

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

![days header](./assets/days_header.png)

```tsx

import { format } from 'date-fns';



	

		{({ date }) => (

			


				{format(date, 'ccc d')}

			

		)}

	

;

```





Now the fun part, render your events!

![day](./assets/day.png)

```tsx

// `events` is an array containing only the events for the current day

	{({ date, containerRef, events }) => (

		


			{events.map(({ event, top, bottom }) => (

				


					{event.someTitle}

				

			))}

		

	)}


```







That's it! You also have ``, ``, and ``, but you'll learn them as you go.

---

PR's are welcome!