Perú

Lima,Perú

FullCalendar mostrar datos del evento en un formulario modal

Fecha Publicación:       15 de Agosto de 2019
Fecha Modificación:       15 de Agosto de 2019

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.

Leidas : 2007 Veces
Compartir: