{"id":13725902,"url":"https://github.com/zackify/react-calendar","last_synced_at":"2025-05-08T19:49:02.691Z","repository":{"id":48710615,"uuid":"345769763","full_name":"zackify/react-calendar","owner":"zackify","description":"Simple and flexible events calendar written in React","archived":false,"fork":false,"pushed_at":"2024-01-25T21:07:08.000Z","size":1627,"stargazers_count":163,"open_issues_count":0,"forks_count":30,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-09T22:44:07.548Z","etag":null,"topics":["calendar","event-calendar","events","react"],"latest_commit_sha":null,"homepage":"https://zackify.github.io/react-calendar/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zackify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-03-08T19:23:41.000Z","updated_at":"2024-11-08T13:31:13.000Z","dependencies_parsed_at":"2022-09-16T18:50:20.369Z","dependency_job_id":"4ffc7198-40d8-4074-b87a-587944ac5ef1","html_url":"https://github.com/zackify/react-calendar","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Freact-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackify","download_url":"https://codeload.github.com/zackify/react-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225110575,"owners_count":17422411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","event-calendar","events","react"],"created_at":"2024-08-03T01:02:40.182Z","updated_at":"2024-11-18T01:05:12.033Z","avatar_url":"https://github.com/zackify.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Stale"],"sub_categories":["React \u0026 UI Libraries"],"readme":"# React Calendar\n\n100% test coverage, responsive, and flexible event calendar for React.\n\n[See In Action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)\n\nBackstory: After using react-big-calendar for years, I decided to create my own that is simpler to use, allows for easy customization, and uses modern React (no deprecated methods).\n\n```\nnpm install @zach.codes/react-calendar date-fns\n```\n\n- [Basic Usage](#Basic-Usage)\n- [Styling](#Styling)\n- [Monthly Calendar](#MonthlyCalendar)\n- [Weekly Calendar](#WeeklyCalendar)\n- [Full Control](#Full-Control)\n\n## Basic Usage\n\n[See this code in action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)\n\n```tsx\nimport { format, subHours, startOfMonth } from 'date-fns';\nimport {\n  MonthlyBody,\n  MonthlyDay,\n  MonthlyCalendar,\n  MonthlyNav,\n  DefaultMonthlyEventItem,\n} from '@zach.codes/react-calendar';\n\nexport const MyMonthlyCalendar = () =\u003e {\n  let [currentMonth, setCurrentMonth] = useState\u003cDate\u003e(\n    startOfMonth(new Date())\n  );\n\n  return (\n    \u003cMonthlyCalendar\n      currentMonth={currentMonth}\n      onCurrentMonthChange={date =\u003e setCurrentMonth(date)}\n    \u003e\n      \u003cMonthlyNav /\u003e\n      \u003cMonthlyBody\n        events={[\n          { title: 'Call John', date: subHours(new Date(), 2) },\n          { title: 'Call John', date: subHours(new Date(), 1) },\n          { title: 'Meeting with Bob', date: new Date() },\n        ]}\n      \u003e\n        \u003cMonthlyDay\u003cEventType\u003e\n          renderDay={data =\u003e\n            data.map((item, index) =\u003e (\n              \u003cDefaultMonthlyEventItem\n                key={index}\n                title={item.title}\n                // Format the date here to be in the format you prefer\n                date={format(item.date, 'k:mm')}\n              /\u003e\n            ))\n          }\n        /\u003e\n      \u003c/MonthlyBody\u003e\n    \u003c/MonthlyCalendar\u003e\n  );\n};\n```\n\nThis renders a monthly calendar view in its simplest form. Whenever a user presses `next` or `previous` on the `\u003cMonthlyNav /\u003e` the `onCurrentMonthChange` callback will be invoked, and it's up to you to control the state.\n\nThis approach gives you full flexibilty to do anything you want. In my applications, I will refetch a graphql query anytime the month changes, and load `events` for that month.\n\nThe events get passed into `MonthlyBody` and then `renderDay` is called for every day on the calendar that has events. You can render any React component you wish, giving you as much freedom as possible.\n\n## Styling\n\nThis library uses [Tailwind](https://tailwindcss.com/). This gives you two options for including the necessary CSS for the components.\n\n### I'm already using Tailwind\n\nAwesome! You need to add `node_modules/@zach.codes/react-calendar/dist/**/*.js` to your `tailwind.config.js` to ensure the required classes aren't purged on your production build.\n\n### I'm not using Tailwind\n\nNo problem! The library includes the minimal CSS required to render the components. Somewhere in your app, you need to import our CSS:\n\n```js\nimport '@zach.codes/react-calendar/dist/calendar-tailwind.css';\n```\n\nIf you already have a CSS reset in your app, you can import from:\n\n```js\nimport '@zach.codes/react-calendar/dist/calendar-tailwind-no-reset.css';\n```\n\nBut some styles may not look the same as storybook. You can take the resets you want from the main file and put them into your app to get the styling you prefer.\n\n## MonthlyCalendar\n\nThis is a monthly view similar to react-big-calendar or a Calendar application. It makes it easy to load events 1 month at a time, and render custom elements on each day.\n\n[See in action](https://zackify.github.io/react-calendar/?path=/story/monthly-calendar--basic-monthly-calendar)\n\n### Props\n\n`MonthlyCalendar`\n\n- `currentMonth` this must be a Date instance representing the first of the month you wish to view\n- `onCurrentMonthChange` is called any time the month is changing from the Navigation area\n\n`MonthlyNav`\n\nNo props at this time\n\n`MonthlyBody`\n\n- `omitDays` lets you hide certain days from the calendar, for instance, hide Saturday and Sunday. Days are represented as 0-6, as seen in the [date-fns](https://date-fns.org/v2.19.0/docs/getDay#returns) documentation. Hiding Monday would be `omitDays={[1]}` Hiding the weekend would be `omitDays={[0, 6]}`\n- `events` this is an array of events, the only thing required inside each object is a `date` field with a Date object representing the exact time of the event\n\n`MonthlyDay`\n\n- `renderDay` callback function that is passed an array of events for each day displayed, letting you render the events for the day\n\n## WeeklyCalendar\n\nView 1 week at a time, useful for scheduling appointments, or rendering events in a smaller area of the screen\n\n[See in action](https://zackify.github.io/react-calendar/?path=/story/weekly-calendar--basic-weekly-calendar)\n\n```js\n\u003cWeeklyCalendar week={new Date()}\u003e\n  \u003cWeeklyContainer\u003e\n    \u003cWeeklyDays /\u003e\n    \u003cWeeklyBody\n      events={[{ title: 'Jane doe', date: new Date() }]}\n      renderItem={({ item, showingFullWeek }) =\u003e (\n        \u003cDefaultWeeklyEventItem\n          key={item.date.toISOString()}\n          title={item.title}\n          date={\n            showingFullWeek\n              ? format(item.date, 'MMM do k:mm')\n              : format(item.date, 'k:mm')\n          }\n        /\u003e\n      )}\n    /\u003e\n  \u003c/WeeklyContainer\u003e\n\u003c/WeeklyCalendar\u003e\n```\n\nThis code renders an event for the current date. When you are in the week view, it displays the day and time. When you drill into a single day, it displays the time only.\n\n### Props\n\n`WeeklyCalendar`\n\n- `week` a date object to initialize for the weekly view\n\n`WeeklyContainer`\n\nA view only component to flex the buttons and content area\n\n`WeeklyDays`\n\nRenders the buttons to view an individual day\n\n- `omitDays`, same as the `MonthlyBody` prop\n\n`WeeklyBody`\n\n- `style` optional style info for setting the container height\n- `events` array of events with a date field, and anything else you want.\n- `renderItem` callback to render individual items on the side.\n\n## Full Control\n\nThis library has very few props to understand. It takes a component-first approach instead of endless prop options.\n\nBuilding a calendar is highly opinionated. This library lets you easily customize any piece of it. Let's take a look at the `MonthlyNav` component:\n\n```tsx\nimport { useMonthlyCalendar } from '@zach.codes/react-calendar';\n\nexport const MonthlyNav = () =\u003e {\n  let { currentMonth, onCurrentMonthChange } = useMonthlyCalendar();\n\n  return (\n    \u003cdiv className=\"flex justify-end mb-4\"\u003e\n      \u003cbutton\n        onClick={() =\u003e onCurrentMonthChange(subMonths(currentMonth, 1))}\n        className=\"cursor-pointer\"\n      \u003e\n        Previous\n      \u003c/button\u003e\n      \u003cdiv className=\"ml-4 mr-4 w-32 text-center\"\u003e\n        {format(\n          currentMonth,\n          getYear(currentMonth) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy'\n        )}\n      \u003c/div\u003e\n      \u003cbutton\n        onClick={() =\u003e onCurrentMonthChange(addMonths(currentMonth, 1))}\n        className=\"cursor-pointer\"\n      \u003e\n        Next\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nIt's rendering some button elements, and then the current month. If it's not the current year, it renders the year as well.\n\nYou can copy / paste this component into your own repo. The magic piece is `useMonthlyCalendar`. This hook will let you access anything from the calendar context.\n\nWith this in mind, you can fully replace any of the default components to have custom behavior for your own app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Freact-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackify%2Freact-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Freact-calendar/lists"}