您好我一直在努力让这个模式将事件添加到fullcalendar-scheduler中，我似乎无法让它工作。这是我下面的代码你能找到任何问题吗？我使用了此JSFiddle中的示例商品，并尝试将其添加到我的项目中而没有任何运气。
//http://jsfiddle.net/mccannf/azmjv/16/
$(document).ready(function() { // document ready
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// initialize the calendar
var calendar = $('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: Date.now(),
selectable: true,
selectHelper: true,
editable: true,
aspectRatio: 1.8,
scrollTime: '07:00',
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
customButtons: {
promptResource: {
text: '+ employee',
click: function() {
var title = prompt('Employee name');
if (title) {
$('#calendar').fullCalendar(
'addResource', {
title: title
},
true // scroll to the new resource?
);
}
}
}
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
resourceAreaWidth: '15%',
resourceLabelText: 'Employees',
resourceOrder: 'title',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to remove ' + resource.title + ' from the roster?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [{
id: 'a',
title: 'Dustin Johnson',
eventColor: 'black'
},
{
id: 'b',
title: 'Justin Rose',
eventColor: 'black'
},
{
id: 'c',
title: 'Levent Arslan',
eventColor: 'black'
},
{
id: 'd',
title: 'Ram Arslan',
eventColor: 'black'
},
{
id: 'e',
title: 'Rory McIlroy',
eventColor: 'black'
},
{
id: 'f',
title: 'Sergio Garcia',
eventColor: 'black'
},
{
id: 'g',
title: 'Tiger Woods',
eventColor: 'black'
},
{
id: 'h',
title: 'VJ Singh',
eventColor: 'black'
}
],
events: [
// normal events...
{
id: '1',
resourceId: 'a',
start: '2018-02-22T09:00:00',
end: '2018-02-22T18:00:00'
},
{
id: '2',
resourceId: 'b',
start: '2018-02-22T09:00:00',
end: '2018-02-22T18:00:00'
},
{
id: '3',
resourceId: 'c',
start: '2018-02-22T12:00:00',
end: '2018-02-22T18:00:00'
},
{
id: '4',
resourceId: 'd',
start: '2018-02-22T10:00:00',
end: '2018-02-22T18:00:00'
},
{
id: '5',
resourceId: 'e',
start: '2018-02-22T18:00:00',
end: '2018-02-22T22:30:00'
},
{
id: '6',
resourceId: 'f',
start: '2018-02-22T10:00:00',
end: '2018-02-22T18:00:00'
},
{
id: '7',
resourceId: 'g',
start: '2018-02-22T17:00:00',
end: '2018-02-22T22:00:00'
},
{
id: '8',
resourceId: 'h',
start: '2018-02-22T18:00:00',
end: '2018-02-22T23:00:00'
}
],
drop: function(date, jsEvent, ui, resourceId) {
console.log('drop', date.format(), resourceId);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventReceive: function(event) { // called when a proper external event is dropped
console.log('eventReceive', event);
},
eventDrop: function(event) { // called when an event (already on the calendar) is moved
console.log('eventDrop', event);
},
select: function(start, end, allDay) {
endtime = $.fullCalendar.formatDate(end, 'h:mm tt');
starttime = $.fullCalendar.formatDate(start, 'ddd, MMM d, h:mm tt');
var mywhen = starttime + ' - ' + endtime;
$('#createEventModal #apptStartTime').val(start);
$('#createEventModal #apptEndTime').val(end);
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
}
});
$('#submitButton').on('click', function(e) {
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
function doSubmit() {
$("#createEventModal").modal('hide');
console.log($('#apptStartTime').val());
console.log($('#apptEndTime').val());
console.log($('#apptAllDay').val());
alert("form submitted");
$("#calendar").fullCalendar('renderEvent', {
title: $('#patientName').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
},
true);
}
});<div id="createEventModal" class="modal" tabindex="-1" role="dialog" labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="myModalLabel1">Create Appointment</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="createAppointmentForm" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputPatient">Patient:</label>
<div class="controls">
<input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Value 1","Value 2","Value 3"]">
<input type="hidden" id="apptStartTime" />
<input type="hidden" id="apptEndTime" />
<input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-success" id="submitButton">Save</button>
</div>
</div>
</div>
</div>
我尝试编辑代码，但每当我突出显示所需的时间时，似乎没有什么对我有用。Error
从图像中可以看出，我在2月23日的8点到18点突出显示，但在5号时显示为8.00吨到6.00吨，这当然是不正确的。任何帮助将不胜感激。
答案 0 :(得分：0)
$.fullCalendar.formatDate以及随附的格式化字符串在fullCalendar 2.0发布时已弃用，您不应再期望它能正常工作（请参阅https://fullcalendar.io/docs1/utilities/formatDate/）。
主要原因是fullJalendar 2.0及以上版本使用了momentJS，并且已经可以完成此方法提供的大部分内容。获得所需的＆＃34; am / pm＆＃34;输出，并显示当月的正确日期，您现在可以简单地写
endtime = end.format('ddd, MMM D, h:mm a');
starttime = start.format('ddd, MMM D, h:mm a');
有关正常工作的演示，请参阅http://jsfiddle.net/sbxpv25p/267/。
有关momentJS支持的格式字符串的完整列表，请参阅http://momentjs.com/docs/#/displaying/format/。
P.S。 fullCalendar用于扩展momentJS的format()方法的自定义格式字符串，以及在较新版本的fullCalendar中使用的自定义格式字符串在此处记录：https://fullcalendar.io/docs/utilities/date_formatting_string/。但是在这种情况下你不需要它们，因为momentJS提供了一种在字符串中输出你想要的所有内容的方法。