如何更新fullcalendar.js中的开始时间（！）

有没有办法改变一个事件的开始时间，我已经进入日历。

事件来自外部来源，如下所示：

//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 }); }); 

我想在modal dialog中更改/更新事件的开始时间和标题 – 如果需要 – 。 它似乎工作正常，但每次我通过拖动添加另一个事件并想要更改它，它也会更改所有其他拖动的事件。

 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); }); }); 

希望这可以帮助。

问候。