📜  如何在 NextJS 中添加日历?

📅  最后修改于: 2022-05-13 01:56:47.713000             🧑  作者: Mango

如何在 NextJS 中添加日历?

在本文中,我们将学习如何在 NextJS 中添加日历加载器。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

方法:要添加我们的日历,我们将使用 react-calendar 包。 react-calendar 包帮助我们将日历集成到我们的应用程序中。所以首先,我们将安装 react-calendar 包,然后我们将在我们的主页上添加一个日历。

第 1 步:使用以下命令创建一个 React 应用程序。

npx create-react-app gfg

第 2 步:创建项目文件夹(即 gfg)后,使用以下命令移动到该文件夹。

cd gfg

第 3 步:现在我们将使用以下命令安装 react-calendar 包

npm i react-calendar

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

项目结构

添加日历:安装软件包后,我们可以轻松地在应用程序的任何页面上添加日历。在本例中,我们将向主页添加一个日历。

例子:

index.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 (
        
            

NextJs Calendar - GeeksforGeeks

                     
    ); }


在上面的示例中,我们首先导入了 Calendar 组件,然后,我们使用 useState 挂钩来存储当前日期。然后我们使用导入的组件添加我们的日历。

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

npm run dev

输出: