FullCalendar的使用，react日历组件

已于 2024-07-17 14:48:16 修改
阅读量480 收藏
点赞数 3
文章标签： react.js javascript 前端
于 2024-07-09 15:55:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63730900/article/details/140294491
版权

1.下载

yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

2.运行

import React from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

const ExperimentalSchedule = () => {

  return (
    <>
          <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin]}
        />
    </>
  );
};

export default ExperimentalSchedule;

3.右上角需要，日周月

yarn add @fullcalendar/timegrid

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
        />

4.汉化，locale='zh-cn'

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
        />

5.修改，周一开头，时间修改为24小时制

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
        />

6.创建循环任务和单独任务

import React, { useEffect, useState } from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";


const ExperimentalSchedule = () => {
  let matchList = [
    {
      id: '1',
      name: '第一个任务',
      startTime: "2024-07-09 13:22:05",
      endTime: "2024-07-09 15:38:05",
      repeatExecute: false,
    },
    {
      id: '2',
      name: '第二个任务',
      startTime: "2024-07-13 09:45:23",
      endTime: "2024-07-13 15:10:23",
      repeatExecute: false,
    },
    {
      id: '3',
      name: '第三个任务',
      startTime: "2024-07-20 19:37:18",
      endTime: "2024-07-20 19:43:18",
      repeatExecute: false,
    },
    {
      id: '4',
      name: '第四个任务',
      startTime: "2024-07-25 14:49:05",
      endTime: "2024-07-25 03:15:05",
      repeatExecute: false,
    },
  ];

  let repeatMatchList = [
    {
      id: '5',
      name: '每周一，周三重复任务',
      startDate: "2024-07-09", // 任务创建于12月10日
      startTime: "09:10:00", // 每次任务的开始时间
      endTime: "17:30:23", // 每次任务的结束时间
      repeatDates: ["星期一", "星期三"],
      repeatExecute: true,
    },
    {
      id: '6',
      name: '每周二重复任务',
      startDate: "2024-07-09", // 任务创建于12月2日
      startTime: "15:10:00", // 每次任务的开始时间
      endTime: "17:30:23", // 每次任务的结束时间
      repeatDates: ["星期二"],
      repeatExecute: true,
    }
  ];
  const formartRepeat = (value) => {
    switch (value) {
      case '星期一':
        value = 1;
        break;
      case '星期二':
        value = 2;
        break;
      case '星期三':
        value = 3;
        break;
      case '星期四':
        value = 4;
        break;
      case '星期五':
        value = 5;
        break;
      case '星期六':
        value = 6;
        break;
      case '星期日':
        value = 0;
        break;
    }
    return value;
  }
  const [events, setEvents] = useState([]);
  useEffect(() => {
    // 准备事件数据
    const preparedEvents = (list) => {
      return list.map(({ id, name, startTime, endTime, repeatExecute, repeatDates, startDate }) => {
        let event = {
          id,
          title: name,
          start: repeatExecute ? `${startDate}T${startTime}` : startTime, // 格式化时间
          end: repeatExecute ? `${startDate}T${endTime}` : endTime, // 格式化时间
          borderColor: repeatExecute ? 'black' : 'red',
        };

        if (repeatExecute) {
          event.daysOfWeek = repeatDates.map(formartRepeat); // 设置星期几重复
          event.startRecur = startDate; // 重复开始日期
        }

        return event;
      });
    };

    const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];
    setEvents(formattedEvents);
  }, []);
  const  eventClick = (eventInfo) => {
    console.log(eventInfo.event);
  }
  return (
    <>
 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
          events={events}
          eventClick={eventClick}
        />
    </>
  );
};

export default ExperimentalSchedule;

7.如果想让月视图的任务既显示开始时间又显示结束时间，加一个属性：

displayEventEnd

8.用后端数据

  const [matchList,setMatchList] = useState([]);
  const [repeatMatchList,setRepeatMatchList] = useState([]);
  useEffect(() => {
    const init=async()=>{
      const res= await scheduleService.getScheduleList()
    // console.log(res.data);
      setMatchList(res.data)
    }
    init()
  }, []);
  const preparedEvents = (list) => {
    return list.map(({ experimentName, startTime, endTime, id, remindTime }) => {
      let event = {
        id: id,
        title: experimentName, // 事件标题使用实验名称
        start: startTime, // 格式化时间
        end: endTime, // 格式化时间
        // 假设 borderColor 根据 remindTime 的值来设置颜色
        borderColor: 'red',
      };
      // 如果有 remindTime 并且需要设置重复提醒，则进行相应的设置
      if (remindTime) {
        // 这里可以添加重复事件的逻辑，例如根据 remindTime 设置重复提醒的规则
        // 例如：event.daysOfWeek = ...;
        // event.startRecur = remindTime;
      }
      return event;
    });
  }
  useEffect(() => {
    const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];
    setEvents(formattedEvents);
  }, [matchList]);

9.日程的点击事件

  const eventClick = async(eventInfo) => {
    const id=eventInfo.event._def.publicId
    setscheduleId(eventInfo.event._def.publicId)
    console.log(eventInfo.event);
      setModalVisit1(true)
    const res=await scheduleService.getScheduleById(id)
    // console.log(res.data);
      form1.setFieldsValue(res.data)
  };
    eventClick={eventClick}

10.自定义按钮

customButtons={{
          jia: {
            text: '添加日程',
            click: function () {
              setModalVisit(true);
            },
          },
        }}

11.一些样式

eventTextColor= {'black'}
			eventBorderColor={'#66FFFF'}
			eventBackgroundColor={'rgba(234, 229, 127,0.8)'}
:root {
    --fc-small-font-size: .85em;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: hsla(0,0%,82%,.3);
    --fc-neutral-text-color: grey;
    --fc-border-color: #ddd;
    --fc-button-text-color: #fff;
    --fc-button-bg-color: #2c3e50;
    --fc-button-border-color: #2c3e50;
    --fc-button-hover-bg-color: #1e2b37;
    --fc-button-hover-border-color: #1a252f;
    --fc-button-active-bg-color: #1a252f;
    --fc-button-active-border-color: #151e27;
    --fc-event-bg-color: #3788d8;
    --fc-event-border-color: #3788d8;
    --fc-event-text-color: #fff;
    --fc-event-selected-overlay-color: rgba(0,0,0,.25);
    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    --fc-non-business-color: hsla(0,0%,84%,.3);
    --fc-bg-event-color: #8fdf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188,232,241,.3);
    --fc-today-bg-color: rgba(255,220,40,.15);
    --fc-now-indicator-color: red;
}

前端小菜鸟也有人起
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React使用FullCalendar
weixin_55652851的博客
12-20 1326
React使用FullCalendar
打造超酷的 React 迷你日历组件，只需几步！
最新发布
技小白的博客
07-19 912
现在市面上的组件库大多包含日历组件，那么它们具体是如何实现的呢？其实原理很简单，主要是通过使用Date对象的相关API。今天我们就来开发一个迷你版的日历组件。
推荐：FullCalendar React组件——强大的日程管理工具
gitblog_00041的博客
05-12 465
推荐：FullCalendar React组件——强大的日程管理工具 项目地址:https://gitcode.com/fullcalendar/fullcalendar-react 项目介绍 FullCalendar React Component 是一款专为React框架设计的官方日历组件，它源自于广受好评的全功能日历库FullCalendar。这个组件提供了丰富且灵活的日程展示与管理功能，使...
fullcalendar-react:FullCalendar的官方React组件
04-29
FullCalendar React组件 React的官方FullCalendar组件。 这不仅仅是一个“连接器”。 它告诉核心FullCalendar包开始使用React虚拟DOM节点（而不是通常使用的节点）进行渲染，从而将转换为“真实的” React组件。 您可以中学到更多（更多信息）。
React整合FullCalendar笔记（一）
追逐蓦然
12-23 1691
React整合FullCalendar笔记（一） 前期 因为公司的需求，需要一个可以拖动的日历效果。经过前期的调研，找到 FullCalendar 框架比较符合项目的需求。但是碍于现在关于这个框架的文档都比较零散和不全。在经过几天的调研中，我大概实现了部分的功能，由此想做一系列的博文跟大家分享一下。 实现效果 第一期，我们就简单的使用这个框架，在页面上面单纯的展示在页面中。 主要代码 大家可以到 官方文档 进行学习。 ...
fullcalendar-react-bundle:将@fullcalendarreact与一些插件捆绑在一起，以用作ClojureScript中的外部库
05-05
FullCalendar React捆绑为UMD 目标是将@ fullcalendar / react与某些插件捆绑在一个文件中： @ fullcalendar /互动 @ fullcalendar / daygrid @ fullcalendar / timegrid 并具有FullCalendar组件，并且每个插件一旦作为ClojureScript项目中的外部库导入，便可以在js名称空间中轻松使用。 react和react-dom未包含在捆绑包中，必须以某种方式作为对等方依赖项提供（在我们的案例中是9.0.1或更高版本）。 CSS包含在JS捆绑包中。 安装 yarn install 生成命令 yarn build # builds files into dist/ directory yarn clean # start fresh 源自： : 您可以将其视为导入外
react-fullcalendar
05-23
React全日历 执照 麻省理工学院
fullcalendar-react-wrapper
05-19
通过这个React包装器，开发者无需直接处理jQuery的API，而是可以利用React的声明式编程方式来操作日历组件。 **知识点详解:** 1. **React**: React是Facebook推出的一款用于构建用户界面的JavaScript库，主要处理...
react-zero-calendar:通过假期，农历和移动滑动支持来响应FullCalendar
05-11
npm install react-zero-calendar 纱 yarn add react-zero-calendar 故事书 基本设定 import Calendar from 'react-zero-calendar'; const App = () => { return ( ); } 新增活动 const App = () => { return ...
日历组件日历组件日历组件
04-25
开发日历组件时，开发人员可能会使用JavaScript库如FullCalendar，或是Android和iOS平台上的原生API。这些工具提供了丰富的功能和自定义选项，可以帮助快速构建高效且用户友好的日历应用。同时，为了保证跨平台兼容...
react-h5-calendar:react 移动端日历插件。上下滑动切换周月模式。支持两种模式：1，月模式，左右滑动切换月份。2、周模式，左右滑动切换周. h5 日历组件, 支持日期标记
05-07
react 移动端日历组件 支持周视图,周日历 支持月视图,月日历 支持左右滑动切换月份 支持上下滑动切换日历视图 支持日历上打点标记 本项目基于 构建和发布 基于处理日历逻辑 使用教程 yarn add react-h5-calendar ...
：date：React的预定日历组件-React开发
05-27
<Calendax>就像将<Calendarx>放入您的React应用一样容易。 首先是规定的React解决方案。 用法从'calendarx'导入Calendarx ReactDOM.render（<App> <Calendarx /＆g:calendar:Calendarx您需要遵循的规定，React Calendarx的Calendar组件是一个状态容器，使创建自定义日历组件变得轻而易举。使用简单的API， Calendarx使您可以轻松显示日期和事件，更改视图以及在月，周和日之间进行转换入门纱线添加calendarx或npm install calendarx示例用法import日历from'calendarx'import {Row，Column，Events} from './components'const events = [{date：new Date
Fullcalendar--日程管理 js组件
08-06
通过Fullcalendar，你可以做出一个完全类似google日历的程序。 它使用起来不难，因为它是基于jQuery UI的，继承了简单用法的特征。
react-Calendarx一个简单可定制可扩展响应式的React日历插件
08-15
Calendarx, 一个简单、可定制、可扩展、响应式的React日历插件
React日历组件fullcalendar使用指北
棉花没有糖的博客
08-21 1576
react中的日历插件fullcalender的使用说明
React项目中使用 FullCalendar v4 插件进行日程管理
nk_Sasoli的博客
12-05 3698
FullCalendar功能很强大，但网上容易找到的大多都是JQuery的使用方法，在此记录一下本人在react项目中用到的功能点 FullCalendar的安装 按照官方文档的react章节进行基本安装 npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid 这里使用import引入项目 i...
Fullcalendar插件的使用
wangweiscsdn的博客
08-29 1102
设计需求 因为设计稿是这样的 像日历又不完全是日历，所以本来想用antd的日历组件也用不了 还好Fullcalendar插件可以满足 安装 npm install --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction 不说太多上代码 具体看注释 import React, { useState, useRef, useMemo } from 'react'; i
React FullCalendar 默认显示当前日期
qq_41827365的博客
11-12 1938
React FullCalendar 默认显示当前日期 let date=new Date() initialDate={date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()}
fullcalendar react
10-09
然后，在你的React组件中导入所需的模块，并使用fullcalendar-react组件来创建日历： ```jsx import React from 'react'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值