[英]fullcalendar event info in modal popup
我正在研究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>
您真的在這里打結。
1)根據文檔 event.start
和event.end
已經是Date對象。 確實沒有必要將它們解析為另一個Date或再次使它們成為MomentJS對象。 只需按原樣使用它們,然后使用fullCalendar提供的日期格式化功能根據需要對其進行格式化 。
2)事件對象(再次參見上面的文檔)沒有單獨的“ startTime”或“ endTime”屬性...整個日期和時間存儲在start
和end
。 我不確定您是否知道存在單獨的屬性? 在任何版本的fullCalendar中,從未如此。
3)您需要處理事件的end
屬性可能為null的情況,因此需要處理一些額外的邏輯,而只需使用開始日期/時間即可:
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();
},
演示: https : //codepen.io/anon/pen/eapjWN?editors = 1010
注意:如果您似乎正在使用fullCalendar v4,則eventClick的回調參數是錯誤的-再次參見相關文檔 -您的外觀類似於v3參數。 jsEvent
和view
不再分開提供,而是在info對象(現在是第一個參數)中提供。 談到這一點,調用第一個參數event
確實是一個錯誤的稱呼,因為它包含的內容不止於此。 您最終寫了event.event...
的事實event.event...
您遇到了命名問題。 最好命名得更有意義。 為了代碼質量,我上面的示例除了解決實際問題所需的更改之外,還進行了這些更改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.