Ad

Store Event With Fullcalendar And Laravel Without Maddhatter Method

- 1 answer

I am trying to use the full calendar and the larval to create an event management system. I am facing one the problem which are i dont know how to add the data into the database. Create a database is easier, but how to connect it and add, delete, edit is a little bit harder for me. This is my code for the calendar view, it can let me click and add event, and drag to other timeline, but it doesnt connect to the database.

<script>
    $(document).ready(function() {
        // Check calender div is exist or not.
        // In case of guest user it will not present
        if($("#calendar").length ){
            $('#calendar').fullCalendar({
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable:true,
                selectHelper:true,
                select: function(start, end){
                    var title = prompt('Event Title :');
                    var eventData;
                    if(title){
                        eventData = {
                            title: title,
                            start: start,
                            end:end
                        };
                        $('#calendar').fullCalendar('renderEvent',eventData,true);
                    }
                    $('#calendar').fullCalendar('unselect');
                },
                editable:true,
                eventLimit:true
            });
        }

    });
</script>

My question is, if i want to connect with the database. How to add into the laravel 5.2 ? The events can added without refresh the page? And how to manage to add the event into my database with the function can drag? Thanks for any suggestions and helps.

Ad

Answer

There are several stops to be done:

  1. Load existing events into calendar when the page is opened.

Use whatever method you prefer (jQuery AJAX, JavaScript native calls, reactive JS frameworks, etc) to load the data from your server and then pass it to Full Calendar like this:

for(var i = 0; i < events.length; i++) {
    $('#calendar').fullCalendar('renderEvent', events[i], true);
}

If you don't like AJAX calls, you could fetch existing events in Laravel and display them in the Blade template as an array. But you will need AJAX anyway to create/modify events so it's probably better to use the same logic.

  1. Process calendar updates

Then, when user drags/adds another event onto the calendar, Full Calendar will call eventDrop method, so define it inside your fullCalendar initialisation block:

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
    // This is just an example of a reverse function
    if (event.start.unix() < (Date.now() / 1000)) {
        revertFunc();
    } else {
        // Some method here that will make another AJAX call to your server and save the new event in the database
        self.addEvent(event);
    }
},

You will need a Laravel controller to deal with these AJAX calls and I would recommend to create a resource controller – it fits here perfectly. You will use index() method in the beginning to display all existing events and you will use update(), destroy() and so on to modify existing events.

Ad
source: stackoverflow.com
Ad