I'm making a calendar of events with fullcalendar. I'm trying to use a button to add an event to my calendar, but when it comes to doing it, I get the following error in the console.
The piece of code that is executed is the following.
<script>
$(document).ready(function() {
$('#CalendarioWeb').fullCalendar({
header: {
left: 'today,prev,next,Miboton',
center: 'title',
right: 'month,basicWeek, basicDay,agendaWeek,agendaDay'
},
customButtons: {
Miboton: {
text: "Botón 1",
click: function() {
alert("Accion del boton");
}
}
},
dayClick: function(date, jsEvent, view) {
$('#txtFecha').val(date.format());
$("#ModalEventos").modal();
},
eventClick: function(calEvent, jsEvent, view) {
$('#tituloEvento').html(calEvent.title);
$('#descripcionEvento').html(calEvent.descripcion);
$("#exampleModal").modal();
}
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tituloEvento"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="descripcionEvento"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success">Agregar</button>
<button type="button" class="btn btn-success">Modificar</button>
<button type="button" class="btn btn-danger">Borrar</button>
<button type="button" class="btn btn-dafult">cancelar</button>
</div>
</div>
</div>
</div>
<!-- Modal(Agregar, modificar, eliminar) -->
<div class="modal fade" id="ModalEventos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tituloEvento"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="descripcionEvento"></div>
Fecha: <input type="text" id="txtFecha" name="txtFecha" /><br/>
Título: <input type="text" id="txtTitutlo"><br/>
Hora: <input type="text" id="txtHora" value="10:30" /><br/>
Descripcion: <textarea id="txtDescripcion" rows="3"></textarea><br/>
Color: <input type="color" value="#ff0000" id="txtColor"><br/>
</div>
<div class="modal-footer">
<button type="button" id="btnAgregar" class="btn btn-success">Agregar</button>
<button type="button" class="btn btn-success">Modificar</button>
<button type="button" class="btn btn-danger">Borrar</button>
<button type="button" class="btn btn-dafult">cancelar</button>
</div>
</div>
</div>
</div>
<script>
$('#btnAgregar').click(function() {
var NuevoEvento = {
title: $('#txtTitulo').val(),
start: $('#txtFecha').val() + " " + $('txtHora').val(),
color: $('#txtColor').val(),
descripcion: $('#txtDescripcion').val(),
textColor: "#FFFFFF"
};
$('#CalendarioWeb').fullCalendar('renderEvent', NuevoEvento);
$("#ModalEventos").modal('toggle');
});
</script>