Pero, les dejo el codigo, al colocar el id="horas" donde va el select, el fullcalendar no aparece.
Desde ya, gracias a todos.
Código HTML:
<link rel="stylesheet" type="text/css" href="utils/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fullCalendar4/packages/core/main.css">
<link rel="stylesheet" type="text/css" href="fullCalendar4/packages/daygrid/main.css">
<link rel="stylesheet" type="text/css" href="fullCalendar4/packages/list/main.css">
<link rel="stylesheet" type="text/css" href="fullCalendar4/packages/timegrid/main.css">
<link rel="stylesheet" href="utils/css/jquery.timepicker.min.css">
<style>
<!-- JS Bootstrap -->
<script src="utils/js/jquery-3.5.1.js"></script>
<script src="utils/js/popper.min.js"></script>
<script src="utils/js/bootstrap.min.js"></script>
<script type="text/javascript" src="fullCalendar4/packages/core/main.js"></script>
<script type="text/javascript" src="fullCalendar4/packages/daygrid/main.js"></script>
<script type="text/javascript" src="fullCalendar4/packages/list/main.js"></script>
<script type="text/javascript" src="fullCalendar4/packages/interaction/main.js"></script>
<script type="text/javascript" src="fullCalendar4/packages/timegrid/main.js"></script>
<script type="text/javascript" src="utils/js/jquery.timepicker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//defaultDate:new Date(2019,8,1), //el mes va de 0 a 11 (esto sirve para inicializar en una fecha)
plugins: [ 'dayGrid','timeGrid', 'interaction', 'list' ],
defaultView:'timeGridWeek',
header:{
left: 'prev,next today miBoton',
center: 'title',
right:'dayGridMonth,timeGridWeek,timeGridDay'
},
customButtons : {
//luego se colocan en el header o footer
miBoton:{
text: "Boton",
click:function(){
$("#modalMenuReserva").modal('toggle');
}
}
},
dateClick:function(info){
$("#fecha").html(info.dateStr);
$("#modalMenuReserva").modal('toggle');
},
slotDuration:"00:15:00",
minTime:"08:00:00",
maxTime:"20:00:00",
allDaySlot: false,
slotLabelInterval : '00:15:00',
slotLabelFormat: function (date){
return date.date.hour.toString().padStart(2, '0') +':'+ date.date.minute.toString().padStart(2,'0');
},
events:'http://localhost:81/hardturn/vista/listarTurnos.php',
eventClick: function(info) {
var data = info.event;
alert('Event: ' + data.title);
}
});
calendar.setOption('locale','Es');
calendar.render();
function cargarHoras1(){
console.log("cargarHoras");
$.ajax({
type:"POST",
url:"selectHorarios.php",
success:function(r){
$('#horas').html(r);
}
})
}
});
</script>
</head>
<body>
</body>
<div class="modal fade" id="modalMenuReserva" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tituloMenuReserva">Nueva Reserva</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" id="LiReservaButon" href="#LiReserva" role="tab" data-toggle="tab">Reserva</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiPago" role="tab" data-toggle="tab">Pago</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiHistPagos" role="tab" data-toggle="tab">Historial de Pagos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiPaciente" role="tab" data-toggle="tab">Paciente</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiFicha" role="tab" data-toggle="tab">Ficha</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiHistPaciente" role="tab" data-toggle="tab">Historial del Paciente</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LiHistReserva" role="tab" data-toggle="tab">Historial Reserva</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="LiReserva">
<div class="form-group">
<div class="form-row">
<div class="col-md-5" id="divBuscadorPaciente" style="border-right: 1px solid #000">
<div class="form-group" style="margin-top: 10px">
<div class="form-row">
<div class="col-md-8">
<div class="form-label-group">
<label for="apellidoCliente" id="apellidoClienteL" class="col-sm-8 control-label">Buscador de Clientes</label>
<input id="apellidoCliente" name="apellidoCliente" type="text" class="form-control" autofocus>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7" id="divNuevaReserva">
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<div class="form-label-group">
<div id="horas" class="form-label-group">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div id="calendar"></div>
</html>
<script type="text/javascript" src="utils/js/jquery.datetimepicker.full.js"></script> Codigo que devuelve el PHP donde hace la consulta la funcion "CargarHoras1"
Código HTML:
<select class="custom-select-lg" id="horaInicio""><option id='horaInicio0' value='8:00'>8:00</option><option id='horaInicio1' value='8:15'>8:15</option><option id='horaInicio2' value='8:30'>8:30</option><option id='horaInicio3' value='8:45'>8:45</option><option id='horaInicio4' value='9:00'>9:00</option><option id='horaInicio5' value='9:15'>9:15</option><option id='horaInicio6' value='9:30'>9:30</option><option id='horaInicio7' value='9:45'>9:45</option><option id='horaInicio8' value='10:00'>10:00</option>
