标签: fullcalendar-5

我一直在尝试更改全日历周/时间网格视图上的日期列标题中显示的日期格式：

我将 V5 与 moment.js 结合使用。

搜索文档，我最终来到这里：https ://fullcalendar.io/docs/v5/day-header-render-hooks

这是我在初始化日历时尝试过的代码：

dayHeaderFormat: function(date){
    return moment(date.weekday).format('ddd');
}

这会导致每个标题显示今天（星期四），而不是正确的日期。

我的下一个问题是，我不确定如何相应地格式化日期的其余部分 - 这针对日期对象的“工作日”元素，但我无法弄清楚如何一次性格式化整个日期（如果这是可能的）。例如，我希望简单地显示“Thu 14th”。

任何帮助或建议表示赞赏！

我正在使用 NextJS 和 Fullcalendar。

我尝试fullcalendar在这个例子中使用动态导入（有关更多信息，这个示例解决方案来自这里）。

它奏效了，但有一个问题。几乎每 5 次刷新尝试中就有 1 次以错误告终Please import the top-level fullcalendar lib before attempting to import a plugin（就像这样，但在我的情况下版本是正确的）

之后，我发现 next/dynamic 的模块选项已被弃用。我认为这是我的问题的根源（我不确定 100%，但至少它已被弃用并需要更新）。

正如文档所说，处理动态导入的新方法是这样的：

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

但是因为我们需要多次导入，所以我找到了这个解决方案。

目前，似乎一切正常，但我的代码无效。

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

import "@fullcalendar/common/main.css"; // @fullcalendar/react imports @fullcalendar/common
import "@fullcalendar/daygrid/main.css"; // @fullcalendar/timegrid imports @fullcalendar/daygrid
import "@fullcalendar/timegrid/main.css"; // @fullcalendar/timegrid is a …

每当视图渲染时如何捕获？

不仅在切换视图时，还在点击今天/上一页/下一页时？
我需要在每次渲染完成之后（或之前）清除一组唯一的事件标题。

因此，从 v4 开始，类似的内容eventAllRender已被删除。

目前，所有按钮都使用.click事件，这确实有效，但我希望有一些东西与实际渲染真正相关。

calendar.render();

$('.fc-button').click( () => {
  console.log("do something")
})

我想仅CTRL + Drag & Drop使用PURE JavaScript在 FullCalendar v5 中实现。

我对主题进行了研究，发现这是在 FC github 上作为新功能 UI 请求进行讨论的。很少有建议如何做到这一点，即使是可行的建议。

arshaw 发表于 2015 年 8 月 19 日

You can use eventDrop to create this feature. jsEvent has a ctrlKey
on which you can test. Copy the event, received as a parameter, in a new variable.
revertFunc to make go back, and then apply renderEvent with the new variable created.

chris-verclytte 发布于 2016 年 4 月 11 日 …

I'd like to Upgrade my existing FullCalendar (v3.9 -> v5.7) eventRender to eventDidMount for a Right Click Action.

I have a webpage (FullCalendar v3.9.0) which has a right click action using the following eventRender code:

eventRender: function (event, element, view) {
    element.bind('contextmenu', function (e) {
        e.preventDefault();

        var top = e.pageY;
        var left = e.pageX;

        // Display contextmenu and bind event for menu click events
        $("#contextMenu").show();
        $("#contextMenu").css({ position: 'absolute' });
        $("#contextMenu").offset({ left: left, top: top });
        $("#contextMenu").on("click", "li", { eventId: event.id …

我已经设法包含 bootstrap 5，没有任何问题，但是当我尝试包含 fullcalendar 时，我在浏览器控制台上收到此错误：

无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/css”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。(主.css:1)

所以看起来库已正确导入，但 css 未正确导入

我的刺激控制器：

import { Controller } from "@hotwired/stimulus"

import moment from "moment"


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

export default class extends Controller {

  static targets = [ "calendar" ]

  connect() {
    console.log(this.calendarTarget)
    let calendar = new Calendar(this.calendarTarget, {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today', …

我在项目中安装了 fullCalendar，但日历仅在调整屏幕大小时才会出现。

我在 home.module.ts 中添加了这段代码

import { FullCalendarModule } from '@fullcalendar/angular'; // the main connector. must go first
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin


FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);

@NgModule({
  imports: [
    ....
    FullCalendarModule, // for FullCalendar!
   ....


  ],

在 home.page.ts 中我添加了以下代码

import { Calendar } from '@fullcalendar/core'; // include this line
import { CalendarOptions  } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
export class HomePage { …

我最近将 FullCalendar 从 v4 升级到 v5。当我这样做时，我还将事件的数据从加载时从服务器拉取一次的静态 JSON 对象更改为基于客户端请求的开始和结束日期的动态源。当我这样做时，我失去了设置slotMinTime和 的能力slotMaxTime，因为每次数据提取的开始和结束时间可能不同。在发出事件数据请求后如何动态设置它？

旧的 v4 代码：

datesSet: function () {
     calendar.setOption("slotMaxTime", data.max);
     calendar.setOption("slotMinTime", data.min);
}

这意味着当我有 1/10 周的数据时，我可能有一个在上午 9 点开始的事件和一个在下午 3 点结束的事件。所以我预计我的一周范围是上午 9 点开始，晚上 9 点结束。如果客户随后请求 1/17 周的活动从上午 8 点开始并于下午 1 点结束，则周范围将更新为上午 8 点和下午 1 点。

将 Fullcalendar 与 Vue.js 结合使用，我从变量传递初始事件，但我需要在更新该变量后，事件也在日历中更新。该文档似乎很清楚：

但我已经尝试过，但没有任何反应，事件保留为第一次渲染。
我还查看了许多与此主题相关的答案，但其中大多数都应用于 JQuery，这不是我的情况。
我不知道如何以正确的方式应用它。
预先感谢您的关注...

我创建日历的代码：

<FullCalendar :options="calendarOptions" ref="fullCalendar"/>

data() {
    return {
      calendarOptions: {
        firstDay: new Date().getDay(),
        plugins: [timeGridPlugin, interactionPlugin],
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev,next'
        },
        initialView: 'timeGridWeek',
        slotMinTime: "09:00:00",
        slotMaxTime: "20:00:00",
        height: "1070px",
        expandRows: true ,
        dayHeaderFormat: { weekday: 'narrow', day: 'numeric' },
        events: displayEvents
      },
      ...

更新变量的函数：

getEvents() {
    this.displayEvents = [
        {
                id: 1,
                title: "TEST1",
                start: "2021-03-29 09:00:00",
                end: "2021-03-29 11:00:00",
                backgroundColor: "#FF5733"
        },
        { …

我正在使用 FullCalander v5 for React，测试资源时间线视图。我遇到“加载”功能的问题，目的是检查 Fullcalendar 状态，如果加载状态为 true，则显示 Spinner 类型组件（带有条件渲染）而不是时间轴，设置 Spinner 组件状态使用 useState 为 true。问题在于，从 render 方法内部的 Fullcalendar 组件启动 useState 会启动无限渲染循环。有什么想法可以打破流程吗？

 
 // Loading function in the container component of Fullcalendar an the useState method
 
 const [spinner, setSpinner] = useState(true);
 
 let loadingFunction = (isLoading) => {
   if (isLoading) {
     console.log("loading");
  
  setSpinner(true);
} else {
    console.log("idle");
     
setSpinner(false);
   }
 };


//  The conditional render

return (
    <>
      {spinner ? (
        <Spinner />
      ) : (
        <>
          
         <FullCalendar
         loading={loadingFunction}
         ref={calendarRef}        
         dateClick={handleEventCreate}         
         .....