如何在 fullcalendar 3.10 javascript 的 update/delete 对话框中将 30 分钟添加到开始日期

Question

在更新中 window 我想自动将 30 分钟添加到活动开始日期：

$('#updatedialog').dialog({
        autoOpen: false,
        width: 680,
        buttons: {
            "update": function () {

                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    color: $("#colorPicker").val(),
                    start: new Date($("#eventStart").val()),
                    end: new Date($("#eventEnd").val()),
                    //end: new Date($("#eventEnd").val(moment(event.start).add(30, "m").format("YYYY-MM-DD[T]HH:mm"))),
                    //end: new Date($("#eventEnd")).setMinutes($("#eventStart").val() +30),
                    note: $("#EditEventNote").val(),
                    /*start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm"),*/
                    
                   
                };
                
               
                PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                $(this).dialog("close");

                currentUpdateEvent.title = $("#eventName").val();
                currentUpdateEvent.description = $("#eventDesc").val();
                currentUpdateEvent.color = $("#colorPicker").val();
                currentUpdateEvent.note = $("#EditEventNote").val();
                currentUpdateEvent.start = new Date($("#eventStart").val());
                currentUpdateEvent.start.setMinutes(currentUpdateEvent.start.getMinutes() + 30);
                $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                $('#calendar').fullCalendar('refetchEvents');         

            },

但是这段代码不起作用。

Answer 1

首先，这主要是 momentJS 问题，而不是 fullCalendar 问题。

您需要克隆开始日期，将其变异 30 分钟，然后格式化输出。

N.B。 event.start 实际上并没有出现在您的代码中的任何地方，所以我假设您实际上想使用“eventStart”文本框中的值。我已经按照我们在中就此代码达成一致的方式重新设置日期格式。目前还不清楚您为什么停止这样做，因为您已经明确表示使用 new Date(...).

设置 start/end 日期是行不通的

因此您的代码将如下所示：

"update": function () {
  var start = moment($("#eventStart").val()); //parse the start date
  var end = moment(start); //clone the start date to make the end date
  end.add(30, "m"); //add 30 minutes to the end date

  //create the event object with formatted dates
  var eventToUpdate = {
    start: start.format("YYYY-MM-DD HH:mm"),
    end: end.format("YYYY-MM-DD HH:mm")
    //...etc
  };

  $("#eventEnd").val(end.format("YYYY-MM-DD[T]HH:mm")); //only include this line if you actually want to set the value of the eventEnd textbox.
  //...etc

最小演示：https://codepen.io/ADyson82/pen/PojKGXY

相关文档：

P.S。我想根据您在此处展示的内容以及我之前干预过的各种问题，对您的编程方法提出更一般的观点。

这次尝试：

//end: new Date($("#eventEnd").val(moment(event.start).add(30, "m").format("YYYY-MM-DD[T]HH:mm")))

包含一堆乱七八糟的代码，这些代码全部打包在一起，看起来像是一个巨大的猜测，或者可能是一种“把所有东西都扔进去直到有东西粘住”的方法。这些技术都不会让你成为一名优秀的程序员。编程是一门科学/工程学科，而不是一种艺术形式或命中注定的游戏。你需要有条不紊和精确。如果您最多只能说它“不起作用”，那么很明显您根本没有分析过它。要解决代码中的问题，您需要对其进行分析和调试。

所以你需要对这段代码做些什么，看看它为什么不起作用，把它全部拆开，正确阅读你在那里使用的许多功能中的每一个的文档，并计算出它们的输出以及这是否与您的情况相关 - and/or 每个人是否都对您包含在其中的内容提供了合适的输入。

测试 JavaScript / jQuery 代码时，您还应该检查浏览器的控制台（在开发人员工具中）是否有错误，并使用内置调试器单步执行代码行按行查看变量的值，并找出代码和值未按预期执行的位置。（如果您不知道您希望代码的特定部分做什么，那么您应该放弃该部分并写一些您可以理解的东西，或者去阅读文档并尝试使用该代码的示例，直到您理解它。否则您只是再次猜测，那是没有意义的。）

您可以单独测试代码的每个部分以验证您的理解。像上面的例子那样将大量的函数调用放在一行中使得调试变得非常困难——为了测试，你应该把它分成几行，看看每一行产生什么，然后再决定是否有利于下一步.例如，如果我们将该代码分解为单独的步骤，我们最终会得到：

var moment1 = moment(event.start);
moment1.add("30", "m");
var formattedDate = moment1.format("YYYY-MM-DD[T]HH:mm");
var x = $("eventEnd").val(formattedDate);
var dt = new Date(x);
var eventToUpdate = {
 //...
 end: dt
}

下面我们来一一梳理逻辑漏洞：

event.start 在您显示的上下文中似乎不存在（除非您省略了一些外部代码）。所以你可能一开始是空白的。正如我上面提到的，我猜你实际上是想使用 eventStart 文本框中的值。
如果 event.start 存在于此上下文中，那么看起来它可能来自 fullCalendar 和 fullCalendar v3（根据其文档) 已经为您提供了作为 momentJS 对象的日期 - 因此您不需要将它们重新包装在 moment() 构造函数中。虽然它没有害处，但它也很低效并且无缘无故地使您的代码混乱。
$("eventEnd").val() 将设置页面上某个字段的值。目前尚不清楚这是否是有意的，因为您声明的 objective 是将事件的开始日期增加 30 分钟（大概是为了形成一个准备发送到服务器的结束日期，尽管您的措辞可能被解释为您实际上想修改开始日期本身，而不是将其用作结束日期）。
.val() 没有 return 一个值（它只设置一个值).因此 x 将永远为空。
因为x是空的，new Date(x)不会做任何有用的事情。
无论如何你都不想要 new Date，因为你需要将预先格式化的日期作为字符串发送到你的服务器 - 我们已经在你的 [=29] 之一中讨论过这个=] 所以不清楚你为什么现在再次尝试这个 - 除了，正如我上面假设的那样 - 你仍然没有真正理解任何这些单独的代码片段并且仍然在没有正确测试它们的情况下随机猜测或者阅读有关他们所做的任何事情。我会坦率地说，除非你学会做这两件事，否则作为一名程序员，你将永远不会取得任何成就。一旦你开始做它们，你的任务就会突然开始变得容易得多。

如您所见，一旦我们将其一一分解，与将所有问题集中在一行中并且您无法分辨哪个部分在做什么相比，自行发现问题要容易得多。一旦你得到一些有用的东西，然后如果你认为它可以节省 space 或使代码更整洁，可以将它减少到更少的行。但是在您确定它会按照您的意愿行事之前不要这样做。

如何在 fullcalendar 3.10 javascript 的 update/delete 对话框中将 30 分钟添加到开始日期

How to add 30 minutes to startdate in update/delete dialog in fullcalendar 3.10 javascript

javascript

jquery

fullcalendar

momentjs

fullcalendar-3