Как обновить начало Время (!) В fullcalendar.js

Question

Есть ли способ изменить время начала события, которое я записал в календарь.

Событие происходит от внешнего источника, как это:

//initialize the external events 

    $('#external-events .fc-event').each(function() { 

     /* // store data so the calendar knows to render an event upon drop 
     $(this).data('event', { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      stick: true // maintain when user navigates (see docs on the renderEvent method) 
     }); 
     */ 
     var eventObject = { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      id: $(this).data('id') 
     };   

     // store the Event Object in the DOM element so we can get to it later 
     $(this).data('eventObject', eventObject); 

     // make the event draggable using jQuery UI 
     $(this).draggable({ 
      zIndex: 999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 // original position after the drag 
     }); 

    }); 

Я хочу изменить/обновить время начала и Title - при необходимости - о событии в модальном диалоге. Кажется, он работает нормально, но каждый раз, когда я добавляю другое событие, перетаскивая его и хочу его изменить, он также меняет все другие перенесенные события.

eventClick: function(calEvent, jsEvent, view) { 


      //Sending data to modal:   

      $('#modal').modal('show'); 
      $("#input_title").val(calEvent.title); 
      var my_time = moment(calEvent.start).format('LT'); 
      $("#input_time").val(my_time); 
      var my_date = moment(calEvent.start).format("YYYY-MM-DD"); 
      $("#input_date").val(my_date); 

      // waiting for button 'save' click: 
      $('.btn-primary').on('click', function (myEvent) { 

        calEvent.title = $("#input_title").val(); 
        var my_input_time = $("#input_time").val(); 
        var momentTimeObj = moment(my_input_time, 'HH:mm:ss'); 
        var momentTimeString = momentTimeObj.format('HH:mm:ss'); 

        var my_input_date = $("#input_date").val(); 
        var momentDateObj = moment(my_input_date, 'YYYY-MM-DD'); 
        var momentDateString = momentDateObj.format('YYYY-MM-DD'); 

        calEvent.start = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm"); 


        $('#calendar').fullCalendar('updateEvent', calEvent); 
        $('#calendar').fullCalendar('unselect'); 
        $('#modal').modal('hide'); 
       });  

      } 

Что я делаю неправильно?

Answer 1

Я, наконец, понял, как это сделать. В моем примере я могу изменить время окончания события, вычислив продолжительность между началом и концом и diplay его как HH: mm. Таким образом, Пользователь может изменить продолжительность как 01:00 (час). Также я добавляю дополнительные поля, такие как «информация» и «цвет». После того, как сделаны изменения в модальном (бутстрап), я верну его в календарь. Возможно, для этого есть лучшие решения, но для меня это работает нормально.

// initialize the external events 

      $('#external-events .fc-event').each(function() { 

        // Start Time: String to Date 
        var my_start_time = new Date (new Date().toDateString() + ' ' + $(this).data('start')); 
        var start_time = moment(my_start_time).toDate(); 

        // End Time: String to Date -> Date to Decimal 
        var my_dur_time = new Date (new Date().toDateString() + ' ' + $(this).data('duration')); 
        var dur_time = moment(my_dur_time).format('HH:mm'); 
        dur_time = moment.duration(dur_time).asHours(); 


        //Add Decimal End Time to Start Time 
        var end_time = moment(start_time).add(dur_time, 'hours'); 


       // store data so the calendar knows to render an event upon drop 
       $(this).data('event', { 
        start: $(this).data('start'), 
        end: end_time, 
        title: $.trim($(this).text()), // use the element's text as the event title 
        stick: true, // maintain when user navigates (see docs on the renderEvent method) 

       }); 

       // make the event draggable using jQuery UI 
       $(this).draggable({ 
        zIndex: 999, 
        revert: true,  // will cause the event to go back to its 
        revertDuration: 0 // original position after the drag 
       }); 

      }); 

$('#calendar').fullCalendar({ 

//Other calendar settings here ... 

eventClick: function(event, element) { 



curr_event = event; 
      var inp_start_time = moment(event.start).format(); 
      var inp_end_time = moment(event.end).format(); 
      var diff_time = moment(moment(inp_end_time),'mm').diff(moment(inp_start_time),'mm'); 
      diff_time = moment.duration(diff_time, "milliseconds"); 

      diff_time = moment.utc(moment.duration(diff_time).asMilliseconds()).format("HH:mm"); 


      var my_time = moment(event.start).format('HH:mm'); 
      var my_date = moment(event.start).format('DD.MM.YYYY'); 
      var my_hidden_date = moment(event.start).format('YYYY-MM-DD'); 
      $("#inp_time").val(my_time); 
      $("#inp_date").val(my_date); 
      $("#inp_hidden_date").val(my_hidden_date); 
      $("#inp_title").val(event.title); 

      $("#inp_duration").val(diff_time); 

      $("#inp_information").val(event.information); 
      $("#inp_color").val(event.color);  

      $('#modal').modal('show'); 
     } 
}); 

     $("#button_ok").click(function (myevent) { 

       var my_input_time = $("#inp_time").val(); 
       var momentTimeObj = moment(my_input_time, 'HH:mm:ss'); 
       var momentTimeString = momentTimeObj.format('HH:mm:ss'); 


       var my_input_date = $("#inp_hidden_date").val(); 
       var momentDateObj = moment(my_input_date, 'YYYY-MM-DD'); 
       var momentDateString = momentDateObj.format('YYYY-MM-DD'); 

       var datetime = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm"); 

       var my_title = $("#inp_title").val(); 
       var my_duration = $("#inp_duration").val(); 

       var new_dur_time = moment.duration(my_duration).asHours(); 

       //Add Decimal End Time to Start Time 
       var new_end_time = moment(datetime).add(new_dur_time, 'hours'); 

       var new_information = $("#inp_information").val(); 
       var new_color = $("#inp_color").val();     

        $.extend(curr_event, { 
         title: my_title, 
         start: datetime, 
         end: new_end_time, 
         information: new_information, 
         color: new_color 
        }); 

       $("#calendar").fullCalendar('updateEvent', curr_event); 

     }); 

}); 

Надеюсь, что это поможет.

Приветствия.