What I have problems with is changing this line of code that brings me the current time of the pc, I need to change it for the server time so that the last day can not be changed by the user, only by me.
this is the one that uses javascript
defaultDate: yyyy+"-"+mm+"-"+dd,
to do the php I create my variable today that contains the format of the required time date_default_timezone_set ('America / Manaus'); $ hoy = date ("YYYY-MM-DD"); and in the fullcalendar constructor I say that the default time is
defaultDate: <?php echo $hoy; ?>,
and I get the following error in the console and the calendar is not displayed. What is the way to do it?
defaultDate: 2018-Jul-Tue,
$(document).ready(function() {
$('#checkboxeditar').click(function() { // este es el modal? no , esto es un checkbox que habilita/deshabilita campos
if ($(this).is(':checked')) {
document.getElementById("razondeeliminacion").checked = false
$('.titulo').removeAttr('disabled');
$('.importancia').removeAttr('disabled');
$('.lugar').removeAttr('disabled');
$('.motivo').removeAttr('disabled');
$('.fuente').removeAttr('disabled');
$('.hora').removeAttr('disabled');
$('.fotografo').removeAttr('disabled');
$('.descripcion').removeAttr('disabled');
$('.tipo').removeAttr('disabled');
$('.periodista').removeAttr('disabled');
$('.etiquetas').removeAttr('disabled');
$('.razonmodificacion').removeAttr('disabled');
$('#btsubmit').removeAttr('disabled');
} else {
$('.titulo').attr('disabled', 'disabled');
$('.importancia').attr('disabled', 'disabled');
$('.lugar').attr('disabled', 'disabled');
$('.motivo').attr('disabled', 'disabled');
$('.fuente').attr('disabled', 'disabled');
$('.hora').attr('disabled', 'disabled');
$('.fotografo').attr('disabled', 'disabled');
$('.descripcion').attr('disabled', 'disabled');
$('.tipo').attr('disabled', 'disabled');
$('.periodista').attr('disabled', 'disabled');
$('.etiquetas').attr('disabled', 'disabled');
$('.razonmodificacion').attr('disabled', 'disabled');
}
});
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();
$('#calendar').fullCalendar({
header: {
language: 'es',
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
},
defaultDate: yyyy + "-" + mm + "-" + dd,
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD'));
$('#ModalAdd').modal('show');
},
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');
/*
$('[name="title"]').val(event.title);
$('[name="lugar"]').val(event.lugar);
$('[name="motivo"]').val(event.motivo);
$('[name="fuente"]').val(event.fuente);
$('[name="tipo"]').val(event.tipo);
$('[name="hora"]').val(event.hora);
$('[name="fotografo"]').val(event.fotografo);
$('[name="descripcion"]').val(event.descripcion);
$('[name="reportero"]').val(event.reportero);
$('[name="etiquetas"]').val(event.etiquetas);
*/
var form = hanyerck || $('#hanyerck')[0];
var keys = Object.keys(event);
while (key = keys.shift()) {
//console.log(key);
try {
var input = form.querySelector('input[name="' + key + '"],select[name="' + key + '"],textarea[name="' + key + '"]');
console.log(key, event[key], input);
if (input.nodeName == 'SELECT') {
var option = input.querySelector('[value="' + event[key] + '"]');
if (option != null) {
console.log('selcet====================================');
//$(input).find('option').removeAttr('selected');
//$(option).attr('selected','selected').click();
option.setAttribute('selected', 'selected');
// creo que era haci. :) veamos xD
}
} else {
input.value = event[key];
}
} catch (e) {}
}
//console.log(event);
});
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
edit(event);
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc) { // si changement de longueur
edit(event);
},
events: [{
id: '1',
title: 'Titulo 1',
start: '2018-07-01 07:00:00',
end: '2018-07-01 09:00:00',
color: '#beeeef',
lugar: 'Lugar 1',
motivo: 'Motivo 1',
fuente: 'Fuente 1',
tipo: 'Tipo 1',
hora: '07:00',
fotografo: 'Fotografo 1',
descripcion: 'Descripcion 1',
reportero: 'Reportero 1',
etiquetas: 'etiqueta1',
razonmodificacion: 'Razon 1',
},
{
id: '1',
title: 'Titulo 2',
start: '2018-07-10 09:00:00',
end: '2018-07-10 11:00:00',
color: '#ffbbee',
lugar: 'Lugar 2',
motivo: 'Motivo 2',
fuente: 'Fuente 2',
tipo: 'Tipo 2',
hora: '09:00',
fotografo: 'Fotografo 2',
descripcion: 'Descripcion 2',
reportero: 'Reportero 2',
etiquetas: 'etiqueta2',
razonmodificacion: 'Razon 2',
}
]
});
//funcion para mover eventos y cambiarlos de fecha
function edit(event) {
start = event.start.format('YYYY-MM-DD ');
if (event.end) {
end = event.end.format('YYYY-MM-DD ');
} else {
end = start;
}
id = event.id;
Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;
//console.log(event,Event);
$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {
Event: Event,
title: event.title
},
success: function(rep) {
if (rep == 'OK') {
swal({
position: 'top-end',
type: 'success',
title: 'Se ha modificado el dia del evento de forma exitosa',
showConfirmButton: false,
timer: 1500
});
} else {
swal({
type: 'error',
title: 'Algo salio mal...',
html: '<i class="fa fa-phone"></i> <i class="fa fa-whatsapp"></i> 04162910634 '
});
}
}
});
}
});
function mayus(texto) {
let val = texto.value
let result = val.split(' ').map(item => !item.startsWith('#') && item != '' ? '#' + item : item)
texto.value = result.join(' ')
}
.fa-facebook,
.fa-facebook-square {
color: #3b5998
}
.fa-twitter,
.fa-twitter-square {
color: #00aced
}
.fa-google-plus,
.fa-google-plus-square {
color: #dd4b39
}
.fa-youtube,
.fa-youtube-play,
.fa-youtube-square {
color: #bb0000
}
.fa-tumblr,
.fa-tumblr-square {
color: #32506d
}
.fa-vine {
color: #00bf8f
}
.fa-flickr {
color: #ff0084
}
.fa-vimeo-square {
color: #aad450
}
.fa-pinterest,
.fa-pinterest-square {
color: #cb2027
}
.fa-linkedin,
.fa-linkedin-square {
color: #007bb6
}
.fa-instagram {
#color: #517fa4;
}
.fa-spotify {
color: #1ED760;
}
#notification-icon {}
body {
padding-top: 10px;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://prensaalcaldiadearismendi.epizy.com/img/imagendefondo.jpg);
}
#calendar {
max-width: 940px;
}
.col-centered {
float: none;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Calendario de actividades</h1>
<div id="calendar" class="col-centered">
</div>
</div>
</div>
<!-- /.row -->
<!--notification -->
<!-- Modal -->
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="addEvent.php">
<!-- este es para agregar los eventos , mas abajo esta el de editarlos -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Nuevo evento
<div align="center"><span class="fa fa-3x fa-facebook-square"></span><span class="fa fa-3x fa-twitter-square"></span><span class="fa fa-3x fa-google-plus-square"></span><span class="fa fa-3x fa-youtube-square"></span><span class="fa fa-3x fa-tumblr-square"></span></span>
<span class="fa fa-3x fa-vimeo-square"></span>
</span><span class="fa fa-3x fa-pinterest-square"></span><span class="fa fa-3x fa-linkedin-square"></span><span class="fa fa-3x fa-instagram"></span></div>
</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Título</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Debe ser corto" required>
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Importancia</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color" required>
<option value="">SELECCIONE</option>
<option style="color:#000;" value="#000">◼ SIN TRASCENDENCIA</option>
<option style="color:#008000;" value="#008000">◼ IMPORTANTE</option>
<option style="color:#FF0000;" value="#FF0000">◼ ULTIMA HORA</option>
<option style="color:#40E0D0;" value="#40E0D0">◼ EFEMERIDES</option>
<option style="color:#FFD700;" value="#FFD700">◼ OTROS</option>
</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Fecha Inicial</label>
<div class="col-sm-10">
<input type="text" name="start" class="form-control" id="start" readonly>
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">Fecha Final</label>
<div class="col-sm-10">
<input type="text" name="end" class="form-control" id="end" readonly>
</div>
</div>
<div class="form-group">
<label for="lugar" class="col-sm-2 control-label">Lugar</label>
<div class="col-sm-10">
<input type="text" name="lugar" class="form-control" id="lugar" placeholder="lugar del acontecimiento" required>
</div>
</div>
<div class="form-group">
<label for="motivo" class="col-sm-2 control-label">Motivo</label>
<div class="col-sm-10">
<input type="text" name="motivo" class="form-control" id="motivo" placeholder="motivo" required>
</div>
</div>
<div class="form-group">
<label for="fuente" class="col-sm-2 control-label">Fuente</label>
<div class="col-sm-10">
<input type="text" name="fuente" class="form-control" id="fuente" placeholder="fuente" required>
</div>
</div>
<div class="form-group">
<label for="hora" class="col-sm-2 control-label">Hora</label>
<div class="col-sm-10">
<input type="time" name="hora" class="form-control" id="hora" placeholder="hora del suceso" required>
</div>
</div>
<div class="form-group">
<label for="fotografo" class="col-sm-2 control-label">Fotógrafo</label>
<div class="col-sm-10">
<select name="fotografo" class="form-control" id="fotografo" required>
<option value="">SELECCIONE</option>
<option value="ANMAIRYS SALAZAR">◼ ANMAIRYS SALAZAR</option>
<option value="JOSE AGREDAS">◼ JOSE AGREDAS</option>
<option value="AMBOS">◼ TODO EL EQUIPO</option>
</select>
</div>
</div>
<div class="form-group">
<label for="descripcion" class="col-sm-2 control-label">Descripción</label>
<div class="col-sm-10">
<textarea name="descripcion" class="form-control" id="descripcion" placeholder="describa el suceso con detalles" required></textarea>
</div>
</div>
<div class="form-group">
<label for="tipo" class="col-sm-2 control-label">Tipo</label>
<div class="col-sm-10">
<select name="tipo" class="form-control" id="tipo" required>
<option value="">SELECCIONE</option>
<option value="ECONOMIA">◼ ECONOMIA</option>
<option value="CULTURA">◼ CULTURA</option>
<option value="SOCIEDAD">◼ SOCIEDAD</option>
<option value="OTROS">◼ OTROS</option>
</select>
</div>
</div>
<div class="form-group">
<label for="reportero" class="col-sm-2 control-label">Periodista</label>
<div class="col-sm-10">
<select name="reportero" class="form-control" id="reportero" required>
<option value="">SELECCIONE</option>
<option value="EVELYN CHAVEZ">◼ EVELYN CHAVEZ</option>
</select>
</div>
</div>
<div class="form-group">
<label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
<div class="col-sm-10">
<textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="hanyerck" class="form-horizontal" method="POST" action="editEventTitle.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Ver/Modificar Evento</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Título</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control titulo" placeholder="Titulo" disabled>
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Importancia</label>
<div class="col-sm-10">
<select name="color" class="form-control importancia" id="color" disabled>
<option value="">SELECCIONAR</option>
<option style="color:#000;" value="#000">◼ SIN TRASCENDENCIA</option>
<option style="color:#008000;" value="#008000">◼ IMPORTANTE</option>
<option style="color:#FF0000;" value="#FF0000">◼ ULTIMA HORA</option>
<option style="color:#40E0D0;" value="#40E0D0">◼ EFEMERIDES</option>
<option style="color:#FFD700;" value="#FFD700">◼ OTROS</option>
</select>
</div>
</div>
<div class="form-group">
<label for="lugar" class="col-sm-2 control-label">Lugar</label>
<div class="col-sm-10">
<input type="text" name="lugar" class="form-control lugar" id="lugar" placeholder="lugar del acontecimiento" disabled>
</div>
</div>
<div class="form-group">
<label for="motivo" class="col-sm-2 control-label">Motivo</label>
<div class="col-sm-10">
<input type="text" name="motivo" class="form-control motivo" id="motivo" placeholder="motivo" disabled>
</div>
</div>
<div class="form-group">
<label for="fuente" class="col-sm-2 control-label">Fuente</label>
<div class="col-sm-10">
<input type="text" name="fuente" class="form-control fuente" id="fuente" placeholder="fuente" disabled>
</div>
</div>
<div class="form-group">
<label for="hora" class="col-sm-2 control-label">Hora</label>
<div class="col-sm-10">
<input type="time" name="hora" class="form-control hora" id="hora" placeholder="hora del suceso" disabled>
</div>
</div>
<div class="form-group">
<label for="fotografo" class="col-sm-2 control-label">Fotógrafo</label>
<div class="col-sm-10">
<select name="fotografo" class="form-control fotografo" id="fotografo" disabled>
<option value="">SELECCIONE</option>
<option value="ANMAIRYS SALAZAR">◼ ANMAIRYS SALAZAR</option>
<option value="JOSE AGREDAS">◼ JOSE AGREDAS</option>
<option value="AMBOS">◼ AMBOS</option>
</select>
</div>
</div>
<div class="form-group">
<label for="descripcion" class="col-sm-2 control-label">Descripción</label>
<div class="col-sm-10">
<textarea name="descripcion" class="form-control descripcion" id="descripcion" placeholder="describa el suceso" disabled></textarea>
</div>
</div>
<div class="form-group">
<label for="tipo" class="col-sm-2 control-label">Tipo</label>
<div class="col-sm-10">
<select name="tipo" class="form-control tipo" id="tipo" disabled>
<option value="">SELECCIONE</option>
<option value="ECONOMIA">◼ ECONOMIA</option>
<option value="CULTURA">◼ CULTURA</option>
<option value="SOCIEDAD">◼ SOCIEDAD</option>
<option value="OTROS">◼ OTROS</option>
</select>
</div>
</div>
<div class="form-group">
<label for="reportero" class="col-sm-2 control-label">Periodista</label>
<div class="col-sm-10">
<select name="reportero" class="form-control periodista" id="reportero" disabled>
<option value="">SELECCIONE</option>
<option value="EVELYN CHAVEZ">◼ EVELYN CHAVEZ</option>
</select>
</div>
</div>
<div class="form-group">
<label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
<div class="col-sm-10">
<textarea name="etiquetas" class="form-control etiquetas" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;" disabled></textarea>
</div>
</div>
<div class="form-group">
<label for="razonmodificacion" class="col-sm-2 control-label">Razon de la modificacion</label>
<div class="col-sm-10">
<textarea name="razonmodificacion" class="form-control razonmodificacion" id="razonmodificacion" placeholder="escriba la razon de la modificacion, si aparece algo aqui fue modificado el evento" required disabled></textarea>
</div>
</div>
<div class="form-group" id="razondeeliminacion" hidden="true">
<label for="razondeeliminacion" class="col-sm-2 control-label">Razon de la eliminacion</label>
<div class="col-sm-10">
<input name="razondeeliminacion" class="form-control razondeeliminacion" id="razondeeliminacion" placeholder="escriba la razon de la eliminacion" disabled pattern=".{15,}" required title="explique con mas de 15 letras por que desea la eliminar el evento"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">Seleccione una opcion <br/>
<label class="text-danger"><input name="checkbox" type="checkbox" id="checkboxeditar" value="checkbox" onclick="activarcasilla(this)"> Editar Evento</label> <label class="text-danger">
</div>
</div>
</div>
<input type="hidden" name="id" class="form-control" id="id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button id="btsubmit" type="submit" class="btn btn-primary" disabled>Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Bootstrap Core JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- FullCalendar -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-alpha/locale/es.js'></script>
here is the example
result of the first test