我是FullCalendar的新手。我正在使用React,我想渲染listDay
和listWeek
,但它们在Web上的日历视图中显示为“列表”。
import React, { useState } from "react";
import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
export default function Calendar() {
return (
<div>
<FullCalendar
editable
selectable
events={events}
headerToolbar={{
start: "today prev next",
center: "title",
end: "dayGridMonth timeGridWeek timeGridDay listWeek listDay",
}}
plugins={[listPlugin, daygridPlugin, timeGridPlugin, interactionPlugin]}
views={[
"dayGridMonth",
"timeGridWeek",
"timeGridDay",
"listDay",
"listWeek",
]}
validRange={[
{
start: "2023-05-11",
end: "2023-06-11",
},
]}
/>
</div>
);
}
我尝试了以下方法:
views={[
"dayGridMonth",
"timeGridWeek",
"timeGridDay",
"listDay",
"listWeek",
]}
buttonText={[
{
listWeek: "List Week",
listDay: "List Day",
},
]}
开头是:
var calendar = new Calendar(calendarEl, {})
但似乎calendarEl
并不适合React。
有没有一个React替代calendarEl
,因为它在文档中被引用了很多?
2条答案
按热度按时间e4eetjau1#
你是对的,buttonText可以用来实现你想要的。
在常规JS中,这将被写为:
我不是一个React用户,但从in the documentation和其他地方的例子中推断,由于
buttonText
数据是一个对象而不是数组,我认为你需要使用的语法应该如下所示:演示
buttonText
的运行(使用vanilla JS,因为我不是React用户):https://codepen.io/ADyson82/pen/XWxqOdvP.S.在fullCalendar文档中没有
views
选项,所以我不确定在代码中使用它的想法来自哪里,或者你认为它是什么。附言:你还问
有CalendarEl的React替代方法吗
不需要,因为
calendarEl
是一个本地DOM对象,您可以将其传递到日历中,因此它知道在页面上的何处呈现日历。而在React中,根据我的理解,你声明了<FullCalendar
组件,并在页面中的合适位置使用它,而不需要直接引用原生DOM。然而,如果你想得到一个等价的
calendar
变量,这是在guidance for the Fullcalendar React component中记录的-阅读标题为“日历API”的部分,以了解如何检索一个对象,然后让你访问所有的fullCalendar的功能。但是,对于您问题中的任务,您应该不需要它。ekqde3dh2#
第一次从FullCalendar repo运行示例项目时,我遇到了类似的问题(但不完全相同
这是我尝试的代码:
下面是结果。
listWeek
和listDay
按钮均显示为无标签/文本。原来,这是因为我没有在我的项目上安装
@fullcalendar/list
.在他们的自述文件中,他们没有指示安装list
包。然后,我使用命令npm i @fullcalendar/list
手动安装了它之后,按钮标签/文本出现。
如果不使用
buttonText
prop ,按钮标签将只是“列表”,就像您发布的屏幕截图一样。