具有引导模态的全日历创建多个事件

时间:2018-08-24 05:00:16

标签: twitter-bootstrap fullcalendar

这是我的代码

//event calendar
var eventCalendar = $("#event-calendar").fullCalendar({
    themeSystem: 'bootstrap4',
    editable: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: $("#event-calendar").fullCalendar('today'),
    navLinks: true, // can click day/week names to navigate views
    eventLimit: true, // allow "more" link when too many events
    events: '<?php echo base_url("admin/load-events");?>',
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay){
        $('#insertEventModal').modal('show');
        var start = start.format("Y-MM-DD HH:mm:ss");
        var end = end.format("Y-MM-DD HH:mm:ss");
        $('#eventSaveBtn').on('click',function(){
            $('#eventSaveBtn').unbind('click');
            if($('#event_title').val() && $('#event_desc').val()){

                $('#insertEventModal').modal('hide');
                var title = $('#event_title').val();
                var desc = $('#event_desc').val();
                $.ajax({
                    url: '<?php echo base_url("admin/save-events");?>',
                    type: 'POST',
                    data: {title:title, desc:desc, start:start, end:end},
                    success: function (data) {
                        if(data){
                            eventCalendar.fullCalendar('refetchEvents');
                            alert("Event added successfully");
                        }else{
                            alert('Something went wrong when saving events!');
                        }

                    }
                });
            }else{
                alert("title or description can't be blank!");
            }
        });
        $('#insertEventModal').modal('destroy');
    },
    eventClick: function(event){
        $('#viewEventModal').modal('show');
        $('#viewEventModal #event_date').val(event.start.format("Do MMM Y HH:mm:ss"));
        $('#viewEventModal #event_title').val(event.title);
        $('#viewEventModal #event_desc').val(event.desc);
        var id = event.id;
        $('#eventDelBtn').on('click',function(){
            if(confirm('Are you sure you want to remove it?')){
                $('#eventDelBtn').unbind('click');
                $('#viewEventModal').modal('hide');
                $.ajax({
                    url: '<?php echo base_url("admin/del-events");?>',
                    type: 'POST',
                    data: {id:id},
                    success: function (data) {
                        alert("Event successfully deleted");
                        eventCalendar.fullCalendar('refetchEvents');
                    }
                });
            }
        });
    },
    editable: true,
    eventResize: function (event){
        var start = event.start.format("Y-MM-DD HH:mm:ss");
        var end = event.end.format("Y-MM-DD HH:mm:ss");
        var id = event.id;
        $.ajax({
            url: '<?php echo base_url("admin/update-events");?>',
            type: 'POST',
            data: {id:id, start:start, end:end},
            success: function (data) {
                alert("Event successfully updated");
                eventCalendar.fullCalendar('refetchEvents');
            }
        });
    },
    eventDrop: function (event){
        var start = event.start.format("Y-MM-DD HH:mm:ss");
        var end = event.end.format("Y-MM-DD HH:mm:ss");
        var id = event.id;
        $.ajax({
            url: '<?php echo base_url("admin/update-events");?>',
            type: 'POST',
            data: {id:id, start:start, end:end},
            success: function (data) {
                alert("Event successfully updated");
                eventCalendar.fullCalendar('refetchEvents');
            }
        });
    }
});

我正在使用引导程序模式。每当用户单击日期时,它将打开模式,输入标题和描述,然后单击保存将事件存储到数据库中。到那时,它工作正常。但是,假设我单击8月24日,然后关闭任何内容的模式窗口,然后单击8月25日,然后单击“保存”按钮进行事件。它将有两个事件发生,分别是8月24日和8月25日,我选择了该模式但不保存任何内容就关闭了该模式。

如果我要从那里删除任何事件,也可以使用。对于上面的示例,事件创建任务在24日和25日创建两个事件。如果我单击第24个事件,则将打开一个模式窗口,如果我取消该窗口,然后再次单击第25个事件并删除该事件,则将删除这两个事件。

我认为每当单击fullcalendar时,它都会存储选择,如果我取消模式窗口并单击其他日期,它将存储先前的数据。现在的问题是如何取消选择我不想创建活动的日期? 我已经尝试过

eventCalendar.fullCalendar('unselect')

但是它不起作用。

0 个答案:

没有答案