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上的功能有关。我是新手，不太了解如何做到这一点。我试过这个例子（Create fullCalendar calendar event on submitting the form in bootstrap modal window），但它不适用于我的。

请帮忙，提前谢谢。

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');
   },

在参数中，您有开始和结束，它们定义了您的事件开始和结束时间。

从这里您应该将点击事件绑定到您的保存按钮：

 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 版本）。

你最好检查一下你对事件的许多选择：

Events options

Adding events

此外，您可以先添加静态事件以探索所有事件功能：

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

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

祝你好运！