问题标签 [fullcalendar-4]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
757 浏览

fullcalendar - 如何在 fullCalendar 中使用 snapDuration?

我试图要求可选择的事件在 fullCalendar 中具有固定的持续时间(例如,您可以每隔两小时预订一辆皮卡车),并且可以每半小时开始一次选择(例如,您可以从 10:00 开始预订-12:00 或 10:30-12:30)。我正在尝试将 snapDuration 用于前者,将 slotDuration 用于后者。

我尝试为日历对象设置 slotDuration 和 snapDuration 属性,但是每当我选择日历上的单元格时,它都会使用 slotDuration。我还寻找了已经可以使用的示例,但所有可用的示例都适用于旧版本的 fullCalendar。

我将 main.min.js 文件用于以下代码的核心、交互、daygrid 和 timegrid。我还在https://codepen.io/anon/pen/gJXXpw设置了一个 codepen

在选择时间间隔以将事件添加到日历时,我希望它“捕捉”到 snapDuration 值(例如,2 小时),但它仅受 slotDuration (例如,30 分钟)的限制。我可以添加一些额外的 javascript 来获得我需要的约束,但如果可能的话,我更愿意用 fullcalendar 本地处理这个。

0 投票
1 回答
722 浏览

javascript - Symfony - Fullcalendar 事件描述未定义

我有一个控制器,它从数据库中获取数据并将其转换为完整日历的事件,当我在其中一个事件中显示模式单击时,它显示描述和电子邮件未定义。

模态未定义字段的图像

但在 XHR 中,我可以看到我从控制器接收所有数据。

XHR GET 的图像

模态:


Javascript:


控制器:

0 投票
2 回答
4019 浏览

javascript - 如何在事件点击时填充模式?

目前使用 ReactJS 设置 FullCalendar。我可以填充我的日历和事件,但eventClick={}. 如何使用eventClick={}和检索事件信息来填充模式?

当点击事件时,我设法让模态出现,但我似乎无法通过 <这是我得到的最接近的数据。我想也许会增加一个模式触发的功能,但我不知道如何让它显示。

当前代码

因此,在这里,当我单击事件/关闭按钮时,模态会出现和消失,但是我无法通过单击的事件传递数据。我希望有人能提供帮助。我似乎无法做到这一点。

0 投票
1 回答
2696 浏览

javascript - fullcalendar - 在 dayGridWeek 中显示时间

我使用 fullcalendar 来显示事件,但我有问题。如何在dayGridWeek的左侧显示时间?

代码js:

提前致谢

我有这个结果:

但如何得到这个结果:

0 投票
0 回答
214 浏览

jquery - 如何使用 @fullcalendar/react 库在 React 15(15.4.1) 上实现 React Fullcalender?

我发布了一个关于 fullcalendar 与我的 webpack 有问题的问题。[如何在我的 React 项目中导入 FullCalendar? 经过长时间的检查,我发现@fullcalendar/react 不适用于构建我的项目的 React 15.4.1。我为反应 15 和反应 16 创建了一个样板代码。相同的代码适用于 16 但是它不适用于 15。当我尝试升级我的项目时,它会引发多个错误。如何在没有 jquery 的情况下在我的 react 15.4.1 项目中实现 Fullcalender(正在工作)?或者有什么方法可以在不破坏代码的情况下升级我的项目以响应 16?我确实使用npm i -g npm-check-updates ncu -u npm install命令升级了代码,该命令将我的 package.json 文件中的所有包更新到最新版本。我想将我的包更新到与我的代码兼容的最新版本。

npm i -g npm-check-updates ncu -u npm install

0 投票
0 回答
728 浏览

angularjs - 使用 angularjs 在 Fullcalnedar 中未正确突出显示事件

我将 fullcalendar 与 angularjs 一起使用,当我按如下方式传递事件时,它无法正确显示在日历中

因此,当日历同时显示这两个事件时,带有test1 的事件标题不会同时突出显示第 5 天和第 6 天。它只突出显示第 5 天。但如果我将开始时间添加为 00:30,那么它会正确突出显示这两天。我该如何克服这个问题?

0 投票
2 回答
1234 浏览

fullcalendar - FullCalendar v4 导航按钮点击处理程序

如何将处理程序附加到 FullCalendar v4 中的导航按钮?官方文档中没有指定任何内容。

在此处输入图像描述

0 投票
0 回答
894 浏览

javascript - 更改 FullCalendar 事件的 backgroundColor (v4)

我正在尝试在 FullCalendar v4 中实现“选定事件”行为,但没有运气。我想要的行为是:

  • 单击事件时,它的颜色会发生变化,并且该事件成为选定事件
  • 当点击另一个事件时,前一个选中的事件变为默认颜色,新点击的事件变为选中的事件并改变颜色
  • 在事件外部单击时,所选事件变为空,所有可见事件都获得默认颜色。

第一个问题是更改单击事件的背景颜色,但我没有成功。

FullCalendar v4 文档对背景颜色有点模棱两可。我尝试了以下方法(反应示例):

在我放置的设置中

第一种方法使用 setProp 方法,如此处所述

这虽然行不​​通

第二种方法使用这里描述的元素样式

这也不起作用

我究竟做错了什么?

0 投票
0 回答
45 浏览

javascript - 试图避免在ajaxcall之后滚动条返回开始

我正在使用 FullCalendar,但是当我使用 Ajax 更新作为格式条件的事件的状态时,当我横向滚动调用 ajax 时,滚动条重置为开始,防止查看者站在他想要可视化的位置.

我尝试为包含 Calendar 类的 div 设置固定宽度,没有结果可能我没有设置正确

successAjax() 的代码

enter code here函数successAjax(文档,日历){

其余的是改变事件颜色并在特定小时内重新定位多余事件的逻辑

0 投票
1 回答
3813 浏览

javascript - fullcalendar 4,日历完全渲染时回调

Fullcalendar 版本 3 曾经有一个回调函数,该函数会在所有事件呈现后触发。我会用这个:

load_call_list 是我创建的一个函数,用于根据某些事件的状态对其进行计数。它还查询我的数据库以获取其他信息。

使用 fullcalendar 4,一旦日历完全加载并且所有事件都已呈现,我想调用该函数。这是我的日历现在的初始化方式...

我想我对 javascript 缺乏了解限制了我了解当日历事件全部加载完毕时我可以捕捉到的地方。

我考虑过使用 eventrender,但我不希望每次都触发 load_call_list,因为我的数据库也使用该函数进行查询。

我尝试使用 jquery $(document).ready(function(){}) 但在事件呈现之前触发。

关于如何做到这一点的任何建议?