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

时间:2018-08-24 07:46:16

标签: javascript jquery fullcalendar bootstrap-modal

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

使用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,您可以看到结束日期是“ 1970年1月1日”,因为eventClick()尚未获得结束日期。

更新 只有在您指定相同的开始日期和结束日期时,它才会发生。

2 个答案:

答案 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)
                        }
                    }
                });
            }