Question

我正在尝试使用FullCalendar制作单页CRUD应用程序。实际上，我做到了。我只是在创建事件然后删除它们时遇到错误。当我的应用程序单击现有事件时，必须将其删除。但是我得到了如下所示的错误。

这是我的事件对象。 Event object

你能帮我弄清问题是什么吗？

javascript代码如下所示：

var teacher_id = 2;

function addEventToDB(teacher_name,teacher_id,title,start,end,color){

axios.post('events', {
    teacher_name: teacher_name,
    user_id: teacher_id,
    title: title,
    start: start,
    end: end,
    color: color
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

}

function deleteEventFromDB (event_id,teacher_name) {
    axios.delete('/events/'+ event_id)
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
}

var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';

$(function () {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        themeSystem: 'bootstrap4',
        defaultView: 'agendaWeek',
        allDaySlot: false,
        slotEventOverlap: false,
        slotDuration: '00:30:00',
        slotLabelInterval: "01:00",
        scrollTime: '08:00:00',
        events: 'events',
        //defaultTimedEventDuration:  '00:30:00',

        footer: {
            center: 'eventTypeButton'
        },
        
        customButtons: {
            eventTypeButton: {
                text: 'Event type Toggle Button (Group/Individual)',
                click: function() {
                    if(eventType=='Individual') {
                        eventType = 'Group';
                        eventTitle = 'Available for Group';
                        eventColor = 'blue';
                    } else {
                        eventType = 'Individiual';
                        eventTitle = 'Available for Individual';
                        eventColor = 'orange';
                    }
                        
                }
            }
        },

        dayClick: function (date, jsEvent, view) {
            end = date.clone();
            end = end.add(30,'minutes');
            $('#calendar').fullCalendar('renderEvent', {
                title: eventTitle,
                teacher : teacher_id,
                teacher_name: teacher_name, 
                start: date.format(),
                end: end.format(),
                allDay: false,
                color: eventColor
            });
            var title = eventTitle;
            var start = date.format();
            var end = end.format();
            var color = eventColor;
            var teacher_name = "{{ Auth::user()->name }}";
            addEventToDB(teacher_name,teacher_id,title, start, end, color);
            
        },

        
        eventClick: function(event, jsEvent, view) {
            $('#calendar').fullCalendar( 'rerenderEvents' );
            console.log(event.id);
            deleteEventFromDB(event.id,event.teacher_name);
            $('#calendar').fullCalendar('removeEvents',event.id);
            $('#calendar').fullCalendar( 'rerenderEvents' );
        },

    })

});

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">My calendar</div>
                <div class="card-body">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
</div>

我正在添加服务器代码（我使用的是Laravel 5.6）：

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\AvailableTime;
use Illuminate\Contracts\Auth\Authenticatable;
class AvailableTimeController extends Controller
{
public function index(Authenticatable $user)
{   
if($user->hasRole('admin') || $user->hasRole('superadmin')){
    return AvailableTime::all(); 
} else if( $user->hasRole('teacher')) {
    return AvailableTime::where('user_id',$user->id)->get();  
}
}
public function show($id)
{
return AvailableTime::findOrFail($id);
}
public function update(Request $request, $id)
{
$AvailableTime = AvailableTime::findOrFail($id);
$AvailableTime->update($request->all());
return $AvailableTime;
}
public function store(Request $request)
{
$AvailableTime = AvailableTime::create($request->all());
return $AvailableTime;
}
public function destroy($id)
{   
try {
$availableTime = AvailableTime::find($id);
$availableTime->delete();
return 'Deleted Successfully';
}
catch ( \Exception $e) {
return redirect()->route('show_calendar')->withErrors 
'JSONError' => "Event can not be deleted"
]);
}
}
}

Answer 1

问题是因为您添加事件的过程存在缺陷 - 您正在向日历添加事件，而无需等待服务器向您发送有效ID。因此，通过在日历中单击该事件，永远不会在服务器中删除或更新该事件。它与数据库中记录的事件无关。

您必须首先将事件数据发送到服务器，在响应中获取自动生成的ID，然后将其作为事件对象的一部分记录下来，并传递给fullCalendar“renderEvent ”。如果您不这样做，那么如果您尝试更新或删除该事件，则它没有服务器可识别的ID。

Answer 2

Thank you for your advice and I could develop a solution. In fact, the problem is a synchronization problem, and every time I click to create a new event and I click to delete it, all events are refetched and the problem is solved. I share the codes for solving below.

function addEventToDB(teacher_name,teacher_id,title,start,end,color){

axios.post('events', {
    teacher_name: teacher_name,
    user_id: teacher_id,
    title: title,
    start: start,
    end: end,
    color: color
  })
  .then(function (response) {
    $('#calendar').fullCalendar( 'refetchEvents' );
    console.log(response);
  })
  .catch(function (error) {
    $('#calendar').fullCalendar( 'refetchEvents' );
    console.log(error);
  });

}

function deleteEventFromDB (event_id,teacher_name) {
    axios.delete('/events/'+ event_id)
    .then(function (response) {
    $('#calendar').fullCalendar( 'refetchEvents' );
    console.log(response);
    })
    .catch(function (error) {
    $('#calendar').fullCalendar( 'refetchEvents' );
    console.log(error);
    });
}

var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';

$(function () {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        themeSystem: 'bootstrap4',
        defaultView: 'agendaWeek',
        allDaySlot: false,
        slotEventOverlap: false,
        slotDuration: '00:30:00',
        slotLabelInterval: "01:00",
        scrollTime: '08:00:00',
        events: 'events',
        //defaultTimedEventDuration:  '00:30:00',

        footer: {
            center: 'eventTypeButton'
        },
        
        customButtons: {
            eventTypeButton: {
                text: 'Event type Toggle Button (Group/Individual)',
                click: function() {
                    if(eventType=='Individual') {
                        eventType = 'Group';
                        eventTitle = 'Available for Group';
                        eventColor = 'blue';
                    } else {
                        eventType = 'Individiual';
                        eventTitle = 'Available for Individual';
                        eventColor = 'orange';
                    }
                        
                }
            }
        },

        dayClick: function (date, jsEvent, view) {
            var end = date.clone();
            end = end.add(30,'minutes');
            var title = eventTitle;
            var start = date.format();
            var endformat = end.format();
            console.log(endformat);
            var color = eventColor;
            var teacher_name = "{{ Auth::user()->name }}";
            addEventToDB(teacher_name,teacher_id,title, start, endformat, color);
            $('#calendar').fullCalendar('renderEvent', {
                title: eventTitle,
                teacher : teacher_id,
                teacher_name: teacher_name, 
                start: date.format(),
                end: end.format(),
                allDay: false,
                color: eventColor
            });
        },

        
        eventClick: function(event, jsEvent, view) {
            $('#calendar').fullCalendar( 'rerenderEvents' );
            console.log(event.id);
            deleteEventFromDB(event.id,event.teacher_name);
            $('#calendar').fullCalendar('removeEvents',event.id);
            $('#calendar').fullCalendar( 'rerenderEvents' );
        },

    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you again for anyone who is response

Answer 3

event中的 eventClick() 对象没有 id 属性，将id更改为{{1} }}

_id

发送/获取JSON数据时出现fullcalendar错误

3 个答案: