React-Calendar 教程：教你构建和定制一个简单的日历

前端小工
7,860 阅读7分钟

大多数现实世界的应用包括管理和操作日期的方法。在这样的用例中，拥有一个日历往往是最有效的解决方案。

在本教程中，我们将告诉你如何使用React-Calendar在React中创建一个简单的日历。我们将通过实际的例子介绍以下内容。

什么是React-Calendar？

React-Calendar是一个简单的日历库，它提供了选择日、月、年、甚至是十年的能力。它还支持日期范围选择和各种语言，以满足更复杂的使用情况。

因为React-Calendar不依赖于moment.js ，所以它是一个非常灵活和通用的库，你几乎可以在任何应用程序中使用。

创建一个React项目

让我们使用Create React App为本教程创建一个新的反应项目。确保你的机器上安装了Node.js≥v10.16和npm ≥v5.6。

要创建一个新项目，运行以下命令。

npx create-react-app calendar-example

现在，使用npm将React-Calendar库添加到我们的项目中。

npm install react-calendar

现在我们有了一个最基本的设置。删除由Create React App添加的基本模板代码，让我们开始吧。

用React-Calendar添加一个日历

第一步是将日历添加到我们的React应用中。从react-calendar 中导入Calendar 组件并将其添加到app.js 文件中。该文件将看起来像这样。

// App.js 

import { useState } from 'react';
import Calendar from 'react-calendar';
import './App.css';

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div className='app'>
      <h1 className='text-center'>React Calendar</h1>
      <div className='calendar-container'>
        <Calendar onChange={setDate} value={date} />
      </div>
      <p className='text-center'>
        <span className='bold'>Selected Date:</span>{' '}
        {date.toDateString()}
      </p>
    </div>
  );
}

export default App;

在这里，我们在我们的app.js 文件中添加了一个Calendar 组件，并给它添加了两个属性。我们创建了一个存储日期的状态，并使用JavaScript的Date 对象将当前日期作为它的初始值传递。

准备好这个基本结构后，我们的初始日历将看起来类似于这样。

Calendar With Dates On A Rectangular Grid In Black, White, And Grey

基本的React日历。

如果你查看app.js 文件的代码，我们创建了一个名为date 的状态，并将其作为一个值传递给Calendar 组件。另一个道具，onChange ，被传递给Calendar ，它将date 的状态设置为用户点击的值。

传递给日历的初始值是现在的日期。当用户点击日历时，其值将被设置为用户的选择。对于这个应用，我们要在日历下面打印日期值。

设计你的日历

我们已经完成了非常基本的日历实现。但是正如你所看到的，造型还没有应用到日历上，所以它看起来很无聊。

React-Calendar提供了一些默认的样式，你可以通过导入其样式表来应用这些样式。要做到这一点，在你的app.js 文件中添加以下一行。

import 'react-calendar/dist/Calendar.css';

应用样式后，日历将看起来像这样。

Calendar With Dates On A Square Grid In Black And White

带有默认样式的 React Calendar。

如果你想添加你自己的样式，你可以覆盖这些类并添加你的自定义CSS属性。

选择一个日期范围

考虑一个用例，你需要在一个自定义的日期范围内提供一些数据。用户选择他们所需的日期范围，你可以采取这种方式，然后做其他的操作。React-Calendar非常有效地支持这个功能。

让我们以这个用例为例，改进我们的应用程序来选择日期范围。我们将在日历的底部打印该范围的开始和结束。

修改后的app.js ，将看起来像这样。

// App.js

import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './App.css';

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div className='app'>
      <h1 className='text-center'>React Calendar with Range</h1>
      <div className='calendar-container'>
        <Calendar
          onChange={setDate}
          value={date}
          selectRange={true}
        />
      </div>
      {date.length > 0 ? (
        <p className='text-center'>
          <span className='bold'>Start:</span>{' '}
          {date[0].toDateString()}
          &nbsp;|&nbsp;
          <span className='bold'>End:</span> {date[1].toDateString()}
        </p>
      ) : (
        <p className='text-center'>
          <span className='bold'>Default selected date:</span>{' '}
          {date.toDateString()}
        </p>
      )}
    </div>
  );
}

export default App;

为了启用日期范围功能，我们将selectRange 道具传递给我们的Calendar 组件。selectRange 的默认值是false。启用这个道具后，React-Calendar返回一个有两个日期的数组：开始日期和结束日期。选择的范围被高亮显示，以使用户了解选择。

在添加了一个日期范围后，日历组件将看起来像这样。

Calendar With A Range Of Dates Highlighted In Blue

带有选定日期范围的React日历。

定制React-Calendar

现在我们已经掌握了React-Calendar的最有用的功能，让我们再深入一点，探索一下你可以定制你的日历的方法。

**defaultValue**

defaultValue 这个道具可以让你设置一个默认的选定值。这个道具也支持默认的日期范围选择。如果你想选择一个单一的日期，你可以传递一个日期对象。否则，你可以传递一个包含开始和结束日期值的数组。

你可以像这样添加defaultValue 。

// App.js

function App() {
  const [date, setDate] = useState([
    new Date(2021, 6, 1),
    new Date(2021, 6, 10),
  ]);

  return (
    <div className='app'>
      <h1 className='text-center'>React Calendar with Range</h1>
      <div className='calendar-container'>
        <Calendar
          onChange={setDate}
          selectRange={true}
          defaultValue={date}                                                     
        />
      </div>
    </div>
  );
}

**defaultView**

这个道具是用来设置日历的日期视图的。默认情况下，它被设置为月。因此，如果缺少这个道具，日历就会显示为月视图。

defaultView 提供四个选项：月、年、十年和世纪。即使这个道具被设置为某个值，你仍然可以在不同的日期/月份之间导航。

下面是如何实现defaultView 。

// Calendar component
<Calendar
  onChange={setDate}
  selectRange={true}
  defaultView='decade'                                                    
/>

这个道具将改变日历的初始渲染，使其看起来像这样。

Calendar Showing Years 2021 through 2030

带有十年视图的React日历。

maxDate 和minDate

如果你不希望用户选择某一天之后的日期，你可以通过在日历中添加一个maxDate 的道具来阻止这个动作。你可能能猜到，minDate 这个道具对允许用户选择多早的开始日期设置了一个限制。

如果应用程序启用了日期范围，用户可能会选择比maxDate 晚或比minDate 早的日期。React-Calendar通过只传递maxDate 或minDate 的值来防止这种情况。

// calendar component

<Calendar
  onChange={setDate}
  value={date}
  maxDate={new Date()} // will not allow date later than today
  minDate={new Date(2015, 6, 1)} // will not allow date before 1st July 2015
/>

maxDetail 和minDetail

maxDetail 和minDetail 道具对于限制日历的粒度很重要。maxDetail 定义了用户可以看到的最大细节。如果maxDetail 的值被设置为年，那么用户一次可以看到日历中一年的细节。

同样地，如果minDetail 被设置为年，用户将不能看到超过某一年的细节。

// calendar component

<Calendar
  onChange={setDate}
  value={date}
  maxDetail='year'
/>

下面是一个maxDetail 和minDetail 的例子。

Max Detail Calendar Showing The Months In A Year And Min Detail Calendar Showing The Days In A Month
Next 和Prev 标签

Next 和Prev 标签使你能够定义用于在日历中的视图之间导航的按钮的名称。你也可以使用aria-label 属性使其可以访问。

用于改变下一个值的道具是nextLabel,nextAriaLabel,next2Label, 和next2AriaLabel 。你可以在此添加任何字符串，或者你可以将其设置为null ，如果你想禁用这种导航。

这些属性与prev按钮类似，只是prev是一个前缀--例如：prevLabel,prevAriaLabel,prev2Label,prev2AriaLabel ，等等。

在添加了Next 和Prev 标签后，代码将看起来像这样。

// calendar component

<Calendar
  onChange={setDate}
  value={date}
  nextLabel='month>>'
  nextAriaLabel='Go to next month'
  next2Label='year>>'
  next2AriaLabel='Go to next year'
  prevLabel='<<month'
  prevAriaLabel='Go to prev month'
  prev2Label='<<year'
  prev2AriaLabel='Go to prev year'
/>

结论

React-Calendar是一个很好的库，在实现上提供了很大的灵活性。它是高度可定制的，并且依赖于本地JavaScriptDate 对象，这使得React-Calendar很容易在任何应用程序中实现。

请到官方文档中了解React-Calendar的一些复杂的例子和用例。我希望这个教程能给你留下实现和定制React-Calendar所需的基础知识，以适应你的应用程序和它的受众。

如果你有任何关于使用React-Calendar的问题，欢迎在下面的评论中提出。

The postReact-Calendar tutorial:建立和定制一个简单的日历，首先出现在LogRocket博客上。

avatar
文章
阅读
粉丝