Javascript 模式弹出窗口中的完整日历事件信息

我正在使用fullCalendar并尝试获取事件信息，以在弹出模式中显示（当单击事件时）

然而，我只能得到事件标题，地点，开始日期和结束日期显示

我还需要开始时间和结束时间显示。我做错了什么

我的代码如下：

eventClick:  function(event, jsEvent, view) {
    var startdate= new Date(event.event.start);
    var enddate= new Date(event.event.end);
    var starttime= new Date(event.event.startTime);
    var endtime= new Date(event.event.endTime);
    //console.log(event);
    $('#modalID').html(event.event.id);
    $('#modalTitle').html(event.event.title);
    $('#modalLocation').html(event.event.extendedProps.location);
    $('#modalStartDate').html(moment(startdate.getTime()).format("DD-MM-YYYY"));
    $('#modalStartTime').html(moment(starttime.getTime()).format("hh:mm A"));

    //moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")

    $('#modalEndDate').html(moment(enddate.getTime()).format("DD-MM-YYYY"));
    $('#modalEndTime').html(moment(endtime.getTime()).format("hh:mm A"));
    $('#fullCalModal').modal();
},

我的更新代码如下

 <script>

 document.addEventListener('DOMContentLoaded', function() {
 var calendarEl = document.getElementById('calendar');

 var calendar = new FullCalendar.Calendar(calendarEl, {

 plugins: [ 'interaction', 'dayGrid' ],
 defaultDate: '<cms:date format='Y-m-d' />',
 editable: true,
 eventLimit: true, // allow "more" link when too many events
 displayEventTime: false,

 events: [
 <cms:pages masterpage='events.php' show_future_entries='1'>
    {
 id: <cms:escape_json><cms:show k_page_id /></cms:escape_json>, 
 title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
 location: <cms:escape_json><cms:show location /></cms:escape_json>,
 start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
 startTime: <cms:escape_json><cms:show start_time /></cms:escape_json>,
 end: <cms:escape_json><cms:show end_date /></cms:escape_json>,
 endTime: <cms:escape_json><cms:show end_time /></cms:escape_json>
}<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
</cms:pages>
],
eventClick: function(info) {

var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" 
};
var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false 
};

var startdate = calendar.formatDate(info.event.start,  dateSettings);
var startTime = calendar.formatDate(info.event.start,  timeSettings);

var enddate = calendar.formatDate(info.event.end || startdate, 
dateSettings);
var endTime = calendar.formatDate(info.event.end, timeSettings);

$('#modalID').html(info.event.id);
$('#modalTitle').html(info.event.title);
$('#modalLocation').html(info.event.extendedProps.location);
$('#modalStartDate').html(startdate);
$('#modalStartTime').html(startTime);
$('#modalEndDate').html(enddate);
$('#modalEndTime').html(endTime);
$('#fullCalModal').modal();
},

eventTextColor: '#FFFFFF',

});

calendar.render();
});

</script>

document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
插件：['interaction'，'dayGrid']，
默认日期：“”，
是的，
eventLimit:true，//当事件太多时允许“更多”链接
displayEventTime:false，
活动：[
{
id:，
标题：，
地点：，
开始：，
开始时间：，
完:，
结束时间：
},
],
事件单击：函数（信息）{
var dateSettings={“年”：“数字”，“月”：“2位”，“日”：“2位”
};
var timeSettings={“hour”：“2位”，“minute”：“2位”，“hour12”：false
};
var startdate=calendar.formatDate（info.event.start，dateSettings）；
var startTime=calendar.formatDate（info.event.start，timeSettings）；
var enddate=calendar.formatDate（info.event.end | | startdate，
日期设置）；
var endTime=calendar.formatDate（info.event.end，timeSettings）；
$（'#modalID'）.html（info.event.id）；
$（'#modaltite'）.html（info.event.title）；
$（'#modalLocation'）.html（info.event.extendedProps.location）；
$（'modalStartDate'）.html（startdate）；
$（'modalStartTime'）.html（startTime）；
$（'#modalendate'）.html（enddate）；
$（'#modalEndTime'）.html（endTime）；
$（'fullCalModal'）.modal（）；
},
eventTextColor:“#FFFFFF”，
});
calendar.render（）；
});

你真的把自己绑在这里了

1） 根据

event.start

和

event.end

已经是日期对象。真的没有必要将它们解析为另一个日期或再次将它们转换为MomentJS对象。只需按原样使用它们，并根据需要使用提供的fullCalendar设置格式即可

2） 事件对象（再次参见上面的文档）没有单独的“开始时间”或“结束时间”属性…整个日期和时间存储在

start

和

end

中。我不知道你是从哪里得到独立财产的想法的？在任何版本的fullCalendar中都从未出现过这种情况

3） 您需要处理事件的

end

属性可能为空的情况，因此有一点额外的逻辑来处理它，只需使用开始日期/时间：

eventClick: function(info) {
  var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };

  var startdate = calendar.formatDate(info.event.start,  dateSettings);
  var starttime = calendar.formatDate(info.event.start,  timeSettings);

  var enddate; 
  var endtime; 
  if (info.event.end != null) {
    enddate = calendar.formatDate(info.event.end, timeSettings );
    endtime = calendar.formatDate(info.event.end, dateSettings );
  } 
  else {
    enddate = startdate;
    endtime = starttime;
  }

  $('#modalID').html(info.event.id);
  $('#modalTitle').html(info.event.title);
  $('#modalLocation').html(info.event.extendedProps.location);
  $('#modalStartDate').html(startdate);
  $('#modalStartTime').html(starttime);
  $('#modalEndDate').html(enddate);
  $('#modalEndTime').html(endtime);
  $('#fullCalModal').modal();
},

演示：

---

注意：如果您使用的是fullCalendar v4，那么eventClick的回调参数是错误的-再次查看相关的-您的参数与v3参数类似

jsEvent

和

view

不再单独提供，而是在info对象中提供，后者现在是第一个参数。说到这一点，调用第一个参数

event

实际上是用词不当，因为它包含的内容不止这些。您最后编写的

event.event…

告诉您有命名问题。最好给它起个更有意义的名字。为了提高代码质量，除了解决实际问题所需的更改之外，我上面的示例还进行了这些更改。

@IanHaney（下面从讨论转到评论）…如果您希望日期采用特定于区域性的格式，请设置日历的“区域设置”。这将控制日历中日期和其他区域性特定显示的格式。e、 g.这是我的代码笔，已更新为使用英国英语语言环境-这将生成dd/mm/yyyy格式的时间：。有关更多信息，请参阅。我不熟悉您的CMS功能，但要实现这一点，我想您需要编写类似于

start:，end:

的内容，以便将日期和时间合并为输出中的一个值。我认为您需要1）完全删除注释掉的行，和2）使您的CMS代码不会从日期打印“00:00:00”部分。我看到您固定了时间，但为什么您还要将日期格式更改为dd-mm-yyyy？fullCalendar无法理解这一点。阅读以了解可接受的输入格式。把它改回yyy-mm-dd（就像你以前使用的那样），它就可以工作了。我更新了我的代码笔以使用您网页上当前正在使用的事件数据，它工作正常，所有事件都可以单击：