logo标签列表

jQuery FullCalendar-拖动事件的默认结束时间

javascriptjqueryfullcalendar
3
我正在使用FullCalendar，可以将外部事件拖放到日历上： http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html 当拖放新事件时，它有一个开始时间但没有结束时间。似乎所有这些事件默认都是“全天”事件。我尝试将allDay回调更改为false： http://arshaw.com/fullcalendar/docs/dropping/drop/ …但这并没有帮助。我想让它在将新事件拖放到日历上时，将其结束时间设置为拖放时间后的30分钟（即我的defaultEventMinutes设置）。 http://arshaw.com/fullcalendar/docs/agenda/defaultEventMinutes/ 有人知道如何做到这一点吗？
以下是我当前的fullcalendar功能：
$('#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();
            }               

        }
});
6个回答
9

我也曾寻找 FullCalendar v2 相关的内容，找到了这个：

defaultTimedEventDuration

指定在事件对象没有指定结束时间时的默认持续时间。

持续时间，默认值为 '02:00:00' （2小时）

如果事件没有指定结束时间，那么渲染出来的时候将默认持续这段时间。

除非设置 forceEventDuration 为 true，否则事件的实际结束时间将保持未设置状态。

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

所以您只需要像这样进行操作，即可将默认持续时间设置为 30 分钟。

$('#calendar').fullCalendar({ 
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    ...
    ...
});
1
提示：不要为事件对象设置 end 属性，否则上面的代码将无法正常工作。 - Avatar
5

您可以在drop函数中设置拖动事件的结束时间。需要注意的是，对于Full Calendar来说，时间将以秒为单位进行计量。

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);
       ...
    },
    ...
)};
谢谢您的回答，但是当我完全复制您的copyEventObject.end行时，事件对象不会粘贴到日历上。（由于某种原因无法正常工作） - Oseer
你能将你的$('#calendar').fullCalendar({})函数复制粘贴到你的问题中吗？ - Mr.J4mes
刚刚更新了问题并包含了fullcalendar函数。 - Oseer
我在您的代码中没有发现任何问题。嗯，您能否澄清一下说“事件对象不会粘附在日历上”的意思是什么？具体发生了什么事？ - Mr.J4mes
是的，我曾经注释掉了copiedEventObject.allDay（如上所示），我也尝试将其更改为false。但都没有起作用。似乎无论我做什么，如果copiedEventObject.end被定义，事件都不会停留在日历上。 - Oseer
显示剩余4条评论
1

我正在使用这个：

    $('#calendar').fullCalendar({

        allDayDefault: false

});

在每个事件中，你只会显示开始时间...
0
我遇到了相同的问题。解决方法是在要放置的项中存储一个DOM对象，并设置一个起始/结束属性。
例如：
$('#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)
};
0

使用J4mes先生的答案，事件也会对我进行还原，但它不会呈现。

以下方法有所帮助：使用新的Date(...)填充copiedEventObject.end：

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

这将在起始时间上增加15分钟（= 900000毫秒）

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接