<div class="card-body collapse in">
<div class="card-block">
<div class="row">
<div class="col-md-3">
</div>
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Crear evento</h3>
</div>
<div class="box-body">
<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
<!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
</div>
<!-- /btn-group -->
<div class="input-group">
<input id="new-event" type="text" class="form-control" placeholder="Titulo de evento">
<div class="input-group-btn">
<button id="add-new-event" type="button" class="btn btn-primary btn-flat">Agregar</button>
</div>
<!-- /btn-group -->
</div><br/><br/>
<!-- /input-group -->
{!! Form::open(['route' => ['guardaEventos'], 'method' => 'POST', 'id' =>'form-calendario']) !!}
{!! Form::close() !!}
</div>
</div>
</div>
<div class="col-md-9">
<div id='fc-default'></div>
</div>
</div>
</div>
</div>
<script>
$(function () {
//initialize the external events
function ini_events(ele) {
ele.each(function () {
// create an 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();
//while(reload==false){
$('#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');
}
}
});
/* 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("");
});
Edito: Mi idea seria que en una misma url, tener por ejemplo un botón de menú desplegable, con los diferentes ids que son departamentos, y según el departamento, se carguen las fechas guardadas para las personas en ese departamento, de manera que se refresque el calendario con los datos según dicho id, aunque tampoco me importaría si resulta demasiado complicado tener varios calendarios, pero siempre en la misma url, un poco redundante andar a cargar en distintas urls.. pienso yo. Muchas gracias
//while(reload==false){ Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aqui, pero no se como implementarlo para que carguen los datos.
Y el metodo del controlador:
$('#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:public function () {
$('#fc-default').fullCalendar('removeEvents', event._id);
console.log("Evento eliminado");
}
});
}else{
console.log("Cancelado");
}
},
eventMouseover: functioncojerDatosDep( event,Request jsEvent$request, view ) {
var start = (event.start.format("HH:mm"));
var back=event.backgroundColor;
if(event.end){
var end = event.end.format("HH:mm"$area_id);
}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$request-index', 8);
$('.tooltipevent').remove>ajax();
},
dayClick: function(date, jsEvent, view) {
if (view.name === "month") {
$('#fc-default').fullCalendar('gotoDate', date);
$('#fc-default').fullCalendar('changeView', 'agendaDay');
}
}
});
/* AGREGANDO EVENTOS AL PANEL */
var currColor$a = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser =new $CalendarController("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor$a = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color"\DB: currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefaulttable('calendario_eventos');
//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>select({"background-color": currColor, "border-color": currColor, "color": "#fff"}'*').addClass("fc-event");
event.html(val);
$>where('#external-events')['calendario_eventos.prepend(event);
//Add draggable funtionality
area_id' => ini_events(event$area_id]);
//Remove event from text input
$("#new-event").val>get("");
});
$("#deps").change(function(event){
// Obtenemos todos datos de departamentos
$.get("calendarInfo/"+event.target.value+"",function(response,state){
return if(response.length < 0){}
else{
console.log('EventoS creadoSSSSSSSSSSS');
//Remove event from text input
$('#external-events').prepend(event);
ini_events>json(event$a);
}
});
});
});
Edito 3: He implementado la funcionalidad en el js directamente utilizando el propio codigo que ya tenia antes, pero ahora me devuelve el error :
El nombre del método no coincide con el js porque lo cree para intentar cargar según el id unos eventos u otros, pero el método de cargar datos es el mismo.
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Object.success (calendar:581)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at x (jquery.js:8264)
at XMLHttpRequest.<anonymous> (jquery.js:8605)
Edito: Mi idea seria que en una misma url, tener por ejemploLLevo un botón de menú desplegable, con los diferentes ids que son departamentos, y según el departamento, se carguen las fechas guardadas para las personas en ese departamento,par de manera quedías intentando solucionarlo pero ya no se refresque el calendario con los datos según dicho id, aunque tampoco me importaría si resulta demasiado complicado tener varios calendarios, pero siempre enocurre nada la misma url, un poco redundante andar a cargar en distintas urls.. pienso yo. Muchas graciasverdad
Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos.
Y el metodo del controladorjs(el resto ya es secundario digamos):
public $("#deps").change(function cojerDatosDep(Requestevent){
$request, $area_id) // Obtenemos todos datos de departamentos
$.get("calendarInfo/"+event.target.value+"",function(response,state){
console.log(response);
if($request->ajax()response.length < 0)
{
// Si seleccionas la primera opcion por defecto "seleccionar" no hace nada
}
$a = new CalendarController(); else
{
$a = \DB::table $('calendario_eventos')'#fc->select('*'default')->where(['calendario_eventos.area_id' => $area_id])->getfullCalendar("refetchEvents");
returnfor(i=0; i < response(.length; i++)->json{
events = response;
$($a'#fc-default');.fullCalendar({
} events: JSON.parse(events)
});