使用模式将事件添加到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>

我尝试编辑代码，但每当我突出显示所需的时间时，似乎没有什么对我有用。Error

从图像中可以看出，我在2月23日的8点到18点突出显示，但在5号时显示为8.00吨到6.00吨，这当然是不正确的。任何帮助将不胜感激。

Answer 1

$.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提供了一种在字符串中输出你想要的所有内容的方法。