Sorry, I don't know where's your problem, here you have my full custom file with the calendar, maybe it help you:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8' />
<script src='phpjs/main.js'></script>
<link href='phpjs/main.css' rel='stylesheet' />
<script src='phpjs/locales/es.js'></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
<style>
[draggable=true] {
cursor: move;
}
.resizable {
overflow: scroll;
resize: both;
max-width: 300px;
max-height: 460px;
border: 1px solid black;
min-width: 50px;
min-height: 50px;
background-color: skyblue;
}
.tooltip {
position: absolute;
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
opacity: 1;
}
.tooltip-inner{
background-color: transparent;
}
#external-events {
position: fixed;
z-index: 2;
top: 100px;
left: 420px;
width: 180px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
}
.demo-topbar + #external-events { /* will get stripped out */
top: 60px;
}
#external-events .fc-event {
cursor: move;
margin: 3px 0;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
// DESCOMENTAR ESTA PARTE PARA PODER HACER DRAG
// var Draggable = FullCalendar.Draggable;
// var containerEl = document.getElementById('external-events');
// var calendarEl = document.getElementById('calendar');
// var checkbox = document.getElementById('drop-remove');
// //Inicializamos los elementos "draggables"
// new Draggable(containerEl, {
// itemSelector: '.fc-event',
// eventData: function(eventEl) {
// return {
// title: eventEl.innerText
// };
// }
// });
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridWeek',
weekNumbers: true,
eventOrder: 'dni_JdO,title',
timeZone: 'Europe/Madrid',
headerToolbar: {
left: 'prev,next today BtnDenegadas BtnPlaniDiaria BtnAddPlani',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
//editable: true,
selectable: true,
//droppable: true, // this allows things to be dropped onto the calendar
// drop: function(info) {
// // is the "remove after drop" checkbox checked?
// if (checkbox.checked) {
// // if so, remove the element from the "Draggable Events" list
// info.draggedEl.parentNode.removeChild(info.draggedEl);
// }
// },
customButtons: {
BtnDenegadas: {
text: 'Vacaciones',
click: function() {
if (calendar.getEventSourceById('Vacaciones')) {
calendar.getEventSourceById('Vacaciones').remove();
}
}
},
BtnPlaniDiaria: {
text: 'Enviar Planificacion',
click: function() {
//var respuesta;
//timeGridDay (diaria), dayGridWeek (semanal)
//alert(calendar.view.type);
// switch (calendar.view.type) {
// case 'timeGridDay':
// var tipo_plani = "diaria";
// break;
// case 'dayGridWeek':
// var tipo_plani = "semanal";
// break;
// default:
//Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
// break;
// }
var fecha_desde = formatDate(calendar.view.activeStart)
var fecha_hasta = calendar.view.activeEnd.setDate(calendar.view.activeEnd.getDate() - 1);
var r = confirm("¿Desea enviar la planificación del " + fecha_desde + " al " + formatDate(fecha_hasta) + "?");
if (r == true) {
// var hoy = new Date();
// if (hoy.getDay() == 5) { //es viernes
// hoy.setDate(hoy.getDate() + 3) //proximo lunes
// }else {
// hoy.setDate(hoy.getDate() + 1) //mañana
// }
//tomorrow.setDate(tomorrow.getDate() + 1);
//alert(hoy);
$.get('PlanificacionEnvio?fecha_desde=' + fecha_desde + '&fecha_hasta=' + formatDate(fecha_hasta));
} else {
}
}
},
BtnAddPlani: {
text: 'Añadir plani',
click: function() {
var fecha_desde = formatDate(calendar.view.activeStart)
var fecha_hasta = calendar.view.activeEnd.setDate(calendar.view.activeEnd.getDate() - 1);
ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'PlanificacionAdd?modal=1'});
}
}
},
eventDidMount: function(info) {
// console.log(info.event.title);
if (info.event.extendedProps.description != '' || info.event.extendedProps.description != 'GUARDIA') {
// console.log(info.event.title + ' color: ' + info.event.extendedProps.color_back + ' otro: ' + info.event.extendedProps.description);
info.event.setProp( 'backgroundColor', info.event.extendedProps.color_back );
}
var evento = info.event.extendedProps.tipo_evento;
var dia = info.event.extendedProps.tipo_dia;
if (evento == 'vacaciones' || (dia != '' && dia != null && dia != 'GUARDIA')) {
//console.log(info.event.extendedProps);
info.event.setProp( 'backgroundColor', '#000000' );
}
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
// eventContent: function(arg, createElement) {
// var innerText
// if (arg.event.extendedProps.description == 'Aguilar Delgado, José Juan') {
// innerText = '<em class=\'far fa-umbrella-beach\'></em> ' + arg.event._def.title
// } else {
// innerText = '<em class=\'far fa-umbrella-beach\'></em> ' + arg.event._def.title
// }
// return innerHTML('i', {}, innerText)
// },
eventClick: function(info) {
//alert(info.event.extendedProps.description);
//alert (user_level);
//si el JdO edita su propia obra, o no hay asignación, o es la manager quien edita o no tiene tipo_dia asignado
if (info.event.extendedProps.dni_JdO == var_dni_Jdo || ((info.event.extendedProps.tipo_dia == '' || info.event.extendedProps.tipo_dia == null) && (info.event.extendedProps.dni_JdO == null || info.event.extendedProps.dni_JdO == '')) || user_level == 4 || user_level == 7) {
switch (info.event.extendedProps.tipo_evento) {
case 'vacaciones':
$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'SaveBtn',url:'SolicitudVacacionesViewedit?id='+info.event.id}));
break;
case 'planificacion':
ew.modalDialogShow({lnk:'this',btn:'SaveBtn',url:'PlanificacionEdit?id='+info.event.id});
//window.open('PlanificacionEdit?id='+info.event.id);
break;
default:
console.log('No hay una opción para ' + info.event.extendedProps.tipo_evento + '.');
}
} else {
if (info.event.extendedProps.JdO == null) {
alert('Operario ya asignado: ' + info.event.extendedProps.tipo_dia );
} else {
alert('Operario ya asignado, contacte con el jefe de obra correspondiente: ' + info.event.extendedProps.JdO );
}
//modal.style.display = "block";
}
},
eventSources: [
//Vacaciones
{
id: 'Vacaciones',
url: '/api/schedule/Vacaciones_Planificacion',
type: 'GET',
extraParams: {
evento: 'Vacaciones_Planificacion',
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
color: 'green', // a non-ajax option
textColor: 'red' // a non-ajax option
},
//Festivos
{
id: 'Festivos',
url: '/api/schedule/Festivos',
type: 'GET',
extraParams: {
evento: 'Festivos',
delegacion: delegacion,
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
display: 'background'
},
//Planificación
{
id: 'Planificacion',
url: '/api/schedule/Planificacion',
type: 'GET',
extraParams: {
evento: 'Planificacion',
delegacion: delegacion,
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
color: 'gray', // a non-ajax option
textColor: 'white' // a non-ajax option
}
],
eventContent: function (arg) {
// alert(arg.event._def.description);
// if (arg.event._def.extendedProps.tipo_evento == 'vacaciones')
var str = arg.event._def.description
switch (arg.event._def.extendedProps.tipo_dia) {
case 'VACACIONES':
text = ' <i class=\"fa fa-bed\" aria-hidden=\"true\"></i> '+ arg.event._def.title;
break;
case 'BAJA':
text = ' <i class=\"fa fa-medkit\" aria-hidden=\"true\"></i> '+ arg.event._def.title;
break;
case 'CURSO':
text = ' <i class=\"fa fa-graduation-cap\" aria-hidden=\"true\"></i> '+ arg.event._def.title;
break;
case 'FESTIVO':
text = ' <i class=\"fa fa-hand-peace-o\" aria-hidden=\"true\"></i> '+ arg.event._def.title;
break;
case 'GUARDIA':
text = ' <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\"></i> '+ arg.event._def.title;
break;
default:
text = arg.event._def.title;
break;
}
//console.log(arg.event._def.extendedProps.tipo_evento);
if (arg.event._def.extendedProps.tipo_evento == 'vacaciones') text = arg.event._def.title + ' (Solicitud vacaciones)';
return {
html: text
};
},
},
);
//cargamos la fecha guardada
if(localStorage.getItem('savedMonth')!=null){
//console.log(localStorage.getItem('savedMonth'));
//console.log(formatDate(localStorage.getItem('savedMonth')));
var fecha = formatDate(localStorage.getItem('savedMonth'));
calendar.gotoDate( fecha );
}
//console.log(calendar.view.currentStart);
calendar.setOption('locale', 'es');
calendar.render();
//guardamos aquà el mes actual en el evento onclick, ya que si lo ponemos con next y previous no funciona.
//Buscar el próximo localStorage para los botones siguiente y anterior. Ver
//https://github.com/fullcalendar/fullcalendar/issues/2939
calendarEl.querySelector('.fc-today-button').addEventListener('click', function() {
localStorage.setItem('savedMonth',calendar.view.activeStart);
//alert('Click');
});
});
function formatDate(date) { //formateamos la fecha start ya que nos daba un error al pasarla a gotoDate
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
// Get the modal
var modal = document.getElementById("myModal");
</script>
</head>
<body>
<a href="javascript:window.print();">Imprimir Calendario</a>
<br /><br />
<!-- DESCOMENTAR ESTA PARTE PARA HACER DRAG DE EVENTOS
<div id='external-events'>
<p>
<strong>Jefes de Obra</strong>
</p>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>AgustÃn MartÃn</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main' color='#black'>Manuel Garrido</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>My Event 3</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>My Event 4</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>My Event 5</div>
</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
-->
<div id="card-JdO">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#card-JdO" href="#card-element-1">Jefes de Obra</a>
</div>
<div id="card-element-1" class="collapse show">
<div class="card-body">
<table class="table table-bordered table-sm">
<tbody>
<tr>
<?php
//creamos las celcas
$db =& DbHelper();
//echo "Responsable: " . CurrentUserId();
$sql = "SELECT CONCAT(apellidos, ', ', nombre) as JdO, codigo_responsable, color FROM `usuarios` WHERE `activo` = 1 AND `delegacion` LIKE 'M502' AND `codigo_responsable` != 'NA'";
$rs_JdO = $db->ExecuteRows($sql);
foreach ($rs_JdO as $JdO) {
echo "<td style='background-color:" . $JdO['color'] . "'>" . $JdO['JdO'] ."</td>";
}
?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var var_dni_Jdo = "<?php echo CurrentUserId(); ?>";
var user_level = "<?php echo CurrentUserLevel(); ?>";
var delegacion = "<?php echo Profile()->Get('delegacion'); ?>";
//guardamos la fecha visitada para volver a la misma cuando refresquemos
// $(document).on('click', '.fc-next-button,.fc-prev-button', function () {
// localStorage.setItem('savedMonth',calendar.view.activeStart);
//console.log(localStorage.getItem('savedMonth'));
// });
</script>
<div id='calendar'></div>
</body>
<!-- Hay que añadir el siguiente script para que funciionen los lookups en v2021. ver
https://www.hkvforums.com/viewtopic.php?f=4&t=49553&p=163680#p163680
-->
<script>
if (!ew.vars.tables.planificacion) ew.vars.tables.planificacion = <?= JsonEncode(SetClientVar("tables", "planificacion")) ?>;
</script>