Fullcalendar（Arshaw）-使用模式窗口添加事件

Question

我正在研究arshaw日歷，對此我真的很陌生。 我希望能夠添加事件VIA模態窗口。 以下是我要執行的操作的屏幕截圖：

在上圖中，是我的（Arshaw）Fullcalendar。

第二張圖片顯示，當用戶單擊日歷時，例如上午6點，彈出模式，用戶現在可以通過模式添加事件。

這是我的代碼：

Javascript：

//arshaw calendars
$(document).ready(function () {
    // page is now ready, initialize the calendar...

         $('#calendar').fullCalendar({
            // put your options and callbacks here
            defaultView: 'agendaDay',
            eventBorderColor: "#de1f1f",

             header:
            {  
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            editable: true,
            selectable: true,

            //When u select some space in the calendar do the following:
            select: function (start, end, allDay) {
                //do something when space selected
                //Show 'add event' modal
                $('#createEventModal').modal('show');
            },

            //When u drop an event in the calendar do the following:
            eventDrop: function (event, delta, revertFunc) {
                //do something when event is dropped at a new location
            },

            //When u resize an event in the calendar do the following:
            eventResize: function (event, delta, revertFunc) {
                //do something when event is resized
            },

            eventRender: function(event, element) {
                $(element).tooltip({title: event.title});             
            },

            //Activating modal for 'when an event is clicked'
            eventClick: function (event) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#fullCalModal').modal();
            },
        })
    });

CSHTML：

<div id="amethystBackground2"> <!-- CSS for background page !-->
    <br /><br />
    <div class="container">
        <div id='calendar' style="background:#ECF0F1"></div>
    </div>
</div>

<!--Add event modal-->
<div id="createEventModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                <h4>Add an Event</h4>
            </div>
            <div id="modalBody" class="modal-body">
               <div class="form-group">
                    <input class="form-control" type="text" placeholder="Event Name">
                </div>

                <div class="form-group form-inline">
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" placeholder="Due Date 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="Event Description"></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>
        </div>
    </div>
</div>

我怎么做？ 我在互聯網上看了看，這與javascript上的功能有關。 我對此並不陌生，對如何執行此操作還不太了解。 我嘗試了這個示例（ 在引導程序模態窗口中提交表單時創建了fullCalendar日歷事件 ），但是它不適用於我的示例。

請幫助，提前謝謝。

Answer 1

$(document).ready(function () {
    // page is now ready, initialize the calendar...
     $('#calendar').fullCalendar({
        // put your options and callbacks here
        defaultView: 'agendaDay',
        eventBorderColor: "#de1f1f",

         header:
        {  
            left: 'prev,next,today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        editable: true,
        selectable: true,

        //When u select some space in the calendar do the following:
        select: function (start, end, allDay) {
            //do something when space selected
            //Show 'add event' modal
            $('#createEventModal').modal('show');
        },

        //When u drop an event in the calendar do the following:
        eventDrop: function (event, delta, revertFunc) {
            //do something when event is dropped at a new location
        },

        //When u resize an event in the calendar do the following:
        eventResize: function (event, delta, revertFunc) {
            //do something when event is resized
        },

        eventRender: function(event, element) {
            $(element).tooltip({title: event.title});             
        },

        //Activating modal for 'when an event is clicked'
        eventClick: function (event) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#fullCalModal').modal();
        },
    })

      $('#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');
        $("#calendar").fullCalendar('renderEvent',
            {
                title: $('#eventName').val(),
                start: new Date($('#eventDueDate').val()),

            },
            true);
       }
    });


});

---

<div id="createEventModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                <h4>Add an Event</h4>
            </div>
            <div id="modalBody" class="modal-body">
               <div class="form-group">
                    <input class="form-control" type="text" placeholder="Event Name" id="eventName">
                </div>

                <div class="form-group form-inline">
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" id="eventDueDate" class="form-control" placeholder="Due Date 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="Event 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>
        </div>
    </div>
</div>

Answer 2

就像這樣，當用戶選擇一個日期時，就會發生這種情況：

  select: function (start, end, allDay) {
           //do something when space selected
           //Show 'add event' modal
           $('#createEventModal').modal('show');
   },

在參數中，您具有開始和結束，它們定義了事件的開始和結束時間。

從這里，您應該將click事件綁定到保存按鈕：

 select: function (startTime, endTime, allDay) {
           //do something when space selected
           //Show 'add event' modal
           $('#createEventModal').modal('show');

           $('#submitButton').on('click',function(){
               var mockEvent = {title: 'myNewEvent!', start:startTime, end:endTime};
                $('#calendar').fullCalendar('renderEvent', mockEvent);
                $('#submitButton').unbind('click');
                $('#createEventModal').modal('hide');
           });
   }

請注意 ，此示例基於全日歷的新版本 （2和3版本）。

您最好檢查一下有關事件的許多選擇：

活動選項

添加事件

另外，您可以從添加靜態事件開始以探索所有事件功能：

$('#calendar').fullCalendar({
        defaultView: 'agendaDay',
        eventBorderColor: "#de1f1f",

        events: [
                {
                 title  : 'test event',
                 start  : '2016-10-18',
                 end  : '2016-10-19'
                } 
        ]
        ...

祝好運！