我正在使用引导程序模式来显示事件详细信息。单击事件的开始，结束和标题将显示在弹出窗口中。
使用boostrap模态形式创建事件。
这是代码
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
$('#createBookingModal .modal-header .modal-title span').text(startDate);
$('#createBookingModal').modal('show');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback){
$.ajax({
url: '/api/bookings',
dataType: 'json',
data: {
start: start.unix(),
end: end.unix(),
},
success: function(response){
var events = [];
$(response).each(function(){
events.push({
title: $(this).attr('title'),
start: $(this).attr('start_time'),
end: $(this).attr('end_time'),
});
});
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
//Todo
//Get event end date here
console.log(event);
startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");
$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#submitButton').on('click', function(e){
e.preventDefault();
doSubmit();
});
function doSubmit(){
//validate end date here
endDate = new Date($('#bookingEndDate').val());
if (! moment(endDate, 'MM/DD/YYYY', true).isValid() ){
alert('Invalid Date');
} else {
eventData = {
title: $('#bookingName').val(),
start: new Date($('#createBookingModal .modal-header .modal-title span').text()),
end: endDate
};
$.ajax({
url: '/api/bookings/create',
data: {
title: eventData.title,
start_time: eventData.start,
end_time: eventData.end
},
success: function(response){
console.log(response);
// if ( response == 0 ){
// alert('Invalid Date');
// return false;
// } else {
// return true;
// }
}
});
$('#createBookingModal form').get(0).reset();
$("#createBookingModal").modal('hide');
$("#calendar").fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
}
}
});
HTML代码
<div class="card-body full-calendar">
<div id='calendar'></div>
<!-- Display Create Booking form in modal -->
<div id="createBookingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add an Booking on: <span class="startDate"></span>></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<form>
<div class="form-group">
<label for="bookingName">Booking Title</label>
<input class="form-control" type="text" placeholder="Booking Name" id="bookingName">
</div>
<div class="form-group">
<label for="bookingEndDate">End Date</label>
<div class="input-group date" data-provide="datepicker">
<input type="text" id="bookingEndDate" class="form-control" placeholder="mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<!--<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Booking Description" id= "eventDescription"></textarea>
</div>-->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Display Booking in modal -->
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<p class="start">Start At: <span></span></p>
<p class="end">End At: <span></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>-->
</div>
</div>
</div>
</div>
尝试以模式方式显示事件时，我没有得到新创建事件的结束日期，您会注意到//todo，这是我要获得结束日期的位置。可能需要委派，但是我不知道应该怎么做？
我添加了一个小提琴here，您可以看到结束日期是“ 1970年1月1日”，因为eventClick()尚未获得结束日期。
更新 只有在您指定相同的开始日期和结束日期时，它才会发生。
答案 0 :(得分：1)
我仅通过一个较小的解决方法进行了修复，如果有人有更好的解决方案，请随时发布。
eventClick: function(event, jsEvent, view) {
if ( event.end == null ){
event.end = event.start;
}
startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");
$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
},
* @ ADyson在此解决方案上做出了巨大贡献，我希望在我们讨论之后将其发布为答案，他没有发布，所以我将其发布。
答案 1 :(得分：0)
我有一个类似的问题（大约2年前！），必须使用submitHandler：function（）{}，如下所示
1) <T>obj
2) obj as T
还创建了DataSetup函数-
submitHandler: function (form) {
var dataRow = CreateDataSetup();
$.ajax({
type: 'POST',
url: "/BookingTwo/SaveEvent",
data: dataRow,
success: function () {
$("#myform")[0].reset();
ClearPopupFormValues();
$('#popupEventForm').modal('hide');
},
statusCode: {
201: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Success Event Created.", "success", 4000)
},
500: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Internal Server Error - Logged with System Admins", "danger", 4000)
$('#popupEventForm').modal('hide');
},
400: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Duration Service Returned 0 - Event NOT Created.", "danger", 4000)
$('#popupEventForm').modal('hide');
},
401: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - You do not have permission to delete this.", "danger", 4000)
$('#popupEventForm').modal('hide');
},
403: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - Can't delete approved events.", "danger", 4000)
},
409: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("There is already an event for the user for this date.", "danger", 4000)
}
}
});
}