In this picture I show what is going on, I am using fullcalendar
in this picture I show the selected days
in this sample the first error, the calendar before saving the date is already bringing me a bad data, if I think any date is added a day more, if I create an event for today, it shows me that the end date is tomorrow.
I do not fully understand why it happens ...
the following code is how I have built the calendar
$(document).ready(function() {
var initialLocaleCode = 'es';
var date = new Date();
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth()+1).toString().length == 1 ? "0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
var dd = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();
initThemeChooser({
init: function(themeSystem) {
$('#calendar').fullCalendar({
header: {
language: 'es',
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,listWeek,listDay',
},
displayEventTime: true,
locale: initialLocaleCode,
buttonIcons: true,
weekNumbers: true,
weekNumberTitle: 'Semana',
defaultView: 'listDay',
defaultDate: yyyy+"-"+mm+"-"+dd,
navLinks: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
var check = moment(start).format('YYYY-MM-DD');
var today = moment(new Date()).format('YYYY-MM-DD');
if (check >= today) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD'));
$('#ModalAdd').modal('show');
}
else {
swal({
type: 'error',
title: 'Error',
text: 'No pueden crear ni editar eventos en fechas anteriores a hoy!',
});
}
},
eventConstraint: {
start: moment().format('YYYY-MM-DD'),
end: '2100-01-01' // hard coded goodness unfortunately
},
eventMouseover: function (data, event, view) {
tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#F7F7F7;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;line-height: 200%;box-shadow: 0px 0px 3px #1F1F1F;border: 3px solid #FC0000;border-radius: 6px;">'+'<u>'+ '<div align="center" style="">'+ 'VISTA RÁPIDA DEL EVENTO' + '</u>' + '</div>' +'<u>'+ 'TITULO' +'</u>'+ ': ' + data.title + '</br>' +'<u>'+ 'HORA DEL EVENTO' +'</u>'+ ': ' + data.hora + '</br>' +'<u>'+ 'LUGAR' +'</u>'+ ': ' + data.lugar + '</div>';
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltiptopicevent').fadeIn('500');
$('.tooltiptopicevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltiptopicevent').css('top', e.pageY + -160);
$('.tooltiptopicevent').css('left', e.pageX + -100);
});
},
eventMouseout: function (data, event, view) {
$(this).css('z-index', 8);
$('.tooltiptopicevent').remove();
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
var form = hanyerck || $('#hanyerck')[0];
var keys = Object.keys(event);
while(key = keys.shift()){
try{
var input = form.querySelector('input[name="'+key+'"],select[name="'+key+'"],textarea[name="'+key+'"]');
if(input.nodeName == 'SELECT'){
var option = input.querySelector('[value="'+event[key]+'"]');
if(option != null){
option.setAttribute('selected','selected');
}
}else{
input.value = event[key];
}
}catch(e){}
}
});
},
events: [
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
lugar: '<?php echo $event['lugar']; ?>',
motivo: '<?php echo $event['motivo']; ?>',
fuente: '<?php echo $event['fuente']; ?>',
tipo: '<?php echo $event['tipo']; ?>',
hora: '<?php echo $event['hora']; ?>',
fotografo: '<?php echo $event['fotografo']; ?>',
descripcion: '<?php echo $event['descripcion']; ?>',
reportero: '<?php echo $event['reportero']; ?>',
etiquetas: '<?php echo $event['etiquetas']; ?>',
razonmodificacion: '<?php echo $event['razonmodificacion']; ?>',
creadopor: '<?php echo $event['creadopor']; ?>'
},
<?php endforeach; ?>
]
});//aqui termina el full calendar
},
change: function(themeSystem) {
$('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
}
});// initThemeChooser
$.each($.fullCalendar.locales, function(localeCode) {
$('#locale-selector').append(
$('<option/>')
.attr('value', localeCode)
.prop('selected', localeCode == initialLocaleCode)
.text(localeCode)
);
});
// when the selected option changes, dynamically change the calendar option
$('#locale-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'locale', this.value);
}
});
});//document ready
$('[data-toggle="tooltip"]').tooltip();
</script>