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
        },

    ]        

  });

});

我想在输入//DONE
我想在完成名称“事件名称”// DONE
在eventClick函数上，我想打开相同的弹出窗口，输入值（事件名称）已经完成//DONE
按下提交按钮后，我想使用书面形式//This is not done

Answer 1

即使这个问题已经过时了，我现在也回答这个问题，以便将来遇到这个问题的其他人不必花费很长时间在网上搜索解决方案，就像我刚才那样。< / p>

旁注：我无法在but之外获得更新活动的功能，因此如果有其他人使用此功能可以发表评论或添加其他答案，我将不胜感激用那个解决方案。

这里是我放入eventClick:函数的内容，以便打开我的引导模式，然后点击＆＃34; Save＆＃34;更新事件。按钮，在此示例中有一个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')是选择器，用于获取我的＆＃34;编辑事件＆＃34;中的相关字段的值。单击日历中的事件时弹出的模态。

希望这个非常迟来的答案能在将来节省一些时间！

Jquery：我如何编辑完整日历中的事件？

1 个答案: