在React中创建FullCalendar自定义按钮
的步骤如下：
- 首先，确保你已经安装了React和FullCalendar的依赖包。你可以使用npm或yarn来安装它们。
- 创建一个新的React组件，用于显示FullCalendar和自定义按钮。你可以将其命名为
CustomCalendar。 - 在
CustomCalendar组件的render方法中，创建一个div元素，并给它一个唯一的id。这将用于在后面初始化FullCalendar。 - 在
componentDidMount生命周期方法中，使用FullCalendar的initCalendar函数来初始化日历。你可以通过传递一个配置对象来自定义日历的外观和行为。 - 例如，你可以指定
header选项来定义日历的标题栏内容，包括自定义按钮。在header选项中，你可以指定一个left属性，其中包含一个数组，数组中的每个元素都表示一个按钮。你可以为每个按钮指定文本、点击事件回调函数等属性。 - 下面是一个示例配置对象的代码：
- 下面是一个示例配置对象的代码：
- 在
componentDidMount中，你可以使用FullCalendar的getCalendar方法来获取日历对象，并调用setOption方法将配置应用于日历。 - 在
componentDidMount中，你可以使用FullCalendar的getCalendar方法来获取日历对象，并调用setOption方法将配置应用于日历。 - 这样，你就创建了一个具有自定义按钮的FullCalendar。
- 最后，在
render方法中，将之前创建的div元素作为CustomCalendar组件的内容返回。 - 最后，在
render方法中，将之前创建的div元素作为CustomCalendar组件的内容返回。
通过这些步骤，你就可以在React中创建FullCalendar并自定义按钮了。记得根据你的实际需求，进一步调整配置对象中的属性和按钮行为。
相关·内容
上下文
我用的是FullCalendar v5.11.0，NextJS v12.0.7，React v17.0.2和Typescript v4.3.5。
我想要基于创建一个简单的日历，所以我创建了一个包含以下代码的Calendar组件：
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import Card from '../Card/Card';
import styles from '.
浏览 20提问于2022-05-06得票数 2
回答已采纳
我已经使用了带有标题内容的fullCalendar.js，比如: today，month，year，prev，next，还做了一个自定义的add按钮，现在我想在标题中的add按钮前添加一个简单的文本，上面写着“请求新类”，它最终看起来像这样：
现在我的头文件看起来像这样：
以下是到目前为止的代码：
$('#sfullCalendar').fullCalendar({
customButtons: {
myCustomButton: {
theme: 'true',
text: '&#
浏览 47提问于2017-01-15得票数 1
回答已采纳
我使用完整的日历在我的反应项目。虽然我对状态进行了更新，但无法刷新日历。
下面是我的示例代码：
在本示例中，当用户单击“更改标题”按钮时，我将更改事件的标题，但没有任何更改。我有错过什么吗？
谢谢你的帮助。
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalenda
浏览 0提问于2019-08-23得票数 0
回答已采纳
我正在使用React实现FullCalendar，并希望添加自定义按钮。FullCalendar文档涵盖了自定义按钮，但不包括React。 我已经尝试了文档中显示的自定义按钮代码的不同变体，但我无法在React中运行任何东西。我已经将自定义按钮放在一个数组中。我已经尝试将自定义按钮代码移出render方法。 export default class DemoApp extends React.Component {
calendarComponentRef = React.createRef()
state = {
calendarWeekends: true,
c
浏览 145提问于2019-06-12得票数 1
我使用的是NextJS和Fullcalendar。 我尝试使用动态导入来使用fullcalendar，就像在this example中一样(更多信息，这个示例解决方案来自here)。 它起作用了，但有一个问题。几乎每5次刷新尝试中就有1次以错误Please import the top-level fullcalendar lib before attempting to import a plugin (like this，但在我的例子中版本是正确的)结束。 在那之后，我发现next/dynamic的模块选项已经被弃用了。我认为这是我问题的根源(我不能百分之百确定，但至少它已经被弃用，需要
浏览 426提问于2021-03-23得票数 8
1回答
我正在用react开发一个完整的日历应用程序。我的目标是在“DayGridMonth”视图中点击一天的磁贴，让它在“DayGridDay”视图中切换到那一天。 我使用了dateClick函数来触发事件，但无法访问changeView应用编程接口。我还尝试在我的组件中创建一个对实际完整日历对象的引用，但在那里也找不到它。 谢谢 代码片段： import React from 'react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '
浏览 29提问于2020-05-01得票数 2
回答已采纳
我正试图在我的cra中实现JEST，但我面临着一个问题： FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will u
浏览 31提问于2020-09-03得票数 0
回答已采纳
1回答
我正在尝试使用SharePoint Scheduler创建一个FullCalendar框架webpart (基于REACT)。完整的 daygrid工作，但是一旦我导入Scheduler (@全职日历/资源-时间线)，构建失败，并出现以下错误：
预期的类型来自属性“plugins”，在这里，在'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{子？：ReactNode；}>‘类型上声明
实际代码
import * as React from '
浏览 4提问于2019-10-22得票数 1
我有这个react组件 import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourc
浏览 60提问于2021-01-16得票数 0
我正在尝试向标题中的现有按钮添加一个新按钮。我不知道怎么做这件事。目前，我的头中有prev，next，today，month，agendaWeek，agendaDay。我想再多一个按钮来添加新的事件。这样点击按钮后，我就可以通过弹出窗口添加新事件。
我的代码如下：
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
浏览 0提问于2016-05-24得票数 2
回答已采纳
1回答
我有一个rails应用程序，前端的反应越来越多(使用react-rails和webpacker宝石)。我正在远离JQuery-mobile的外观和感觉。
我试图使用他们的(beta) fullcalendar组件(按照他们的指示)添加，但我似乎无法加载/应用任何。我使用按钮显示数据，但没有完整的日历格式/图像。这是我的密码：
import React from "react"
import PropTypes from "prop-types"
import FullCalendar from '@fullcalendar/react'
impo
浏览 1提问于2019-04-15得票数 0
我正在创建一个带有react fullcalendar的日历应用程序。我需要添加自定义视图，但可以找到一个如何做到这一点的例子。我也看过文档，但找不到任何有用的东西。
浏览 0提问于2019-05-03得票数 0
我尝试将外部div拖放到React中的fullcalendar来创建事件。
但是React与JQuery UI不兼容，所以我不能使用draggable。
使用react- big -calendar是一个大动作，所以我尝试寻找是否有更简单的解决方案来使用我在过去几年中一直使用的fullcalendar。
我还尝试使用react-dnd，但从未调用fullcalendar的drop。
有谁有建议吗？谢谢。
浏览 0提问于2017-09-01得票数 1
@calendar/google-日历似乎试图在静态gatsby构建过程中获取JSON。我不知道从哪里开始找。
在我的项目上运行gatsby build时，生成会出现以下错误：
failed Building static HTML for pages - 3.026s
error Building static HTML failed for path "/calendar/"
6431 | body = encodeParams(params);
6432 | }
> 6433 | var xhr = new XMLHttpR
浏览 3提问于2021-01-16得票数 1
回答已采纳
我正在尝试用我自己的带有useContext钩子的功能React组件包装FullCalendar React组件，以访问MobX存储(我最终可能会在其他组件中使用该存储)和observer()，以使其对存储中的更改做出反应。我的组件如我所期望的那样做出反应，但在更改后使FullCalendar组件呈现时遇到了问题。 我试着找到一个解决方案，用<Observer>包装<FullCalendar>，使用autorun()和reaction()，但都不起作用。我一定是漏掉了什么 到目前为止，这个沙盒https://codesandbox.io/s/mobx-fullcale
浏览 14提问于2019-10-02得票数 0
回答已采纳
在与jquery一起使用的fullCalendar中，我有这样的eventRender： eventRender: function (event, element, view) {
if (event.finito == 0) {
element.css('background-color', '#FF0000');
}
}, 我正在尝试用React设置相同的东西。我试过了，但是不起作用:我还尝试了在网上和官方网站上找到的其他各种代码示例，但它们都不起作用。 customEventRender = info =>
浏览 199提问于2020-03-24得票数 1
1回答
我的页面上有以下组件：
events = [{ title: "today's event", date: new Date() }];
<FullCalendar
height="auto"
contentHeight="auto"
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
浏览 4提问于2022-09-10得票数 1
回答已采纳
我正在尝试创建一个动态添加事件的日历，当我向状态数组添加一个事件时，它不会更新日历，即它不会显示在日历上。我的代码如下： import React, { useState } from 'react';
import Page from '../../Components/Page/Page';
import FullCalendar from '@fullcalendar/react';
import DayGridPlugin from '@fullcalendar/daygrid';
import Modal from &
浏览 40提问于2020-09-27得票数 0
我正在使用包@fullcalendar/react在我的管理仪表板网站上创建一个日历。我想要的是允许管理员添加事件，它们将显示在整个日历中的防火墙数据库中。
但是，当我获取我的事件集合时，它只是在日历中不显示任何内容。
我做错了什么？为什么这些事件没有出现？
这是我的eventsData阵列的控制台日志。
这是我的代码：
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interaction
浏览 13提问于2022-06-28得票数 2
回答已采纳
4回答
全日历React组件： import FullCalendar from "@fullcalendar/react";
import timeGrid from "@fullcalendar/resource-timegrid";
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
class FC extends React.Component {
calendarComponentRef = React.createRef();
construc
浏览 45提问于2019-07-25得票数 7
回答已采纳
在这里，我试图在React项目上使用FullCalendar，我需要能够在每次点击时创建事件。因此，我遵循了代码的一部分： https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/master/react?file=/src/DemoApp.jsx 显示日历后，我使用api修改当天，这样我就可以正常工作了。但是，我不能和它互动。我安装了fullCalendar/interaction并在组件中指定了插件，但select &dateclick没有任何反应...我把代码的一部分放进去了
浏览 18提问于2020-08-24得票数 0
我在通过带有react的完整日历调度器中的json提要提供资源时遇到了问题。提要在没有react的普通全日历调度器中工作。 import React from 'react';
import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import calendarInteraction from '@fullcalendar/interaction';
浏览 29提问于2020-09-11得票数 2
我在reactjs中使用了Fullcalender，但是我在用完整日历实现列表时遇到了麻烦：
这是我的密码：
import React, { Component } from 'react';
// import { connect } from "react-redux";
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import { Calendar } from '
浏览 2提问于2020-04-16得票数 0
回答已采纳
我尝试使用FullCalendar在我的React项目中显示Google，方法是跟踪他们的，并得到关于无法到达的代码的错误信息。然后我试着用它来做出反应。结果是一个没有数据的好日历。
这是我的密码。正如您所看到的，我使用的不是“日历”，而是FullCalendar。
import React from "react";
import FullCalendar from '@fullcalendar/react'
import {Calendar} from "@fullcalendar/core";
import timeGridPlugin f
浏览 5提问于2022-01-16得票数 2
我对ReactJ很陌生，我试图将FullCalendar的组件分类到一个功能组件中，我看了一些教程，但是当我这样做时，我一直收到这个错误
Uncaught TypeError: Cannot read properties of null (reading 'getApi')
我为FullCalendar搜索了一个函数组件，但没有发现任何有用的东西--这是我的类组件：
import React from "react";
import FullCalendar from "@fullcalendar/react";
import './F
浏览 9提问于2022-03-25得票数 0
我正在尝试从.css包导入。
首先，我创建了一个新的组件my-日历 (html，scss，ts)。
然后，我尝试了三种不同的方法，但只有最后一种方法对我有效：
如文档所示，直接引用index.html中的文件(由于在构建项目时丢失了对node_modules的引用，所以它无法工作)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
在我的日历中添加@import "~fullcalendar/dist/fullcalen
浏览 1提问于2017-10-03得票数 19
回答已采纳
我正在使用带有react-tooltip组件的Fullcalendar。它在悬停时工作正常，但我希望在单击事件时打开工具提示。如react-tooltip文档所示，我可以添加按钮并在单击按钮时显示(隐藏)工具提示，但不能对事件执行同样的操作。
浏览 22提问于2020-02-05得票数 0
对于我的日历，我尝试使用timeGridWeek和timeGridDay视图。而不是像这样正确加载：
它是这样加载的：
我的日历默认视图是dayGridMonth，它工作得很好。当我单击将视图更改为周或天的按钮时，它不能正确呈现，也不允许我通过单击按钮进一步更改视图(本质上，我停留在我选择的视图中)。
下面是我的日历元素+导入的代码：
import timeGridPlugin from "@fullcalendar/timegrid";
import FullCalendar from "@fullcalendar/react";
import d
浏览 31提问于2020-06-02得票数 0
回答已采纳
1回答
我在完整的日历文档中找不到如何设置React组件()的语言环境。
这就是我使用组件的方式：
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
export default function Calendar(props){
return (
<Box>
<FullCa
浏览 2提问于2021-09-03得票数 1
尝试为reactjs创建完整的日历组件，并将其填充为从火药库数据库检索的事件(在更改月份时检索事件)。但是无论我做什么，我都会收到关于dateProfileGenerator的错误，所以下面的代码就是我使用的代码--我删除了从数据库中检索的部分，但仍然无法工作。
import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interaction
浏览 2提问于2021-06-04得票数 1
我在FullCalendar ()页面的正下方添加了一个datePicker ()。
如何将此日期选择器附加到fullcallendar标题上的自定义按钮，当按下该按钮时，日期选择器将显示出来？
谢谢
更新:添加代码
编辑:代码已更新
到目前为止，我编写的代码是: JS：
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
浏览 1提问于2016-06-28得票数 5
React本地环境没有报错，后端部署到环境测试后就报错
图片
项目中只是用了 fullcalendar这个日历插件后就有这个错
import React, { useEffect, useState } from "react";
import FullCalendar from "@fullcalendar/react";
import locale from "@fullcalendar/core/locales/zh-cn"; // 中文
import dayGridPlugin from "@fullcalendar/dayg
浏览 168提问于2022-11-28
我正在使用FullCalendar进行反应，我正在与状态作斗争...它返回以下消息：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我删除了代码中所有不必要的部分。
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin
浏览 0提问于2021-03-21得票数 0
我使用的是HTML5.8，我想在每一行之前添加自定义FullCalendar。我当前的代码是：
import React from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react'
import bootstrapPlugin from '@fullcalendar/bootstrap';
import dayGridPlugin from '@fullcalendar/daygrid';
浏览 4提问于2021-07-14得票数 1
我正在使用React 和Fullcalendar一起工作。我想一个人不需要知道完整的日历来回答这个问题，。这是一个反应理解的问题。
长话短说，Fullcalendar有一个api，可以从给定的source中重取任何events。在我的例子中，我的source是state.events，由useState生成。当我的refetch发生变化时，我只想使用state。目前为止一切都很好。但是，在第一次初始呈现时，Fullcalendar无法获取任何内容。
const OverviewPage: React.FunctionComponent<IOverviewPageProps> = (
浏览 8提问于2022-05-04得票数 2
回答已采纳
import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourceTimelinePlug
浏览 13提问于2021-01-15得票数 0
在事件属性更改后，我正在努力更新包含在React中的jQuery完整日历。
下面是包含数据和日历的类：
export default class Calendar extends Component {
constructor(props) {
super(props);
this.addEvent = this.addEvent.bind(this);
this.state = {
events: [
{
title: 'Sometitle',
date: moment(Date.
浏览 20提问于2017-02-01得票数 0
我使用FullCalendar在React和需要一个模式弹出时，一个按钮被点击。
我正在经历的问题是，日历的某些元素不会在覆盖层后面褪色，而是完全不透明，在模式的前面。
具体来说，在dayGridMonth视图中，元素是组成日历的内部网格、每个单元格中的日期号、事件和当前的突出显示(即所有)。但是，工具栏标题、日期文本和外部边框都按需要隐藏。
在listDay或listWeek视图中，只有工具栏中的活动按钮行为不当。
我尝试过实现一个简单的JS模式，也使用了react-modal。这两个方面都存在这一问题。
import { useState } from "react";
i
浏览 1提问于2021-08-17得票数 0
回答已采纳
需要使用js将我的fullCalendar事件传输到用户的google日历。
我已经做了RND，我如何能够做到这一点，但无法得到答案。
import React from 'react';
import { FullCalendar } from './lib/FullCalendar';
import { Session } from 'meteor/session';
export default function() {
return (
<div className="content"
浏览 0提问于2019-01-17得票数 0
回答已采纳
2回答
我已经创建了一个反应项目使用cra和使用反应-引导。我已经将FullCalendar集成到我的应用程序中了。
问题是我想要向我的FullCalendar头中添加一个select输入。在我阅读了文档之后，他们刚刚向我们展示了如何向标题中添加自定义按钮。我不知道如何将select输入添加到标题中。
正如您在中看到的，现在select输入位于日历标头的上方。我希望它在日期标题和今天控制按钮之间引入标题。
浏览 13提问于2022-03-12得票数 1
我的目标是为prev/next功能构建完全自定义的按钮，不只是使用图标字符串，比如字体中的图标字符串，而是使用自定义内部的“元素”，它基本上是一个独立的组件。我知道customButtons对象是在中指定的，但这并不能达到添加完全自定义按钮的目的，因为该按钮仍然是一个带有自身背景和内容的"FullCalendar“样式按钮，加上customButtons方法需要传递字符串，而我的自定义按钮将是一个元素。我试图实现的目标如下(我正在使用版本5以防止它有所帮助)：
const myCustomPrevBtn = {
return <CustomButton onClick={()
浏览 6提问于2022-08-22得票数 1
如果代码中的行被注释掉，下面的代码就可以正常工作，但是如果我取消注释代码中的行，我会得到下面图像中显示的错误。我在网上找不到任何与这个问题相关的类似例子。 import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
// import
浏览 35提问于2020-06-25得票数 0
我很难让与ReactJ一起正常工作。日历会显示出来，但它看起来不正确，将参数传递给$("#calendar").fullCalendar()不会做任何事情，从下面的图像中可以看到。(第6-8天应突出绿色)
因此，我从开始，它直接为我启动了所有所需的依赖关系，比如Babel等等。
然后制作了两个非常简单的反应性类，如下所示：
import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import 'mom
浏览 3提问于2017-01-17得票数 1
回答已采纳
3回答
Fullcalendar小部件非常棒。我正在使用它在一个推特启动项目，它看起来几乎完美的盒子。
不过，有一件事很突出，那就是按钮的，比如前进、后退和今天。是否有一种方法可以更改如何输出按钮代码，从而使其符合Bootstrap的button？例如：
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn"
浏览 10提问于2012-07-01得票数 25
回答已采纳
嘿我试图通过一个模式表单添加事件，但是当我提交它时，出现了以下错误：
我正在使用fullCalendar在react和im中对菜谱进行调度，我使用了开发人员给出的代码，它使用命令'prompt‘请求标题，然后它创建了事件，所以我尝试添加了一个表单，我被这个错误困住了：
react-dom.development.js:475 Uncaught TypeError: Cannot read property 'view' of undefined
at Fullcalendar.formHandler (Fullcalendar.jsx:47)
at onSubmit (
浏览 5提问于2020-07-10得票数 1
我的fullCalendar中有两种类型的事件。其中一些是使用以下命令从eventSources中获取的：
$('calendar').fullCalendar('addEventSource' , 'source')
并且很少是由用户创建的。我正在使用
$('calendar').fullCalendar('renderEvent', eventData, true)
现在，在单击一个按钮时，我希望删除从eventSources获得的所有事件，并保留用户创建的事件。
我试着这样做：
$
浏览 2提问于2015-06-01得票数 4
回答已采纳
我使用的是FullCalendar 3.8.2，由FullCalendar LLC编写，实例化如下所示：
$("#calendar-schedules").fullCalendar({
'themeSystem' :'bootstrap3',
'height' :426
});
我试图删除当前日期的突出显示(不是“今日”按钮)
我尝试将'now‘参数添加到false，但随后我得到了moment.js saying的错误
反对警告:建筑回到j
浏览 0提问于2018-04-18得票数 7
1回答
我正在尝试更改我的完整日历日期格式上午，下午到24小时。我阅读了官方文档，发现titleFormat={hour12:false}是24小时格式的解决方案。但我试着这样做不起作用。也许面对这样的问题的人可以提供帮助。 这是我的reactJs组件代码 import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from &#
浏览 54提问于2021-07-01得票数 0
回答已采纳
1回答
我试图在我的React项目中使用FullCalendar.io。
我使用npm install fullcalendar安装了它。
我在我的目录中看到了node_modules/fullcalendar。
在我的项目中，我使用：
var Scheduler = require('fullcalendar');
然后我有：
var Calendar = React.createClass({
componentDidMount: function () {
$('#calendar').fullCalendar();
},
浏览 2提问于2016-01-14得票数 0
回答已采纳
在Rails 4.1.4中，我使用gem 'fullcalendar_engine‘来处理日历事件。通过引用
$('.calendar').fullCalendar(full_calendar_options);如果我使用这一行，我可以在日历上创建一个事件，但不能更改UI(添加自定义选项)。
如果我使用下面的代码(自定义选项)，Calendar主题将得到更改，但无法创建事件(同时单击任何单元格)，并且已经创建的事件也不会显示。
var options = {
theme: true,
header: {
left: 'prev,next toda
浏览 2提问于2014-10-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
