如何正确编辑日历事件名称?

时间:2016-02-01 08:05:09

标签: javascript jquery twitter-bootstrap jquery-ui fullcalendar

我有这个样本:

link

代码 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">
                          <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) {
            if(1>2){
                $('#myModal').modal('show');
            //  event.title = "CLICKED!";
            //  $('#calendar').fullCalendar('updateEvent', event);
            //  event.title = "CLICKED!";
                $( "#submit" ).click(function(e) {
                    e.preventDefault();
                    var title = $("#eventName").val();
                    event.title = title;
                    $('#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.打开一个带有bootrstrap的弹出窗口,我想在我的日历中添加一个事件。(为此我使用了select函数)

2.我想编辑事件名称,然后点击添加的事件。

我组织代码的方式有误吗?目前它发生在event click and select while。

你能帮我解决这个问题吗?

提前致谢!

0 个答案:

没有答案