FullCalendar agregar información del formulario y pasarlo en forma de cintillo

Crea función botón agregar donde recopila la información del formulario y lo convierte en un cintillo

Archivos necesarios:

• Necesitamos lo archivos Modal de Bootstrap
  http://www.unidadvirtual.com/fullcalendar-agregar-modal-de-bootstrap
• Necesitamos los archivos de Fullcalendar
  http://www.unidadvirtual.com/fullcalendar-implementar-plugin-de-jquery

  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="3" cols="5" >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" id="btnAgregar">Agregar</button>
		<button type="button" class="btn btn-secondary">Modificar</button>
  		<button type="button" class="btn btn-secondary">Borrar</button>
        <button type="button" class="btn btn-primary">Cancelar</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:

Cuando hacemos click carga el formulario y dentro del formulario esta el boton agregar

<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	
		
		//-----Inicio Boton Agregar
  		$('#btnAgregar').click(function() {
		   var NuevoEvento={
			title:$('#txtTitulo').val(),
			start:$('#txtFecha').val()+" "+$('#txtHora').val(),
			color:$('#txtColor').val(),
			descripcion:$('#txtDescripcion').val(),
			textColor:"#FFFFFF"
	 		 };
			//agregamos el nuevo evento con renderEvent
		  $('#calendar').fullCalendar('renderEvent',NuevoEvento);     
			//Cerramos el formulario modal con toggle abierto con la fucion dayClick  
	      $('#ModalEventos').modal('toggle');
	       });	
 		//-----Fin Boton Agregar		 
		
		
	});  // function
</script>

See the Pen fullcalendar-agregar-informacion-del-formulario-y-pasarlo-en-forma-de-cintillo by alex huiza (@alextutor) on CodePen.