No se si te podrá ayudar, pero yo puse un post por problemas que tengo con eventos arrastrables hacia el calendario, pero puedes echarle un ojo a ver si te sirve el código del javascript,.
Con respecto a tu problema, creo que lo mejor que podrías hacer es un CRUD, (create, update,delete,etc..) desde un controlador que llamas en el propio javascript, si no eres capaz podría compartirte el código de mi controlador.
Saludos y buena programación!
Edito:
Vista:
@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
Controlador:
<?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]);
}
}
Rutas:
//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');
Hay tienes todo el codigo necesario, con eso deberias ser capaz de hacerlo.
Saludos!