如何使用 laravel 在 jquery fullcalendar 中存储拖动的事件

Posted 2023-03-14

【中文标题】如何使用 laravel 在 jquery fullcalendar 中存储拖动的事件

【英文标题】：How to store dragged events in jquery fullcalendar with laravel

【发布时间】：2018-07-12 19:56:57

【问题描述】：

当我将日历中的事件从一个日期移动到另一个日期时，我希望在我停止拖动事件后将最终日期存储在我的数据库中（我说的是已经存在的事件而不是外部事件）： 这是我的脚本：

    <script type="text/javascript">
    !function($) 
"use strict";

var CalendarApp = function() 
    this.$body = $("body")
    this.$modal = $('#event-modal'),
    this.$event = ('#external-events div.external-event'),
    this.$calendar = $('#calendar'),
    this.$saveCategoryBtn = $('.save-category'),
    this.$categoryForm = $('#add-category form'),
    this.$extEvents = $('#external-events'),
    this.$calendarObj = null
;


/* on drop */
CalendarApp.prototype.onDrop = function (eventObj, date)  
    var $this = this;
        // retrieve the dropped element's stored Event Object
        var originalEventObject = eventObj.data('eventObject');
        var $categoryClass = eventObj.attr('data-class');
        // 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;
        if ($categoryClass)
            copiedEventObject['className'] = [$categoryClass];
        // render the event on the calendar
        $this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) 
            // if so, remove the element from the "Draggable Events" list
            eventObj.remove();
        
,
/* on click on event */
CalendarApp.prototype.onEventClick =  function (calEvent, jsEvent, view) 
    var $this = this;
        var form = $("<form></form>");
        form.append("<label>Change event name</label>");
        form.append("<div class='input-group'><input class='form-control' name='title' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
        $this.$modal.modal(
            backdrop: 'static'
        );
        $this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () 
            $this.$calendarObj.fullCalendar('removeEvents', function (ev) 
                return (ev._id == calEvent._id);
            );
            $this.$modal.modal('hide');
        );
        $this.$modal.find('form').on('submit', function () 
            calEvent.title = form.find("input[type=text]").val();
            $this.$calendarObj.fullCalendar('updateEvent', calEvent);
            $.ajax(
                    url: 'calendar/update/'+calEvent.id,
                    type: 'put',
                    data:title:form.find("input[name='title']").val(),
                    headers: 
                        'X-CSRF-TOKEN': " csrf_token() "
                    ,
                    success:function()
                        alert("succes modif");
                    ,error:function() 
                        alert("erreur!!!!");
                    
                );
            $this.$modal.modal('hide');
            return false;
        );
        $( "#delete" ).click(function() 
          $.ajax(
                    url: " URL::to('calendar/delete') ",
                    type: 'post',
                    data:id:calEvent.id,
                    headers: 
                        'X-CSRF-TOKEN': " csrf_token() "
                    ,
                    success:function()
                        alert("succes delete");
                    ,error:function() 
                        alert(" delete erreur!!!!");
                    
                );
        );
,
/* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) 
    var $this = this;
        $this.$modal.modal(
            backdrop: 'static'
        );
        var form = $("<form></form>");
        form.append("<div class='row'></div>");
        form.find(".row")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
            .append("<input name='_token' type='hidden' value='csrf_token()'>")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
            .find("select[name='category']")
            @foreach($categories as $categorie)
            .append("<option value='bg-black' name='categorie'>$categorie->title</option>")
            @endforeach
            .append("</div></div>");
        $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () 
            form.submit();
        );
        $this.$modal.find('form').on('submit', function () 
            var title = form.find("input[name='title']").val();
            var beginning = form.find("input[name='beginning']").val();
            var ending = form.find("input[name='ending']").val();
            var categoryClass = form.find("select[name='category'] option:checked").val();
            $.ajax(
                    url: " URL::to('calendar/store') ",
                    type: 'post',
                    data: title:form.find("input[name='title']").val(),start:start.format("YYYY-MM-DD"),end:end.format("YYYY-MM-DD"),
                    headers: 
                        'X-CSRF-TOKEN': " csrf_token() "
                    ,
                    success:function()
                        alert("succes ajout");
                    ,error:function() 
                        alert("erreur!!!!");
                    
                );
            if (title !== null && title.length != 0) 
                $this.$calendarObj.fullCalendar('renderEvent', 
                    title: title,
                    start:start,
                    end: end,
                    allDay: false,
                    className: categoryClass
                , true);  
                $this.$modal.modal('hide');

            
            else
                alert('Veuillez donner un titre à votre événement');
            
            return false;

        );


        $this.$calendarObj.fullCalendar('unselect');
,


/* Initializing */
CalendarApp.prototype.init = function() 

    /*  Initialize the calendar  */
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var form = '';
    var today = new Date($.now());

    var defaultEvents =  "url('/events')";

    var $this = this;
    $this.$calendarObj = $this.$calendar.fullCalendar(
        slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
        minTime: '08:00:00',
        maxTime: '19:00:00',  
        defaultView: 'month',  
        handleWindowResize: true,   
        height: $(window).height() - 200,   
        header: 
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        ,
        events: defaultEvents,
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        eventLimit: true, // allow "more" link when too many events
        selectable: true,
        drop: function(date)  $this.onDrop($(this), date); ,
        select: function (start, end, allDay)  $this.onSelect(start, end, allDay); ,
        eventClick: function(calEvent, jsEvent, view)  $this.onEventClick(calEvent, jsEvent, view); 

    );

    //on new event
    this.$saveCategoryBtn.on('click', function()
        var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
        var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
        if (categoryName !== null && categoryName.length != 0) 
            $this.$extEvents.append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i>' + categoryName + '</div>')

        

    );
,

//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp

(window.jQuery),

//initializing CalendarApp
function($) 
    "use strict";
    $.CalendarApp.init()
(window.jQuery);
</script>

我使用 ajax 来存储事件并更新它们的标题，因为我的 jquery 脚本中有一个表单，但是当我移动时更改事件的开始和结束时，我找不到解决方案

【问题讨论】：

codepen.io/subodhghulaxe/pen/qEXLLr

不是我的意思，我想更改已经在我的日历中的事件的位置，而不是外部事件

使用eventDragStop 事件。您的代码中似乎缺少这一点。

fullcalendar.io/docs/event_ui/eventDrop - 如果您处理此回调，它会为您提供拖动事件的新开始和结束值，然后您可以将其发送到您的服务器

感谢我使用了 eventDrop，它成功了！！！

【参考方案1】：

var $this = this;
    $this.$calendarObj = $this.$calendar.fullCalendar(
        slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
        minTime: '08:00:00',
        maxTime: '19:00:00',  
        defaultView: 'month',  
        handleWindowResize: true,   
        height: $(window).height() - 200,   
        header: 
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        ,
        events: defaultEvents,
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        eventLimit: true, // allow "more" link when too many events
        selectable: true,
        drop: function(date)  $this.onDrop($(this), date); ,
        select: function (start, end, allDay)  $this.onSelect(start, end, allDay); ,
        eventClick: function(calEvent, jsEvent, view)  $this.onEventClick(calEvent, jsEvent, view); ,
        eventDrop : function(event, delta, revertFunc) 
            $.ajax(
                url: " URL::to('calendar/updatedate') ",
                type: 'put',
                data:id:event.id,start:event.start.format("YYYY-MM-DD"),end:event.end.format("YYYY-MM-DD"),
                headers: 
                    'X-CSRF-TOKEN': " csrf_token() "
                ,
                success:function()
                    alert("succes drag");
                ,error:function() 
                    alert("erreur drag !!!!");
                
            );
        

    );