使用React的事件日历

在本文中，我们将使用ReactJS框架创建一个日历应用程序。该应用程序基本上显示一个日历，并具有在特定日期上添加事件的附加功能。用户还可以选择删除事件。所有这些事件创建和删除的逻辑都是使用JSX实现的。该项目适用于创建事件和设置提醒的应用程序。

让我们来看看我们的最终项目将是什么样子：

使用React的事件日历

使用的技术/先决条件：

ReactJS
CSS
JSX
React中的功能组件
方法：

开发的应用程序基本上是一个日历项目，是使用React开发的Web应用程序，旨在为用户提供一个用户友好的界面来显示日期和组织事件。有一个输入字段，在该字段中提示用户输入事件名称、事件日期和显示创建的事件信息的卡片。用户还可以根据需要删除事件。状态使用ReactJS的useState钩子进行管理。

创建应用程序的步骤：

步骤1： 在VSCode IDE中使用以下命令设置React项目。

npx create-react-app <<name of project>>

步骤2： 执行以下命令，导航到新创建的项目文件夹。

cd <<Name_of_project>>

步骤3： 由于我们在这个项目中使用了 react-calendar ，我们需要使用npm来安装它。在VS Code的终端中执行以下命令来安装react-calendar。

npm install react-calendar

项目结构：

使用React的事件日历

package.json中更新的依赖将如下所示：

{  
  "name": "calender",  
  "version": "0.1.0",  
  "private": true,  
  "dependencies": {  
    "@testing-library/jest-dom": "^5.16.5",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "react": "^18.2.0",  
    "react-calendar": "^4.3.0",  
    "react-dom": "^18.2.0",  
    "react-scripts": "5.0.1",  
    "web-vitals": "^2.1.4"  
},

示例： 在各个文件中编写以下代码

App.js: App.js文件的代码表示使用ReactJS构建的日历应用程序的主要App组件。该应用程序允许用户创建、更新和删除事件。
App.css: 该文件包含应用程序中每个组件的样式。通过这个文件提供应用程序的外观和感觉。
Calendar.css: 该文件位于安装了react-calendar后在react-calendar文件夹中的node_modules文件夹中。我们将覆盖日历的默认样式。

import React, { useState } from "react"; 
import Calendar from "react-calendar"; 
import "react-calendar/dist/Calendar.css"; 
import "./App.css"; 
  
const App = () => { 
    const [selectedDate, setSelectedDate] = useState(null); 
    const [eventName, setEventName] = useState(""); 
    const [events, setEvents] = useState([]); 
  
    const Date_Click_Fun = (date) => { 
        setSelectedDate(date); 
    }; 
  
    const Event_Data_Update = (event) => { 
        setEventName(event.target.value); 
    }; 
  
    const Create_Event_Fun = () => { 
        if (selectedDate && eventName) { 
            const newEvent = { 
                id: new Date().getTime(), 
                date: selectedDate, 
                title: eventName, 
            }; 
            setEvents([...events, newEvent]); 
            setSelectedDate(null); 
            setEventName(""); 
            setSelectedDate(newEvent.date); 
        } 
    }; 
  
    const Update_Event_Fun = (eventId, newName) => { 
        const updated_Events = events.map((event) => { 
            if (event.id === eventId) { 
                return { 
                    ...event, 
                    title: newName, 
                }; 
            } 
            return event; 
        }); 
        setEvents(updated_Events); 
    }; 
  
    const Delete_Event_Fun = (eventId) => { 
        const updated_Events = events.filter((event) => event.id !== eventId); 
        setEvents(updated_Events); 
    }; 
  
    return ( 
        <div className="app"> 
            <h1> GeeksforGeeks Calendar Application </h1> 
            <div className="container"> 
                <div className="calendar-container"> 
                    <Calendar 
                        value={selectedDate} 
                        onClickDay={Date_Click_Fun} 
                        tileClassName={({ date }) => 
                            selectedDate && 
                            date.toDateString() === selectedDate.toDateString() 
                                ? "selected"
                                : events.some( 
                                      (event) => 
                                          event.date.toDateString() === 
                                          date.toDateString(), 
                                  ) 
                                ? "event-marked"
                                : ""
                        } 
                    />{" "} 
                </div> 
                <div className="event-container"> 
                    {" "} 
                    {selectedDate && ( 
                        <div className="event-form"> 
                            <h2> Create Event </h2>{" "} 
                            <p> 
                                {" "} 
                                Selected Date: {selectedDate.toDateString()}{" "} 
                            </p>{" "} 
                            <input 
                                type="text"
                                placeholder="Event Name"
                                value={eventName} 
                                onChange={Event_Data_Update} 
                            />{" "} 
                            <button 
                                className="create-btn"
                                onClick={Create_Event_Fun} 
                            > 
                                Click Here to Add Event{" "} 
                            </button>{" "} 
                        </div> 
                    )} 
                    {events.length > 0 && selectedDate && ( 
                        <div className="event-list"> 
                            <h2> My Created Event List </h2>{" "} 
                            <div className="event-cards"> 
                                {" "} 
                                {events.map((event) => 
                                    event.date.toDateString() === 
                                    selectedDate.toDateString() ? ( 
                                        <div 
                                            key={event.id} 
                                            className="event-card"
                                        > 
                                            <div className="event-card-header"> 
                                                <span className="event-date"> 
                                                    {" "} 
                                                    {event.date.toDateString()}{" "} 
                                                </span>{" "} 
                                                <div className="event-actions"> 
                                                    <button 
                                                        className="update-btn"
                                                        onClick={() => 
                                                            Update_Event_Fun( 
                                                                event.id, 
                                                                prompt( 
                                                                    "ENTER NEW TITLE", 
                                                                ), 
                                                            ) 
                                                        } 
                                                    > 
                                                        Update Event{" "} 
                                                    </button>{" "} 
                                                    <button 
                                                        className="delete-btn"
                                                        onClick={() => 
                                                            Delete_Event_Fun( 
                                                                event.id, 
                                                            ) 
                                                        } 
                                                    > 
                                                        Delete Event{" "} 
                                                    </button>{" "} 
                                                </div>{" "} 
                                            </div>{" "} 
                                            <div className="event-card-body"> 
                                                <p className="event-title"> 
                                                    {" "} 
                                                    {event.title}{" "} 
                                                </p>{" "} 
                                            </div>{" "} 
                                        </div> 
                                    ) : null, 
                                )}{" "} 
                            </div>{" "} 
                        </div> 
                    )}{" "} 
                </div>{" "} 
            </div>{" "} 
        </div> 
    ); 
}; 
  
export default App;

CSS

/* App.css */
body { 
    font-family: Arial, sans-serif; 
    background-color: #f5f7fa; 
    margin: 0; 
    padding: 0; 
} 
  
.app { 
    text-align: center; 
    margin: 20px; 
} 
  
h1 { 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
    color: #05ca40ce; 
} 
  
.container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start; 
    margin-top: 2rem; 
} 
  
.calendar-container { 
    flex: 1; 
    max-width: 500px; 
    margin-right: 2rem; 
} 
  
.event-container { 
    flex: 1; 
    max-width: 500px; 
} 
  
@media screen and (max-width: 768px) { 
    .container { 
        flex-direction: column; 
    } 
  
    .calendar-container, 
    .event-container { 
        max-width: 100%; 
        margin-right: 0; 
        margin-bottom: 2rem; 
    } 
} 
  
.react-calendar { 
    width: 100%; 
    max-width: 500px; 
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid #ccc; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 1.125em; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    padding: 10px; 
    transition: background-color 0.2s; 
} 
  
.react-calendar--doubleView { 
    width: 100%; 
} 
  
.react-calendar--doubleView .react-calendar__viewContainer { 
    display: flex; 
    margin: -0.5em; 
} 
  
.react-calendar--doubleView .react-calendar__viewContainer>* { 
    width: 50%; 
    margin: 0.5em; 
} 
  
.react-calendar, 
.react-calendar *, 
.react-calendar *:before, 
.react-calendar *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
  
.react-calendar button { 
    margin: 0; 
    border: 0; 
    outline: none; 
} 
  
.react-calendar button:enabled:hover { 
    cursor: pointer; 
} 
  
.react-calendar__navigation { 
    display: flex; 
    height: 44px; 
    margin-bottom: 1em; 
} 
  
.react-calendar__navigation button { 
    min-width: 44px; 
    background: none; 
} 
  
.react-calendar__navigation button:disabled { 
    background-color: #f0f0f0; 
} 
  
.react-calendar__navigation button:enabled:hover, 
.react-calendar__navigation button:enabled:focus { 
    background-color: #e6e6e6; 
} 
  
.react-calendar__month-view__weekdays { 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 0.8rem; 
} 
  
.react-calendar__month-view__weekdays__weekday { 
    padding: 0.5em; 
} 
  
.react-calendar__month-view__weekNumbers .react-calendar__tile { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.75em; 
    font-weight: bold; 
} 
  
.react-calendar__month-view__days__day--weekend { 
    color: #d10000; 
} 
  
.react-calendar__month-view__days__day--neighboringMonth { 
    color: #757575; 
} 
  
.react-calendar__year-view .react-calendar__tile, 
.react-calendar__decade-view .react-calendar__tile, 
.react-calendar__century-view .react-calendar__tile { 
    padding: 2em 0.5em; 
} 
  
.react-calendar__tile { 
    max-width: 100%; 
    padding: 10px 6.6667px; 
    background: none; 
    text-align: center; 
    line-height: 16px; 
} 
  
.react-calendar__tile:disabled { 
    background-color: #f0f0f0; 
} 
  
.react-calendar__tile:enabled:hover, 
.react-calendar__tile:enabled:focus { 
    background-color: #e6e6e6; 
} 
  
.react-calendar__tile--now { 
    background: #ffff76; 
} 
  
.react-calendar__tile--now:enabled:hover, 
.react-calendar__tile--now:enabled:focus { 
    background: #ffffa9; 
} 
  
.react-calendar__tile--hasActive { 
    background: #76baff; 
} 
  
.react-calendar__tile--hasActive:enabled:hover, 
.react-calendar__tile--hasActive:enabled:focus { 
    background: #a9d4ff; 
} 
  
.react-calendar__tile--active { 
    background: #007bff; 
    color: white; 
} 
  
.react-calendar__tile--active:enabled:hover, 
.react-calendar__tile--active:enabled:focus { 
    background: #0056b3; 
} 
  
.react-calendar--selectRange .react-calendar__tile--hover { 
    background-color: #e6e6e6; 
} 
  
.event-form { 
    margin-bottom: 20px; 
} 
  
.event-form h2 { 
    margin-bottom: 10px; 
    color: #007bff; 
} 
  
.event-form p { 
    font-size: 1.2rem; 
    color: #1403f6; 
} 
  
.event-form input { 
    padding: 8px; 
    font-size: 1rem; 
    margin-right: 10px; 
} 
  
.create-btn { 
    padding: 8px 16px; 
    background-color: #ff4081; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    font-size: 1rem; 
    cursor: pointer; 
    transition: background-color 0.2s; 
} 
  
.create-btn:hover { 
    background-color: #ff267f; 
} 
  
.event-list { 
    margin-top: 20px; 
} 
  
.event-cards { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
} 
  
.event-card { 
    width: 300px; 
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 8px; 
    margin: 10px; 
    padding: 10px; 
    cursor: pointer; 
    transition: transform 0.2s, box-shadow 0.2s; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
} 
  
.event-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
} 
  
.event-card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
} 
  
.event-date { 
    font-size: 1rem; 
    color: #f07809; 
} 
  
.event-actions { 
    display: flex; 
} 
  
.update-btn, 
.delete-btn { 
    padding: 8px 12px; 
    margin-left: 5px; 
    background-color: #007bff; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    font-size: 0.9rem; 
    cursor: pointer; 
    transition: background-color 0.2s; 
} 
  
.update-btn:hover, 
.delete-btn:hover { 
    background-color: #0056b3; 
} 
  
.event-card-body { 
    padding-bottom: 10px; 
} 
  
.event-title { 
    font-size: 1.5rem; 
    color: #fd0000; 
} 
  
.selected { 
    background-color: #ff4081 !important; 
    color: white; 
} 
  
.event-marked { 
    background-color: #ff4081; 
    color: white; 
}

CSS

/* node_modules\react-calendar\dist\Calendar.css */
.react-calendar { 
    width: 350px; 
    max-width: 100%; 
    background: white; 
    border: 1px solid #a0a096; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 1.125em; 
} 
  
.react-calendar--doubleView { 
    width: 700px; 
} 
  
.react-calendar--doubleView .react-calendar__viewContainer { 
    display: flex; 
    margin: -0.5em; 
} 
  
.react-calendar--doubleView .react-calendar__viewContainer>* { 
    width: 50%; 
    margin: 0.5em; 
} 
  
.react-calendar, 
.react-calendar *, 
.react-calendar *:before, 
.react-calendar *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
  
.react-calendar button { 
    margin: 0; 
    border: 0; 
    outline: none; 
} 
  
.react-calendar button:enabled:hover { 
    cursor: pointer; 
} 
  
.react-calendar__navigation { 
    display: flex; 
    height: 44px; 
    margin-bottom: 1em; 
} 
  
.react-calendar__navigation button { 
    min-width: 44px; 
    background: none; 
} 
  
.react-calendar__navigation button:disabled { 
    background-color: #f0f0f0; 
} 
  
.react-calendar__navigation button:enabled:hover, 
.react-calendar__navigation button:enabled:focus { 
    background-color: #e6e6e6; 
} 
  
.react-calendar__month-view__weekdays { 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 0.75em; 
} 
  
.react-calendar__month-view__weekdays__weekday { 
    padding: 0.5em; 
} 
  
.react-calendar__month-view__weekNumbers .react-calendar__tile { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.75em; 
    font-weight: bold; 
} 
  
.react-calendar__month-view__days__day--weekend { 
    color: #d10000; 
} 
  
.react-calendar__month-view__days__day--neighboringMonth { 
    color: #757575; 
} 
  
.react-calendar__year-view .react-calendar__tile, 
.react-calendar__decade-view .react-calendar__tile, 
.react-calendar__century-view .react-calendar__tile { 
    padding: 2em 0.5em; 
} 
  
.react-calendar__tile { 
    max-width: 100%; 
    padding: 10px 6.6667px; 
    background: none; 
    text-align: center; 
    line-height: 16px; 
} 
  
.react-calendar__tile:disabled { 
    background-color: #f0f0f0; 
} 
  
.react-calendar__tile:enabled:hover, 
.react-calendar__tile:enabled:focus { 
    background-color: #e6e6e6; 
} 
  
.react-calendar__tile--now { 
    background: #ffff76; 
} 
  
.react-calendar__tile--now:enabled:hover, 
.react-calendar__tile--now:enabled:focus { 
    background: #ffffa9; 
} 
  
.react-calendar__tile--hasActive { 
    background: #76baff; 
} 
  
.react-calendar__tile--hasActive:enabled:hover, 
.react-calendar__tile--hasActive:enabled:focus { 
    background: #a9d4ff; 
} 
  
.react-calendar__tile--active { 
    background: #006edc; 
    color: white; 
} 
  
.react-calendar__tile--active:enabled:hover, 
.react-calendar__tile--active:enabled:focus { 
    background: #1087ff; 
} 
  
.react-calendar--selectRange .react-calendar__tile--hover { 
    background-color: #e6e6e6; 
}