Question

我在我的项目中使用JQuery fullCalendar。我会直接解决我的问题。

每当我创建一个新的日历事件，并成功将其渲染到日历视图，然后尝试调整新渲染的事件的大小，一个事件也会继续调整大小。

所以我的代码是如何呈现创建的事件。

这第一个代码是select事件，我可以突出显示一系列日期和时间。

$('#calendar').fullCalendar({
    select: function(start, end){
        if (start.format("YYYY-MM-DD") == end.format("YYYY-MM-DD")) {

            $('#createscheduleModal').modal('show'); // opens bootstrap modal to add title

            eventData = {
                id: eventCount + 1,
                date : start.format("YYYY-MM-DD"),
                start : start.format("YYYY-MM-DD HH:mm:ss"),
                end : end.format("YYYY-MM-DD HH:mm:ss"),
                teacher : auth_id
            }
        }else{
            $('.calendar-view').fullCalendar('unselect');
        }
        eventCount++;
    },
});

然后在选择日期范围后，将弹出一个模态，以便用户可以输入日历事件的标题。在模态中，有一个带id="btn-save-sched"的按钮，当用户单击按钮时，它会将日历事件保存到数据库并将其呈现给日历。这是

的代码

$('#btn-save-sched').click(function(){
    eventData.title = $('#event_name').val(); // add title to eventData object

    if ($('#event_name').val() == "" || $('#event_name').val() == null) {
        swal('Ooops!','Please enter an event name','error');
    }else{
        $.ajax({
            url : teacher_ajax,
            type : 'POST',
            data : eventData,
            success : function(res){
                eventData.editable = true; //set this event to be editable
                $('.calendar-view').fullCalendar('renderEvent', eventData, true);
                $('#event_name').val('');
                $('#createscheduleModal').modal('hide');
            }
        })
    }
});

所以上面的代码成功地将日历事件呈现到日历中，然后当我尝试调整这个新创建的事件的大小时，另一个事件会继续与新事件一起调整大小。

请在下面看到我添加新活动时发生的事情

谢谢你们！

JQuery完整日历：eventResize影响其他事件

0 个答案: