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

在日常开发中,我们经常需要在项目中添加预约或预订功能。今天给大家推荐一个超级轻量级的预约/预订日历组件,它是用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

相关推荐
浪裡遊13 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz14 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom14 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_12315 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_4050233715 小时前
包资源管理器NPM 使用
前端·npm·node.js
说私域15 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源
宁&沉沦15 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
CoderJia程序员甲15 小时前
GitHub 热榜项目 - 日榜(2025-10-18)
ai·开源·大模型·github·ai教程
Dragonir15 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效