Question

在设置调度程序高级组件以使用FullCalendar集成进行测试时，我正在尝试使用外部事件的持续时间来模拟会议室计划。与fullcalendar网站上的普通拖放外部事件演示相同的概念，但每个事件都是特定的时间长度。我有这个工作，但我希望能够在我拖动之前在文本输入字段中设置事件的标题，然后将该文本作为事件标题拖动到调度程序后使用。

<div id='external-events'>
<p>Type event name then drag the length</p>
<input type="text" class="form-control" placeholder="Event Title" value="test" id="event-title">
<div class='external-event navy-bg' data-duration="00:30">30 minutes</div>
<div class='external-event navy-bg' data-duration="01:00">1 hour</div>
<div class='external-event navy-bg' data-duration="02:00">2 hours</div>
<div class='external-event navy-bg' data-duration="03:00">3 hours</div>
<div class='external-event navy-bg' data-duration="04:00">4 hours</div>
<div class='external-event navy-bg' data-duration="days:1">All day</div>

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

    var eventtitle = $('#event-title').val();
    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
        title: $.trim(eventtitle), // 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: 1111999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });

});

这非常适合从输入和持续时间大小中获取标题。

在fullCalendar初始化中，我相信我需要使用eventReceive函数来更新该标题，因为它目前仅使用“test”，因为它是上面定义的内容。

    eventReceive: function(event) {
        var eventtitle = $('#event-title').val();
        // some way of defining the title here???
    },

Answer 1

想出来。只需要'updateEvent'方法

        eventReceive: function(event) {
        event.title = $('#event-title').val();
        $('#calendar').fullCalendar('updateEvent', event);
    },

在fullcalendar调度程序eventReceive

1 个答案: