Lightweight Availability/Bookings Calendar Built with React & TypeScript

Overview

reactjs-availability-calendar

NPM version npm-typescript License

Live Demo

Lightweight Availability/Bookings Calendar Built with React & TypeScript

ReactJS-Availability-Calendar

Installation:

npm install reactjs-availability-calendar

or

yarn add reactjs-availability-calendar

Usage :

Add Calendar to your component:

import React from 'react'
import Calendar from 'reactjs-availability-calendar'

export default function App() {
  const bookings = [
    {
      from: new Date('2022-07-03'),
      to: new Date('2022-07-30'),
      middayCheckout: true,
    },
    {
      from: '2022-04-08',
      to: '2022-04-13',
      middayCheckout: true,
    },
    {
      from: '2022-09-03T19:20:35.593Z',
      to: '2022-09-22T19:20:35.593Z',
      middayCheckout: false,
    },
  ]

  return (
    <Calendar bookings={bookings} />
  )
}

Default CSS

Please copy and self host the default CSS linked below.

Default CSS
Minified Default CSS

">


Settings / Configurations:

bookings

Type: Array of Bookings
Default: []
Example:

[{
  from: '2022-04-08T00:00:00.000Z',
  to: '2022-04-10T00:00:00.000Z',
  middayCheckout: true,
}]

Notes: For best results, Dates should be in valid ISO 8601 format. Learn more
Description: Dates to be shown as unavailable on the calendar

showNumberOfMonths

Type: Number
Default: 12
Options: 12 | 4 | 2 | 1
Description: Number of Months to show

showCurrentYear

Type: Bool
Default: true
Description: Render active Calendar Year

showControls

Type: Bool
Default: true
Description: Render navigation buttons to move forward and previous Calendar Years

showKey

Type: Bool
Default: true
Description: Render Key for the different Calendar States

You might also like...
Ultimate calendar for your React app.
Ultimate calendar for your React app.

React-Calendar Ultimate calendar for your React app. Pick days, months, years, or even decades Supports range selection Supports virtually any languag

Simple and flexible events calendar written in React

Simple and flexible events calendar written in React

React Calendar
React Calendar

rc-calendar React Calendar Screenshots Feature support ie9,ie9+,chrome,firefox,safari support date, month, year, decade select panel support week numb

A modular toolkit to build calendar-related things in React

react-calendar Calendars for React v15. Not just calendar component, but a modular toolkit for building everything related to calendars in React, such

Simple date picker and calendar made for React and Day.js

react-dayjs-picker Simple date picker and calendar made for React and Day.js Demo/Documentation Demo and API docs are available here! Install npm inst

React Calendar App.

Calendar React Calendar App. Use Run the following command 2 times. Once in the root directory, then again in the client directory. npm install && npm

React Calendar component
React Calendar component

React Calendar component

A React component to display a GitHub contributions calendar
A React component to display a GitHub contributions calendar

A React component to display a GitHub contributions calendar

Official React wrapper for the year-calendar widget
Official React wrapper for the year-calendar widget

Official React wrapper for the year-calendar widget

Comments
  • Failed to parse source map

    Failed to parse source map

    I'm facing this issue while running, is there any way to fix it

    Failed to parse source map from '\node_modules\reactjs-availability-calendar\src\index.ts' file: 
    Error: ENOENT: no such file or directory, open '\node_modules\reactjs-availability-calendar\src\index.ts'
    
    opened by pratikkabade 0
Releases(v.1.1.4)
  • v.1.1.4(Sep 3, 2022)

    What's Changed

    • updates docs by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/10

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.1.3...v.1.1.4

    Source code(tar.gz)
    Source code(zip)
  • v.1.1.3(Sep 3, 2022)

    What's Changed

    • Fix date format for firefox by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/9

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.1.2...v.1.1.3

    Source code(tar.gz)
    Source code(zip)
  • v.1.1.2(Aug 31, 2022)

  • v.1.1.1(Aug 31, 2022)

  • v.1.1.0(Aug 30, 2022)

    What's Changed

    • Fix css after major changes by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/8

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.0.9...v.1.1.0

    Source code(tar.gz)
    Source code(zip)
  • v.1.0.9(Aug 30, 2022)

    What's Changed

    • force valid months option by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/7

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.0.8...v.1.0.9

    Source code(tar.gz)
    Source code(zip)
  • v.1.0.8(Aug 30, 2022)

    What's Changed

    • update readme by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/6

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.0.7...v.1.0.8

    Source code(tar.gz)
    Source code(zip)
  • v.1.0.7(Aug 30, 2022)

    What's Changed

    • Add storybook by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/4
    • Handle pagination for showNumberOfMonths option by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/5

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.0.6...v.1.0.7

    Source code(tar.gz)
    Source code(zip)
  • v.1.0.6(Aug 29, 2022)

    What's Changed

    • add support for 'to' & 'from' dates to be in Date format by @simpletut in https://github.com/simpletut/reactjs-availability-calendar/pull/3

    Full Changelog: https://github.com/simpletut/reactjs-availability-calendar/compare/v.1.0.5...v.1.0.6

    Source code(tar.gz)
    Source code(zip)
  • v.1.0.5(Aug 29, 2022)

  • v.1.0.4(Aug 29, 2022)

  • v.1.0.3(Aug 29, 2022)

Owner
Ashley Bibizadeh
Ashley Bibizadeh
Club-Event-Calendar-Webpage-Demo - Webpage Demo for Club Event Calendar

Club Event Calendar Webpage Demo Demo Repository for Club Event Calendar Webpage

Hyecheol (Jerry) Jang 1 Jan 9, 2022
A no dependencies, lightweight and feature-rich ⚡ calendar component for react.

@natscale/react-calendar A calendar component for react A no dependencies, lightweight and feature-rich ⚡ calendar component for react. ?? Table of Co

NatScale 67 Nov 14, 2022
Lightweight calendar for react

@lls/react-light-calendar ?? A lightweight calendar for React (~3 kb) @lls/react-light-calendar is a tiny calendar component which does NOT depend on

Lelivrescolaire 32 Aug 30, 2021
A lightweight calendar-component for react-native.

react-native-ep-calendar 1. Installation react-native-ep-calendar requires react-native >= 0.63.4. It also uses react-native-svg to display icons. To

null 1 Dec 14, 2021
A Simple Calendar App Built Using React.js

React Calendar App This is a calendar app, where you can set appointments. Getting started You can view a live demo over at https://calendar-app-appoi

Faroque Abdullah 9 Oct 30, 2022
Calendar built in react together with the date-fns library

?? React calendar with date-fns Calendar built in react together with the date-fns library, with the aim of being fully customizable and easy to maint

Nicolas Teófilo 8 Jul 3, 2022
React Native Calendar component, fully implemented using @shopify/flash-list, react-native-gesture-handler and react-native-reanimated

React Native Calendar component, fully implemented using @shopify/flash-list, react-native-gesture-handler and react-native-reanimated. Support pinch to zoom, drag and drop to create/update event.

Lê Hậu 120 Nov 28, 2022
⚛️📆 Flexible React date range picker calendar with no dependencies.

React Date Range Picker ⚛️ ?? Flexible React date range picker calendar with no dependencies Demo Demo page at https://almogtavor.github.io/date-range

Almog Tavor 98 Nov 30, 2022
react datepicker component.(include persian jalaali calendar)

React DatePicker2 A simple and reusable Datepicker component for React (with persian jalali calendar support) Demo. This package uses react-persian-da

mohammadreza berneti 224 Oct 12, 2022
React.js Yearly Calendar Component

React-yearly-calendar React calendar component with yearly view. $ npm install react-yearly-calendar Demo http://belkalab.github.io/react-yearly-calen

Belka 550 Nov 8, 2022