開始時刻（！）を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 
     }); 

    }); 

私は開始時刻とタイトルを更新/変更したい - 必要に応じて - モーダルダイアログでのイベントで。それはうまくいくようですが、別のイベントをドラッグして追加するたびに変更したい場合は、ドラッグされた他のすべてのイベントも変更します。

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

私はついにこのことを理解しました。私の例では、開始と終了の間の時間を計算してイベントの終了時間を変更し、それを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); 

     }); 

}); 

これが役に立ちます。

ご挨拶。