GitHub开源项目精选：轻量级预约/预订日历组件，用React和TypeScript构建

前端达人2024-08-12 5:09

在日常开发中，我们经常需要在项目中添加预约或预订功能。今天给大家推荐一个超级轻量级的预约/预订日历组件，它是用React和TypeScript构建的，非常适合那些需要简单易用的日历解决方案的开发者。

安装方法：

你可以选择使用npm或者yarn进行安装：

go 复制代码

npm install reactjs-availability-calendar

或者

go 复制代码

yarn add reactjs-availability-calendar

使用方法：

在你的组件中添加日历：

go 复制代码

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} />
  );
}

项目地址

https://github.com/simpletut/reactjs-availability-calendar