如何更新fullcalendar.js中的开始时间（！） [英] How to update start Time(!) in fullcalendar.js

问题描述

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

Is there a way to change the start time of an Event, wich I draged into the calendar.

事件来自这样的外部来源：

The Event comes from an external Source like this:

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

    });

我想更改/更新模式中事件的开始时间和标题 - 如有必要对话。它似乎工作正常，但每次我通过拖动添加另一个事件并想要更改它，它也会更改所有其他拖动的事件。

I want to change/update the start Time and Title - if necessary - of the Event in a modal Dialog. It seems to work fine, but everytime I add another Event by dragging and want to change it, it changes all other dragged Events, too.

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

            }

我做错了什么？

推荐答案

我终于想通了，怎么做。在我的例子中，我能够通过计算开始和结束之间的持续时间来改变事件结束时间，并将其显示为HH：mm。因此，用户可以像01:00（小时）一样更改持续时间。我还添加了一些其他字段，如信息和颜色。在进行模态（引导程序）的更改后，我将其写回日历。也许有更好的解决方案，但对我来说它工作正常。

I finally figured out, how to do this. In my example I'm able to change the event end-time by calculating the duration between start and end and diplay it as HH:mm. So the User can change the duration like 01:00 (hour). Also I add some additional fields like "information" and "color". After the changes in a modal (bootstrap) are made, I write it back to the calendar. Maybe there are better solutions for this, but for me it works fine.

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

        }); 

});

希望这会有所帮助。

问候。

这篇关于如何更新fullcalendar.js中的开始时间（！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！