如何在 ReactJS 中创建日历？

在本文中，我们将学习如何在 ReactJS 中创建日历。您可以在待办事项列表、电子商务网站、订票网站和更多应用程序中使用此日历。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要创建我们的日历，我们将看到 2 种不同的方法。在第一种方法中，我们将看到如何创建一个没有任何样式的简单日历，在第二种方法中，我们还将为日历添加一些样式以使其更具吸引力。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg  

项目结构：它看起来像这样。

示例 1：在此示例中，我们将创建一个没有任何样式的非常简单的日历。因此，为此，我们将安装一个新的 npm 包。在终端中运行以下代码以安装软件包。

npm i @natscale/react-calendar

现在我们要将日历添加到我们的主页。为此，在您的App.js文件中添加以下代码。

App.js

import React, { useState, useCallback } from 'react';
import { Calendar } from '@natscale/react-calendar';
  
export default function CalendarGfg() {
  const [value, setValue] = useState();
  
  const onChange = useCallback(
    (value) => {
      setValue(value);
    },
    [setValue],
  );
  
  return (
    

      
Calendar - GeeksforGeeks
      
    
  );
}

说明：在上面的文件中，我们首先从我们安装的包中导入我们的日历。之后，我们使用 useState() 钩子在 onChange函数上创建和设置值。然后我们将返回我们的日历。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：

示例 2：在此示例中，我们将创建一个带有一些样式的日历。因此，为此，我们将安装一个新的 npm 包。在终端中运行以下代码以安装软件包。

npm i react-calendar

现在我们要将日历添加到我们的主页。为此，在您的 App.js 文件中添加以下代码。

应用程序.js

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
  
export default function CalendarGfg() {
  const [value, onChange] = useState(new Date());
  
  return (
    

      
Calendar - GeeksforGeeks
      
    
  );
}

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：