单击agendaDay视图

时间:2017-06-14 11:29:36

标签: javascript events fullcalendar

我使用的是FullCalendar 3.2.0。当我进入agendaDay视图并单击时间段时,默认情况下会自动创建一个新事件,持续时间为30分钟。如何从dayClick回调中访问此事件,以便我可以更改其持续时间?

我实现了一个页面,您可以在其中找到定义事件持续时间的表单。您可以在输入中输入事件最后的小时数,然后单击日历的agendaView以创建事件。在dayClick回调中,我获取事件的开始并向其添加输入中的持续时间,然后我在日历中呈现事件。结果是我的渲染事件与自动创建的事件重叠,如下所示:

enter image description here

我必须在日历外单击才能使事件消失。我想首先阻止事件的自动创建,或者能够在创建事件时更改其持续时间并使其永久化,因此当我在主日历框架外单击时它不会消失。 / p>

这是我的代码:

$('#calendario').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    },
    defaultDate: new Date(),
    navLinks: true,
    selectable: true,
    selectHelper: true,
    dayClick: function(day, evto, view) {
        var txtDuration = $('#duration');
        var hoursOrDays = $('#hoursOrDays');
        if (view.name === "agendaDay") {
            // Here, is it possible to get a reference to the automatically created event and change its end date,
            // instead of creating a new one and rendering it?
            createEvent('Available', day, calculateEndDate(day, parseInt(txtDuration.val()), hoursOrDays));
        }
    },
    editable: true,
    eventLimit: true
});

function createEvent(text, start, end) {
    var calendario = $('#calendario');
    var evento = {
        title: text,
        start: start,
        end: end,
        durationEditable: false,
        resourceEditable: false
    };
    calendario.fullCalendar('renderEvent', evento);
}

function calculateEndDate(start, duration, hoursOrDays) {
    var unit = hoursOrDays === 'D' ? 'days' : 'hours';
    return start.clone().add(duration, unit);
}

感谢您的帮助!

0 个答案:

没有答案