javascript jQuery FullCalendar- 删除事件的默认结束时间

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7754743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:11:36  来源:igfitidea点击:

jQuery FullCalendar- Default end time for dropped events

javascriptjqueryfullcalendar

提问by Oseer

I am using FullCalendar with the ability to drop external events onto the calendar: http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

我正在使用 FullCalendar,能够将外部事件拖放到日历上:http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

When a new event is dropped, it has a start time but no end time. It seems that all these events are "all day" events by default. I tried changing the allDay callback to false: http://arshaw.com/fullcalendar/docs/dropping/drop/

当一个新事件被删除时,它有一个开始时间但没有结束时间。默认情况下,所有这些事件似乎都是“全天”事件。我尝试将 allDay 回调更改为 false:http://arshaw.com/fullcalendar/docs/dropping/drop/

...but it hasn't helped. I'm trying to get it to where when a new event is dropped onto the calendar, it's end time is set for 30 minutes after the drop time (ie. the setting of my defaultEventMinutes) http://arshaw.com/fullcalendar/docs/agenda/defaultEventMinutes/

......但它没有帮助。我正在尝试将新事件放到日历上时,它的结束时间设置为放置时间后 30 分钟(即我的 defaultEventMinutes 的设置) http://arshaw.com/fullcalendar/文档/议程/defaultEventMinutes/

Anyone know how to do this?

有人知道怎么做吗?

Here is my current fullcalendar function:

这是我当前的全日历功能:

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },

        events: {
            url: 'json-events.php',
            type: 'POST',
            data: {

            },
            error: function() {
                alert('there was an error while fetching events!');
            },

        },

        allDaySlot: false,
        defaultView: 'agendaWeek',
        slotMinutes: 15,
        firstDay: '<?php echo $config->week_start; ?>',
        minTime: '<?php echo $config->day_start; ?>',
        maxTime: '<?php echo $config->day_end; ?>',
        defaultEventMinutes: 30, 
        aspectRatio: 1.1, 

        titleFormat: {
            month: 'MMMM yyyy',  
            week: "MMMM dd[ yyyy]{ '&#8212;'[ MMMM] dd, yyyy}", 
            day: 'dddd MMM dd, yyyy'    
        },

        columnFormat: {
            month: 'ddd',    // Mon
            week: 'ddd M/dd', // Mon 9/07
            day: 'dddd M/dd'  // Monday 9/07
        },

        editable: true,
        droppable: true, 
            drop: function(date, allDay) { 

            var originalEventObject = $(this).data('eventObject');
            var copiedEventObject = $.extend({}, originalEventObject);

            copiedEventObject.start = date;
            //copiedEventObject.allDay = allDay; // Can I make this 30min by default drop?
            copiedEventObject.end   = (date.getTime() + 1800000)/1000;
            copiedEventObject.group_id = $(this).attr("name"); // Group ID

            addEvent(copiedEventObject); // Add the event to the db

            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            if ($('#drop-remove').is(':checked')) {
                $(this).remove();
            }               

        }
});

回答by Yuri

I was looking for the same thing, for FullCalendar v2, and I found out this:

我正在为 FullCalendar v2 寻找同样的东西,我发现了这一点:

defaultTimedEventDuration

A fallback duration for timed Event Objects without a specified end value.

Duration, default: '02:00:00' (2 hours)

If an event does not have an end specified, it will appear to be this duration when rendered.

The actual end of the event will remain unset unless forceEventDuration has been set to true.

This setting only affects events with allDay equal to false. For all-day events, use defaultAllDayEventDuration.

默认定时事件持续时间

没有指定结束值的定时事件对象的回退持续时间。

持续时间,默认值:“02:00:00”(2 小时)

如果事件没有指定结束,则渲染时将显示为该持续时间。

除非 forceEventDuration 设置为 true,否则事件的实际结束将保持未设置。

此设置仅影响 allDay 等于 false 的事件。对于全天事件,请使用 defaultAllDayEventDuration。

So you just need to do something like this, to have a default duration of 30 min.

所以你只需要做这样的事情,默认持续时间为 30 分钟。

$('#calendar').fullCalendar({ 
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    ...
    ...
});

回答by Mr.J4mes

You can set the end time of the dropped event in the drop function. One thing to note is that for Full Calendar, time will be measured in seconds.

可以在drop函数中设置drop事件的结束时间。需要注意的一件事是,对于完整日历,时间将以秒为单位。

var arrayOfEvents = [];

$('#calendar').fullCalendar({
    ...
    drop: function(date) {
        ...
        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

       // assign it the date that was reported
       copiedEventObject.start  = date;
       copiedEventObject.end    = (date.getTime() + 1800000)/1000; // put your desired end time here
       copiedEventObject.allDay = false;

       // Push the event into the array
       arrayOfEvents.push(copiedEventObject);
       ...
    },
    ...
)};

回答by Andrew

I'm using this:

我正在使用这个:

    $('#calendar').fullCalendar({

        allDayDefault: false

});

and at every event you will have display only start time ...

并且在每个事件中,您只会显示开始时间......

回答by opto

using Mr. J4mes answer, the event reverts back for me as well, it does not render.

使用 J4mes 先生的回答,事件也会为我恢复,它不会呈现。

The following helps: populate copiedEventObject.end with a new Date(...):

以下帮助:用新的 Date(...) 填充 CopyEventObject.end:

 copiedEventObject.end =new Date(date.getTime()+900000);

This adds 15 minutes (=900000 millisecs) to the start time

这将在开始时间上增加 15 分钟(=900000 毫秒)

回答by Aaron Hudon

I have found the same problem. The solution is to setup a start/end property on the DOM object that is stored within the item that is going to be dropped.

我发现了同样的问题。解决方案是在 DOM 对象上设置一个开始/结束属性,该对象存储在将被删除的项目中。

E.g.

例如

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

// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
// use the element's text as the event title
// set a start and end placeholder for the object!
var eventObject = {
    title: $.trim($(this).text(), start: null, end: null)
};

回答by Ahmad Zahabi

I resolved this problem using

我解决了这个问题

   defaultTimedEventDuration: '01:00',
   forceEventDuration: true,

From doc:

来自文档:

If an event's end is not specified, it will be calculated and assigned to the Event Object using defaultTimedEventDuration or defaultAllDayEventDuration.

如果未指定事件的结束,则将使用 defaultTimedEventDuration 或 defaultAllDayEventDuration 计算并将其分配给事件对象。