使用模式將事件添加到Fullcalendar

Question

嗨，我一直在努力使該模式將事件添加到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">&times;</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="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]"> <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> 

我已經嘗試編輯代碼，但是只要我強調顯示的期望時間，對我來說似乎都無濟於事。 錯誤

從圖像中可以看到，我在2月23日突出顯示了8.00至18.00，但在5日顯示為8.00 tt至6​​.00 tt，這當然是不正確的。 任何幫助將不勝感激。

Answer 1

在發布fullCalendar 2.0時，不贊成使用$.fullCalendar.formatDate及其$.fullCalendar.formatDate的格式字符串，並且您不應再期望它可以正常工作（請參閱https://fullcalendar.io/docs1/utilities/formatDate/ ）。

這樣做的主要原因是，moveJS已由fullCalendar 2.0及更高版本使用，並且已經可以滿足此方法提供的大部分功能。 要獲得所需的“ am / pm”輸出並顯示正確的月份，您現在可以簡單地編寫

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/ 。

PS此處記錄了fullCalendar用於擴展momentJS的format()方法的自定義格式字符串，並且該格式字符串可在fullCalendar的較新版本中使用，請參見此處： https ://fullcalendar.io/docs/utilities/date_formatting_string/。 但是，在這種情況下，您不需要它們，因為momentJS提供了一種已經在字符串中輸出所需內容的方法。