javascript - Jquery:如何编辑完整日历中的事件？

Question

我希望在弹出窗口中编辑事件。以下是有关我的 HTML 和 JS 的详细信息:

HTML

<小时/>

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
               <ul class="nav nav-tabs" id="tabContent">
                    <li class="active"><a href="#details" data-toggle="tab">Appointments</a></li>
                    <li><a href="#access-security" data-toggle="tab">Events</a></li>
                </ul>

              <div class="tab-content">
                    <div class="tab-pane active" id="details">
                        <div class="control-group">
                          <form>    
                              <label class="control-label">Event Name</label>
                              <input type="text" name="eventName"  id="eventName">
                              <label class="control-label">Date</label>
                              <input type="text" name="eventName"  id="eventName">
                              <input type="submit" value="Submit" id="submit"> 
                          </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="access-security">
                    content 0
                    </div> 
              </div>
          </div>

        </div>
    </div>

    <div id='calendar'></div>

JS

<小时/>

$(function() { // document ready

  var calendar=$('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    defaultView: 'agendaDay',
    selectable: true,   //permite sa selectezi mai multe zile
    selectHelper: true,  //coloreaza selctia ta

    eventClick:  function(event, jsEvent, view) {  //This is the editing function
        console.log(event);
        $('#myModal').modal('show');
        $("#eventName").val(event.title);
        $( "#submit" ).click(function(e) {
            e.preventDefault();
            var title = $("#eventName").val();
            if(title){
                $('#calendar').fullCalendar('updateEvent', title);
            }
        //  console.log(title);

        }); 
     // event.title = "CLICKED!";
        //$('#calendar').fullCalendar('updateEvent', event);
    },
    select: function(start, end, allDay)  
            {
                $('#myModal').modal('show');

                $( "#submit" ).click(function(e) {
                    e.preventDefault();
                    var title = $("#eventName").val();
                    if(title)
                    {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    //allDay: allDay
                                },

                        true // make the event "stick"
                        );
                    }   
                    $('#myModal').modal('hide');
                });
                calendar.fullCalendar('unselect');  
            },

     events: [
        {

            title  : 'titleEvent',
            start  : '2014-11-12',
             allDay : false // will make the time show
        },

    ]        

  });

});

1. 我想在 Bootstrap 中打开一个弹出窗口，输入 //DONE

2. 我想在完成名称“事件名称”后添加事件// DONE

3. 关于eventClick函数我想打开相同的弹出窗口，输入值(事件名称)已完成 //DONE

4. 按下提交按钮后，我想使用书面形式 //This is not done 中的新值编辑事件

Answer 1

尽管这个问题已经很老了，但我现在就回答它，以便将来遇到此问题的其他人不必像我刚才那样花费很长时间在互联网上搜索解决方案。

旁注:我无法获得 eventClick: 之外的函数来更新事件，因此如果任何其他已经实现此功能的人可以评论或添加，我们将不胜感激该解决方案的另一个答案。

这是我在 eventClick 函数中放入的内容，以便打开我的引导模式，然后在单击“保存”按钮时更新事件，在本例中具有一个 saveChanges 类 我用作选择器。

    eventClick: function(calEvent, jsEvent, view) {
        eventToEdit = $("#calendar").fullCalendar('clientEvents', calEvent.id);
        showEditEventModal(calEvent);
        $('.saveChanges').on('click',function(e){
            e.preventDefault();
            calEvent.start = $('#eventStart').val();
            calEvent.end = $('#eventEnd').val();
            calEvent.title = $('#eventTitle').val();
            $('#calendar').fullCalendar('updateEvent', calEvent);
        });
    }

$('#eventStart')、$('#eventEnd') 和 $('#eventTitles') 是选择器来获取我的“编辑事件”模式中关联字段的值，该模式在单击日历中的事件时弹出。

希望这个迟来的答案能够在未来节省某人的时间!