FullCalendar 重复事件创建重复项

2024-05-26

我正在为我的新网站实现一个日历,我从后端应用程序检索事件并使用 fullcalendar 在模式中显示结果。 我还使用 fullcalendar 的重复功能(https://fullcalendar.io/docs/recurring-events https://fullcalendar.io/docs/recurring-events)以方便使用我的日历。

这里发生了一些奇怪的事情,当用户在周日创建一个重复事件时,它会以不同的日期创建两次,而在其他日子它就像魅力一样。

这是我的代码的简化版本:

<div>
  <div id='calendar'></div>
</div>

<div class="modal fade" id="add-event">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>New Event</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="Eventname">Event Name</label>
            <input type="text" class="form-control" id="event-name" placeholder="Enter event name">
          </div>
          <div class="form-group">
            <div class='input-group date' id='event-start' style="margin-top: 15px">
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <div class='input-group date' id='event-end' style="margin-top: 15px">
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
          <div class="checkbox">
            <label><input id="event-repeat"type="checkbox" value="" checked>Repeat Event ?</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="button-delete" type="button" class="btn btn-success btn-lg" onclick="AddEvent()">OK</button>
        <button type="button" class="btn btn-danger btn-lg dismiss" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div> 

和 JavaScript :

var configCalendar;

var calendarEl = document.getElementById('calendar');
configCalendar = new FullCalendar.Calendar(calendarEl, {
  editable:true,
  height: 'parent',
  contentHeight:'100%',
  handleWindwoResize:true,
  plugins: ['interaction','dayGrid','timeGrid', 'list'],
  defaultView: 'timeGridWeek',
  minTime: '00:00:00',
  slotDuration: '02:00:00',
  scrollTime : '08:00:00',
  firstDay: 1,
  columnHeaderFormat:{
    weekday:'long',
    day:'numeric',
    month:'long'
  },
  eventClick : function(info){
    $("#startTime").html(CalendarDate2String(info.event.start));
    $("#endTime").html(CalendarDate2String(info.event.end));
    $("#name").val(info.event.title);
    $("#id").text(info.event.id);
    $("#eventInfo").html(info.event.description);
    $("#eventLink").attr('href', info.event.url);
    $("#eventContent").modal('show');
  },
  eventDrop: function (info) {
    console.log("event drop");
    if (!copyKey) return;
    var length = configCalendar.getEvents.length;
    var eClone = {
      title: info.oldEvent.title,
      start: info.oldEvent.start,
      end: info.oldEvent.end,
      id: length + 1
    };
    configCalendar.addEvent(eClone);
    var newEvent = configCalendar.getEventById(info.event.id);
    var title = prompt("Enter a title for the new Event : ");
    newEvent.setProp('title', title);
  },
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit'
  },
  eventOverlap:false,
  selectOverlap:false,
  header: {
    left:   '',
    center: 'title',
    right:  'today prev,next'
  },
  selectable: true,
  select:function (info) {
    var event  = {
            id: configCalendar.getEvents().length + 1,
            daysOfWeek: [info.start.getDay()],
            startTime: moment(info.start).format('HH:mm'),
            endTime: moment(info.end).format('HH:mm')
        };
        configCalendar.addEvent(event);
    console.log(event);
    console.log(configCalendar.getEvents());
  }
});
configCalendar.render();

我做了一个 JSfiddle :https://jsfiddle.net/Marech/0fdr5vq3/37/ https://jsfiddle.net/Marech/0fdr5vq3/37/请在任何一天(星期日除外)通过在日历上进行选择来创建活动,然后检查控制台以查看创建的活动。然后周日创建一个事件,再次查看,该事件创建了两次。

您知道如何解决这个问题吗?我是否以正确的方式使用 fullcalendar API ???


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

FullCalendar 重复事件创建重复项 的相关文章

  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 使用 Jquery 清除 5 个空 TD

    我有一个正在填充的动态表 我知道我不应该这样做 但是你会如何连续找到 5 个空 TD 并隐藏它们呢 因此 如果行包含 5 个空 TD 则不显示 TD 我想删除每个实例 td td td td td td td td td td 在 DOM
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述

随机推荐

  • 影响 UINavigationBar 的后退按钮方法 (iOS)

    我有一个推送到详细视图控制器的表视图 从详细视图控制器中 当我按下 后退 按钮时 我希望更改一个整数值 如何以编程方式编辑导航栏后退按钮的操作 后退按钮会自动放置在我的应用程序中 因为我使用的是表视图 所以我实际上没有创建按钮 所以我不知道
  • RowSpan 在 iTextSharp 中不起作用?

    我正在尝试将 Html 转换为 PDF 我正在使用 iTextSharp 我发现iTextSharp对CSS的支持不太好 事实上我认为 HtmlWorker 线程并不支持这一切 让我的问题更加复杂的是 iTextSharp 似乎也不支持 R
  • 只保留矩阵中某些列具有相同元素的行

    让我举个例子 假设我们有 3 个表 重点关注 N 列 Table 1 Table 2 Table 3 N Values N Values N Values 5 1 5 1 5 1 10 2 6 2 6 21 15 3 10 3 10 5 1
  • EF4 中的 Datetime2 转换

    好吧 在花了无尽的时间谷歌搜索答案之后 我必须在这个问题上添加另一个问题 我有一个包含 2 个日期时间字段的表 由 VS 2010 中的 EF4 EDMX 设计器生成 SQL 2008 中生成的字段是 datetime 而不是 dateti
  • 使用 pyinstaller 将 Django 移植到桌面应用程序

    我正在尝试将 django 项目转换为桌面应用程序 我已经下载了 pyinstaller 的开发人员版本 github pyinstaller pyinstaller hookutils py 修改如下 http www pyinstall
  • Java 中具有级别顺序插入的完整二叉搜索树

    我们接到一个任务 需要编码 二叉搜索树 那个树has to be complete not perfect 这意味着所有不在最低级别或次低级别的节点都应该有 2 个子节点 而最低级别的节点应尽可能远离左侧 我们需要插入到树中等级顺序 所以如
  • Spark 中的 RDD 和 Dataframe 有什么区别? [复制]

    这个问题在这里已经有答案了 嗨 我对 apache Spark 比较陌生 我想了解 RDD 数据帧和数据集之间的区别 例如 我正在从 s3 存储桶中提取数据 df spark read parquet s3 output unattribu
  • preg_match():编译失败:字符类中偏移量的范围无效

    预先感谢您花时间帮助解决此问题 preg match 编译失败 session php 第 278 行偏移量 20 处的字符类范围无效 经过几个月的工作 在我们的服务器上进行 PHP 升级后 它突然停止工作了 这是代码 else Spruc
  • 通过 VBA MS_Access 将 MS Access 表导出为 dBase 5

    如何通过 VBA 将单个表导出为 dBase 5 文件 目前我正在使用这个VBA代码 DoCmd TransferDatabase acExport dBase IV DB Total acTable DB Total C Data Fal
  • 使用 ruby​​ Net::SSH 通过 sudo 读取远程文件

    我必须读取我有权 sudo 读取的远程文件的内容 猫 少或尾巴 我将在 Ruby 中执行此操作 因此我认为应该使用 Net SSH 来执行此操作 该文件是一个日志文件 因此可能会很大 这是我现在正在尝试的代码 require rubygem
  • Alfresco 更新文件 - 错误帖子

    我正在尝试更新 Alfresco 中的文件 我编写了以下代码 var csrf header Alfresco util CSRFPolicy getHeader var csrf token Alfresco util CSRFPolic
  • 在 UIView 中的贝塞尔曲线路径内像草图颜色一样绘制/绘制

    我正在 UIView 上的 UIBezierPath 的帮助下绘制形状图层 CAShapeLayer pathLayer CAShapeLayer layer pathLayer frame CGRectMake view frame or
  • 为什么非交互式批处理脚本认为我按下了 Control-C?

    因此 当输出日志中突然出现以下内容时 我的批处理脚本运行得很好 21 27 13 99 c apps w7lab scripting gt some command Error 3221225786 CTerminate batch job
  • 在子网站中使用邮政和 Hangfire

    我一直在尝试在我的 MVC5 站点上使用 Postal 当我将我的网页托管为子网站时 即http localhost 子站点 http localhost Subsite我收到错误 虚拟路径 映射到另一个应用程序 这是不允许的 我已经将其调
  • 将字符串值赋给指针

    char tempMonth char month 4 month 0 j month 1 a month 2 n month 3 0 如何将月份分配给 tempMonth 谢谢 最后如何打印出来 thanks In C month mon
  • 如果该值未在语句中的其他任何地方使用,为什么要使用 ++i 而不是 i++?

    我很清楚在 C 中 int someValue i array i otherValue 相比之下有不同的效果 int someValue i array i otherValue 但每隔一段时间我就会看到 for 循环中带有前缀增量的语句
  • wglCreateContextAttribsARB 函数崩溃

    我尝试写下代码 我有InitializeOGL 的代码 bool Ogl InitializeOGL bool vSync cout lt lt Init OpenGL lt
  • 按时间范围聚合

    我有一个数据集 其中包含日期 yyyy mm dd 和时间 h m s 以及温度 float 作为单独的列 我想通过平均函数聚合每天的温度值 问题是 我不知道如何查询时间属性来表示例如聚合 h m 0 5 s and h m 5 10 s
  • 作为计划任务运行 C# 应用程序

    我有一个 C 应用程序 设计为与 Windows 窗体一起运行 但现在需要作为计划任务运行 我对此遇到了问题 我认为这是因为它需要 无头 因为它不应该有用户环境的概念 该程序已编写为无人值守运行 因为它有一个 AUTO 参数 然后该参数将从
  • FullCalendar 重复事件创建重复项

    我正在为我的新网站实现一个日历 我从后端应用程序检索事件并使用 fullcalendar 在模式中显示结果 我还使用 fullcalendar 的重复功能 https fullcalendar io docs recurring event