I do not know if I can help you, but I posted a post because of problems I have with events that can be dragged into the calendar, but you can check to see if you can use the javascript code,.
https://es.stackoverflow.com/questions/133655/problema-con-eventos-arrastrables
With regard to your problem, I think the best thing you could do is a CRUD, (create, update, delete, etc ..) from a controller that you call in your own javascript, if you are not able I could share the code of my controller.
Greetings and good programming!
Edit:
View:
@extends('layouts.app')
<head>
<link rel="stylesheet" href="{{ URL::asset('css/plugins/calendars/fullcalendar.min.css')}}"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.print.css" media="print"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{{ URL::asset('vendors/js/extensions/moment.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.js"></script>
</head>
@section('content')
<div class="app-content content container-fluid">
<div class="content-body">
<section id="advance-examples">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-header">
<select id="deps">
@foreach($departamentos as $dep)
<option id="{{ 'dep-'.$dep->id }}" value="{{ $dep->id }}">
{{ $dep->name }}
</option>
@endforeach
</select>
<h4 align= "center" class="card-title">Calendario</h4>
<a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
<li><a data-action="reload"><i class="icon-reload"></i></a></li>
<li><a data-action="close"><i class="icon-cross2"></i></a></li>
</ul>
</div>
</div>
<div class="card-body collapse in">
<div class="card-block">
<div class="row">
<div class="col-md-9">
<div id='fc-default'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- // Full calendar advance section end -->
@stop
@section('javascript')
<!-- jQuery UI 1.11.4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.js"></script>
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-event div.external-events'));
ini_events($('.fc-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#fc-default').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'dia'
},
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
//events: { url:"cargaEventos"},
//editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
allDay=true;
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
//$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// the last 'true' argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
//Guardamos el evento creado en base de datos
var title=copiedEventObject.title;
var start=copiedEventObject.start.format("YYYY-MM-DD HH:mm");
var back=copiedEventObject.backgroundColor;
crsfToken = document.getElementsByName("_token")[0].value;
$.ajax({
url: 'guardaEventos',
data: 'title='+ title+'&start='+ start+'&allday='+allDay+'&background='+back,
type: "POST",
headers: {
"X-CSRF-TOKEN": crsfToken
},
success: function(events) {
console.log('Evento creado');
$('#fc-default').fullCalendar('refetchEvents' );
},
error: function(json){
console.log("Error al crear evento");
}
});
},
eventResize: function(event) {
var start = event.start.format("YYYY-MM-DD HH:mm");
var back=event.backgroundColor;
var allDay=event.allDay;
if(event.end){
var end = event.end.format("YYYY-MM-DD HH:mm");
}else{var end="NULL";
}
crsfToken = document.getElementsByName("_token")[0].value;
$.ajax({
url: 'actualizaEventos',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id+'&background='+back+'&allday='+allDay,
type: "POST",
headers: {
"X-CSRF-TOKEN": crsfToken
},
success: function(json) {
console.log("Updated Successfully");
},
error: function(json){
console.log("Error al actualizar evento");
}
});
},
eventDrop: function(event, delta) {
var start = event.start.format("YYYY-MM-DD HH:mm");
if(event.end){
var end = event.end.format("YYYY-MM-DD HH:mm");
}else{var end="NULL";
}
var back=event.backgroundColor;
var allDay=event.allDay;
crsfToken = document.getElementsByName("_token")[0].value;
$.ajax({
url: 'actualizaEventos',
data: 'title='+ event.title+'&start='+ start +'&end='+ end+'&id='+ event.id+'&background='+back+'&allday='+allDay ,
type: "POST",
headers: {
"X-CSRF-TOKEN": crsfToken
},
success: function(json) {
console.log("Updated Successfully eventdrop");
},
error: function(json){
console.log("Error al actualizar eventdrop");
}
});
},
eventClick: function (event, jsEvent, view) {
crsfToken = document.getElementsByName("_token")[0].value;
var con=confirm("Esta seguro que desea eliminar el evento");
if(con){
$.ajax({
url: 'eliminaEvento',
data: 'id=' + event.id,
headers: {
"X-CSRF-TOKEN": crsfToken
},
type: "POST",
success: function () {
$('#fc-default').fullCalendar('removeEvents', event._id);
console.log("Evento eliminado");
}
});
}else{
console.log("Cancelado");
}
},
eventMouseover: function( event, jsEvent, view ) {
var start = (event.start.format("HH:mm"));
var back=event.backgroundColor;
if(event.end){
var end = event.end.format("HH:mm");
}else{var end="No definido";
}
if(event.allDay){
var allDay = "Si";
}else{var allDay="No";
}
var tooltip = '<div class="tooltipevent" style="width:200px;height:100px;color:white;background:'+back+';position:absolute;z-index:10001;">'+'<center>'+ event.title +'</center>'+'Todo el dia: '+allDay+'<br>'+ 'Inicio: '+start+'<br>'+ 'Fin: '+ end +'</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
dayClick: function(date, jsEvent, view) {
if (view.name === "month") {
$('#fc-default').fullCalendar('gotoDate', date);
$('#fc-default').fullCalendar('changeView', 'agendaDay');
}
}
});
$("#deps").change(function(event){
// Obtenemos todos datos de departamentos
$.get("calendarInfo/"+event.target.value+"",function(response,state){
console.log(response);
if(response.length < 0) {
// Si seleccionas la primera opcion por defecto "seleccionar" no hace nada
}
else {
console.log(response[0]);
var newEventsList = new Array();
// Nuevo evento
$('#fc-default').fullCalendar('removeEvents');
for(i=0; i < response.length; i++){
newEventsList [i] = new Object();
newEventsList [i]["id"] = response[i].id;
newEventsList [i]["title"] = response[i].titulo;
newEventsList [i]["start"] = response[i].fechaIni;
newEventsList [i]["end"] = response[i].fechaFin;
}
$('#fc-default').fullCalendar('addEventSource', newEventsList);
$('#fc-default').fullCalendar('rerenderEvents');
//console.log('Evento cargado,fin ejecución');
}
});
});
/* AGREGANDO EVENTOS AL PANEL */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefault();
//Get value and make sure it is not null
var val = $("#new-event").val();
if (val.length == 0) {
return;
}
//Create events
var event = $("<div />");
event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("fc-event");
event.html(val);
$('#external-events').prepend(event);
//Add draggable funtionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
});
</script>
@endsection
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\CalendarioEvento;
use App\Http\Requests;
use App\Area;
class CalendarController extends Controller
{
public function index()
{
$data = array(); //declaramos un array principal que va contener los datos
$id = CalendarioEvento::all()->lists('id'); //listamos todos los id de los eventos
$area_id = CalendarioEvento::all()->lists('area_id');
$titulo = CalendarioEvento::all()->lists('titulo'); //lo mismo para lugar y fecha
$fechaIni = CalendarioEvento::all()->lists('fechaIni');
$fechaFin = CalendarioEvento::all()->lists('fechaFin');
$allDay = CalendarioEvento::all()->lists('todoeldia');
$background = CalendarioEvento::all()->lists('color');
$borde = CalendarioEvento::all()->lists('borde');
$count = count($id); //contamos los ids obtenidos para saber el numero exacto de eventos
//hacemos un ciclo para anidar los valores obtenidos a nuestro array principal $data
for($i=0;$i<$count;$i++){
$data[$i] = array(
"area_id"=>$area_id[$i],
"title"=>$titulo[$i], //obligatoriamente "title", "start" y "url" son campos requeridos
"start"=>$fechaIni[$i], //por el plugin asi que asignamos a cada uno el valor correspondiente
"end"=>$fechaFin[$i],
"allDay"=>$allDay[$i],
"backgroundColor"=>$background[$i],
"borderColor"=>$borde[$i],
"id"=>$id[$i]
//"url"=>"cargaEventos".$id[$i]
//en el campo "url" concatenamos el el URL con el id del evento para luego
//en el evento onclick de JS hacer referencia a este y usar el método show
//para mostrar los datos completos de un evento
);
}
json_encode($data); //convertimos el array principal $data a un objeto Json
return $data; //para luego retornarlo y estar listo para consumirlo
}
public function create()
{
//Valores recibidos via ajax
$title = $_POST['title'];
$start = $_POST['start'];
$back = $_POST['background'];
//Insertando evento a base de datos
$evento=new CalendarioEvento;
$evento->fechaIni=$start;
//$evento->fechaFin=$end;
$evento->todoeldia=true;
$evento->color=$back;
$evento->titulo=$title;
$evento->save();
}
public function update()
{
//Valores recibidos via ajax
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$allDay = $_POST['allday'];
$back = $_POST['background'];
$evento=CalendarioEvento::find($id);
if($end=='NULL'){
$evento->fechaFin=NULL;
}else{
$evento->fechaFin=$end;
}
$evento->fechaIni=$start;
$evento->todoeldia=$allDay;
$evento->color=$back;
$evento->titulo=$title;
//$evento->fechaFin=$end;
$evento->save();
}
public function delete()
{
//Valor id recibidos via ajax
$id = $_POST['id'];
CalendarioEvento::destroy($id);
}
public function takeDateDep(Request $request, $area_id)
{
if($request->ajax())
{
$a = new CalendarController();
$a = \DB::table('calendario_eventos')->select('*')->where(['calendario_eventos.area_id' => $area_id])->get();
return response($a);
}
}
public function indexdep()
{
$departamentos = Area::get();
return view('calendar', ['departamentos' => $departamentos]);
}
}
Routes:
//Rutas Calendario
Route::get('cargaEventos{id?}','CalendarController@index');
Route::post('guardaEventos', array('as' => 'guardaEventos','uses' => 'CalendarController@create'));
Route::post('actualizaEventos','CalendarController@update');
Route::post('eliminaEvento','CalendarController@delete');
There is all the necessary code, with that you should be able to do it.
Greetings!