以引导模式获取新的完整日历事件

我正在使用引导模式来显示事件详细信息。单击事件时,弹出窗口中将显示开始、结束和标题。

事件是使用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">&times;</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 ,你可以看到,结束日期是“01-01-1970”,因为 eventClick() 没有得到结束日期。

更新 只有当你给出相同的开始和结束日期时才会发生。