javascript FullCalendar列表视图是日历视图中的列表

xa9qqrwz 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(136)

我是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，因为它在文档中被引用了很多？

JavaScript

来源：https://stackoverflow.com/questions/76227442/fullcalendar-listview-is-list-in-calendar-view

2条答案

按热度按时间

e4eetjau1#

你是对的，buttonText可以用来实现你想要的。
在常规JS中，这将被写为：

buttonText: {
  "listWeek": "List Week",
  "listDay": "List Day"
}

我不是一个React用户，但从in the documentation和其他地方的例子中推断，由于buttonText数据是一个对象而不是数组，我认为你需要使用的语法应该如下所示：

buttonText={{
  "listWeek": "List Week",
  "listDay": "List Day"
}}

演示buttonText的运行（使用vanilla JS，因为我不是React用户）：https://codepen.io/ADyson82/pen/XWxqOdv
P.S.在fullCalendar文档中没有views选项，所以我不确定在代码中使用它的想法来自哪里，或者你认为它是什么。
附言：你还问
有CalendarEl的React替代方法吗
不需要，因为calendarEl是一个本地DOM对象，您可以将其传递到日历中，因此它知道在页面上的何处呈现日历。而在React中，根据我的理解，你声明了<FullCalendar组件，并在页面中的合适位置使用它，而不需要直接引用原生DOM。
然而，如果你想得到一个等价的calendar变量，这是在guidance for the Fullcalendar React component中记录的-阅读标题为“日历API”的部分，以了解如何检索一个对象，然后让你访问所有的fullCalendar的功能。但是，对于您问题中的任务，您应该不需要它。

赞(0）回复(0）举报 2023-05-12

ekqde3dh2#

第一次从FullCalendar repo运行示例项目时，我遇到了类似的问题（但不完全相同
这是我尝试的代码：

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";

  return (
    <FullCalendar
      editable
      selectable
      headerToolbar={{
        start: "today prev next",
        center: "title",
        end: "dayGridMonth timeGridWeek timeGridDay listWeek listDay",
      }}
      events="https://fullcalendar.io/api/demo-feeds/events.json"
      plugins={[
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
        listPlugin,
      ]}
      buttonText= {{
        listWeek: 'List Week',
        listDay: 'List Day'
      }}
    />
  )

下面是结果。listWeek和listDay按钮均显示为无标签/文本。