FullCalendar mostrar datos del evento en un formulario modal

Mostrar un modal con un formulario que nos permita obtener los datos del evento escrito por el usuario  (ver video 10)

Archivos Modal de Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Html

  <div id="calendar">  </div>

<!----------
Inicio mostrar un modal con un formulario que nos permita obtener los datos del evento escrito por el usuario
agregar modificar , eliminar
----------->				
 <div class="modal"  id="ModalEventos" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="descripcionEvento"></div>		  
		  Fecha  		<input type="text" id="txtFecha"><br>
		  Titulo 		<input type="text" id="txtTitulo"><br>
		  Hora 			<input type="text" id="txtHora" value="10:30"><br>
		  <textarea id="txtDescripcion" rows="10" >Descripcion</textarea><br>		  	
		  Color 		<input type="color" id="txtColor"  value="#FF0000"><br>
		  
      </div>

      <!--Este es el pie del modal aqui puedes agregar mas botones-->
      <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>
<!----------
Fin mostrar un modal con un formulario que nos permita obtener los datos del evento escrito por el usuario
----------->				

Script:

<script>
	$(document).ready(function() {		
	 $('#calendar').fullCalendar({           			
		header: {				
			left: 'prev,next today',
			center: 'title',
			right: 'month,basicWeek,basicDay',			 
		},
		locale: 'es',
		 monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
		dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
		dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],			

		//-----Inicio Evento Click
  		dayClick: function(date, jsEvent, view) {
			$("#txtFecha").val(date.format());
  			$("#ModalEventos").modal();
		}
 		//-----Fin Evento Click		 
								 
		 
		});		 // full calendar		
	});  // function
</script>

See the Pen FullCalendar mostrar modal con formulario para obtener datos del evento by alex huiza (@alextutor) on CodePen.