En ocasiones anteriores ya te hemos mostrado algunos tips, trucos y guías de nuestro framework php favorito Symfony en está oportunidad te mostramos como crear un Calendario de eventos en Symfony 3 con dhtmlxScheduler.

Calendario de eventos en Symfony 3 con dhtmlxScheduler

Un calendario o programador de eventos es una herramienta imprescindible para una empresa, inclusive para una una persona normal, en donde se pueden programar y hacer seguimientos de citas, eventos, tareas, etc. Para ellos haremos uso del programador dhtmlx que es una de las mejores bibliotecas JavaScript para esto. dhtmlxScheduler es un calendario de eventos JS parecido a Google con una amplia gama de vistas y características. Tiene una interfaz de usuario limpia y apariencia personalizable. Tal como indicamos al principio de este artículo, aprenderás cómo crear tu propio Calendario de eventos personalizado en el frontend y el backend con Symfony 3 y dhtmlxscheduler.
Calendario de eventos en Symfony 3 con dhtmlxScheduler

Requisitos

Antes e comenzar para crear nuestro calendario debemos contar con las siguientes librerías:

dhtmlxScheduler

Necesitaremos una copia de la biblioteca del programador dhtmlx (archivo .zip). Esta biblioteca ofrece 2 versiones, la versión de código abierto (Edición estándar) y la Versión de pago (Edición profesional) donde recibe asistencia y una licencia comercial. Desde el archivo zip de origen, solo necesitaremos el código JavaScript, ya que el backend se implementará totalmente con Symfony. Este programador es muy flexible y podemos personalizar muchas cosas de la manera que deseemos, recomendamos leer la documentación también. Puedes descargar cualquiera de las versiones mencionadas aquí. Lo primero que debe hacer, una vez que tenga el archivo zip, es crear un directorio donde guardar la biblioteca. Para está guía, crearemos la carpeta de bibliotecas en el directorio /web de la aplicación Symfony. Por lo tanto, el código fuente de JavaScript será accesible desde tuaplicacion/web/libraries/dhtmlx . No arruinaremos la estructura original del archivo zip descargado, por lo que tendremos en este caso las bases de código de las carpetas y los demos dentro de dhtmlx que podemos usar para verificar los ejemplos.
Relacionado:  Guía para agregar campos personalizados en shopify ¡GRATIS!

moment.js

El archivo principal de JavaScript de Moment.js deberá estar accesible en tuaplicacion/web/libraries/moment.js puedes descargar de aquí

Jquery o cualquier otra biblioteca AJAX personalizada

Usaremos jQuery AJAX para enviar nuestras citas en la vista. Alternativamente, puede escribir su propio código XMLHttpRequest para enviar los datos a su servidor de forma asíncrona con JavaScript o, en caso de que no quiera jQuery, minAjax es bastante útil y funciona de la misma manera que jQuery.

Pasos para crear el calendario

Una vez cubiertos los requerimientos podemos comenzar a escribir el código para nuestro calendario

Paso 1: Implementar la entidad para citas

Nota: Si ya tienes algún diseño de tabla personalizado para tus “citas”, omite este paso y sigue la estructura del controlador en el paso 2. Con el programador podrá programar eventos gráficamente en el lado del cliente, sin embargo, también deben almacenarse en alguna base de datos. Esto se puede lograr con la comunicación con AJAX entre el cliente y el servidor. El objetivo de está guía será conservar algunas clases de citas en una base de datos (MySql, MongoDB, CouchDB, etc.). Nuestro primer trabajo, entonces, es crear la clase Cita para la aplicación. Esta clase puede verse y actuar como deseemos, así que agrega cualquier propiedad o método que te resulte útil. En este ejemplo, nuestra Entidad se generará a partir de la siguiente tabla: citas. La tabla de citas en su base de datos tendrá 5 campos, a saber, id (autoincrement not null), title(columna de texto), description (columna de texto), start_date (datetime column) y end_date (datetime column):
Relacionado:  Footer siempre abajo
De acuerdo con la forma en que trabajes, puedes seguir el proceso para generar los archivos orm y la entidad manualmente o desde tu base de datos. Si estás generando la entidad a partir de una base de datos existente, ahora puedes ejecutar el siguiente comando para generar los archivos ORM: Eso generará nuestro archivo ORM para la tabla de citas con el siguiente resultado en AppBundle/Resources/config/doctrine/Citas.orm.yml: