Calendarios a todo color en Oracle APEX 18.1

Una de las características que realmente es muy solicitada cuando estamos desarrollando aplicaciones web es la de poder trabajar con los Calendarios.

En Application Express disponemos de esta funcionalidad el cual es una integración nativa del FullCalendar que está basado en JQuery y que en Apex lo conocemos como el Calendario CSS.

El Creador de Aplicaciones trae un asistente integrado para generar un calendario con vistas mensuales, semanales y diarias.

Existe una gran variedad de aplicaciones que necesitan utilizar los calendarios, por ejemplo si queremos mostrar los eventos y cursos que tenemos disponibles en nuestra empresa, es muy útil disponer de un calendario que muestre a los visitantes nuestra disponibilidad académica y social.

En el ejemplo que traigo hoy vamos a crear una tabla referente a Eventos, que nos mostrará los eventos que tenemos disponibles según el formato de presentación (Clases en Aula, Conferencia, Clases Online, Webinar, Seminario, Recepción, Workshop) además de mostrar el instructor a cargo, fecha de inicio y fin del curso y el costo.

De este modo crearemos un Calendario que nos permita visualizar los eventos disponibles por mes diferenciando cada formato por un color diferente.

Crear Tabla en el Taller SQL

Ingresamos a nuestro Espacio de Trabajo en APEX.

Posteriormente, para crear la tabla MIS_EVENTOS, ingresamos a la página de inicio de APEX, hacemos clic en el icono del Taller de SQL y seleccionamos Explorador de Objetos.

En la esquina superior derecha veremos un signo + que nos permitirá crear una nueva tabla por medio de un asistente.

Ingresamos los siguientes datos:

Nombre Tabla: MIS_EVENTOS

ID (PK)             NUMBER(8,0)
NOMBRE_EVENTO       VARCHAR2(255)
FECHA_INICIO        DATE
FECHA_FIN           DATE
FORMATO             VARCHAR2(100)
INSTRUCTOR          VARCHAR2(50)
COSTO               NUMBER(8,2)

Continuamos con el asistente, asignando Clave Primaria como ID a partir de una nueva secuencia, no tenemos ninguna Clave Ajena, no hay restricciones y finalmente creamos la tabla.

Crear Aplicación Demo Calendario

Creamos una aplicación de tipo Escritorio que la llamaremos Calendario de Eventos.

Seleccionamos:

• Tema: Vita – Pizarra
• Navegación: Menú Superior
• Application Icon: Calendario

Y creamos la aplicación.

Además, podemos eliminar la región de la ruta de navegación de la página Inicio para tener más espacio para mostrar el calendario de eventos.

Crear Región de tipo Calendario

Tenemos dos formas de crear el calendario, una es usando el asistente para crear un calendario en una página y la otra es creando un calendario en una región de una página.

En este artículo vamos a crear un calendario en una región, ya que para crear el calendario de página es muy simple de realizar por medio del asistente.

Ingresamos al Diseñador de Páginas de la Página 1 (Inicio) y desde el panel izquierdo de Presentación, creamos una nueva Región.

Estando seleccionada la región Nueva, pasamos al panel de la derecha de propiedades, en la sección Identificación cambiamos el Título a Calendario y el Tipo que sea Calendario.

En la sección Origen (Source), ingresamos la siguiente consulta SQL:

select
  id,
  nombre_evento,
  fecha_inicio,
  fecha_fin,
  formato,
  case FORMATO
        when 'Clases en Aula' then 'apex-cal-green fa fa-edit'
        when 'Conferencia' then 'apex-cal-blue fa fa-laptop'
        when 'Clases Online' then 'apex-cal-red fa fa-globe'
        when 'Webinar' then 'apex-cal-bluesky fa fa-globe'
        when 'Seminario' then 'apex-cal-black fa fa-laptop'
        when 'Recepción' then 'apex-cal-silver fa fa-edit'
        when 'Workshop' then 'apex-cal-yellow fa fa-edit' 
  end as css_class,
  instructor,
  costo 
from
  mis_eventos

En esta consulta SQL le estamos indicando que se presenten los eventos en distintos colores.

El Tema Universal dispone de los siguientes CSS para poder darle color a nuestros elementos:

apex-cal-red
apex-cal-cyan
apex-cal-blue
apex-cal-bluesky
apex-cal-darkblue
apex-cal-green
apex-cal-yellow
apex-cal-silver
apex-cal-brown
apex-cal-lime
apex-cal-white
apex-cal-gray
apex-cal-black
apex-cal-orange

Además, el tema soporta Font Awesome y por ello estamos definiendo los iconos en cada uno de los eventos, para ser mostrados en el calendario.

En la sección Diseño (Layout) vamos a exponer el calendario dentro de las 10 primeras columnas y dejamos las últimas 2 para crear un contenido HTML y mostrar las leyendas del Calendario.

El template trabaja con 12 columnas y es por ello que vamos a distribuir la información de esta manera.

Para el Calendario:

Iniciar Nueva Fila: Sí

Columna: 1

Ampliación de Columna: 10

En la sección Apariencia (Appearance) designamos la plantilla como: Blank with Attributes.

Seleccionamos Atributos del Calendario en el panel de la izquierda de Presentación.

En la sección Configuración del panel izquierdo de Propiedades, designamos lo siguiente:

• Columna de Visualización: NOMBRE_EVENTO
• Columna de Fecha de Inicio: FECHA_INICIO
• Columna de Fecha de Finalización: FECHA_FIN
• Columna de Clave Primaria: ID
• Mostrar Hora: Sí
  • Formato de Hora: 24 Horas
  • Primera Hora: 9

En el recuadro de Información Suplementaria, nos permite colocar la información que necesitemos mostrar en el caso que usemos el Tooltip.

Por ejemplo podemos ingresar lo siguiente:

Evento de Tipo: &FORMATO. </br>
Instructor: &INSTRUCTOR. </br>
Precio: US$ &COSTO. </br>
Fecha Inicio: &FECHA_INICIO. </br>
Fecha de Finalización: &FECHA_FIN. </br>
</br>
Nota: Las fechas pueden ser cambiadas sin previo aviso.

En la opción Arrastrar y Soltar marcamos en Sí dicha opción, para que podamos tener esa funcionalidad en nuestro calendario.

Código PL/SQL de Arrastrar y Soltar:

begin
   update "MIS_EVENTOS"
     set "FECHA_INICIO" = to_date(:APEX$NEW_START_DATE, 'YYYYMMDDHH24MISS'),
        "FECHA_FIN" = to_date(nvl(:APEX$NEW_END_DATE,:APEX$NEW_START_DATE), 'YYYYMMDDHH24MISS')
   where "ID" = :APEX$PK_VALUE;
end;

Para que los estilos de la consulta SQL tengan efecto en el calendario necesitamos indicar la Clase de CSS, que será la que denominamos en la consulta SQL como CSS_CLASS.

Tenemos la opción de mostrar o no los fines de semana, en este caso no vamos a mostrar los fines de semana porque no hay eventos asignados.

En Exportar podemos tildar las 4 opciones (CSV,PDF,iCal y XML).

Guardamos la página.

Crear la funcionalidad de Ver y Editar eventos del Calendario

Para crear la funcionalidad de Ver o Editar eventos del calendario necesitamos en primera instancia crear una página con el formulario de entrada de datos de la tabla MIS_EVENTOS.

Desde la página de inicio de la aplicación, hacemos clic en el botón Crear Página y seleccionamos Pantalla para después seleccionar Pantalla Basada en Tabla, seguimos los pasos del asistente el cual al finalizar crea la página 2 como Pantalla Basada en MIS_EVENTOS.

Seleccionamos que el modo de página sea un Cuadro de Diálogo Modal.

Editamos los elementos de página P2_FECHA_INICIO y P2_FECHA_FIN colocando la Máscara de Formato como DD-MON-YYYY HH24:MI:SS. Esto nos permitirá tener en el selector de fechas también la hora del día. Si no queremos cambiar el formato de nuestras fechas podemos crear un elemento de tipo oculto como fecha y transferir la fecha de inicio y fin al elemento oculto.

Regresamos a la Página 1, en atributos del Calendario, en el panel de la derecha de propiedades, en la sección de Configuración, hacemos clic en el botón que se encuentra al lado de Ver/Editar Enlace, se abre la ventana emergente e ingresamos:

Target

Tipo: Página en esta aplicación

Página: 2

Definir Elementos:

Nombre: P2_ID

Valor: &ID.

Borrar Estado de Sesión:

Borrar Caché: 2

Hacemos clic en el botón Ok.

Crear la Funcionalidad de Añadir Eventos al Calendario

Para crear esta página podemos simplemente hacer una copia de la página 2 y colocar que sea página número 3.

Estando en el Diseñador de Páginas de la página 2, en el menú Crear (+)   hacemos clic y seleccionamos Página como Copia asignamos como página 3 y seguimos el asistente para duplicar la página.

Desde el Diseñador de Páginas de la página 3 seleccionamos que el modo de página sea un Cuadro de Diálogo Modal. Luego en el panel derecho de propiedades, en la sección Seguridad, necesitamos indicar en “Protección de Acceso a Página” como No Restringido, luego guardamos la página.

Regresamos a la Página 1 y configuramos el acceso a la página 3. Para ello hacemos clic en Atributos del Calendario y luego pasamos al panel derecho de propiedades y en Crear Enlace hacemos clic en el botón para configurar los siguientes datos:

Target

Tipo: Página en esta aplicación

Página: 3

Definir Elementos:

Nombre: P3_FECHA_INICIO

Valor: &APEX$NEW_START_DATE.

Nombre: P3_FECHA_FIN

Valor: &APEX$NEW_END_DATE.

Borrar Estado de Sesión:

Borrar Caché: 3

Con esto estamos permitiendo el formulario cargue la fecha de inicio y la fecha de fin, según donde se haya hecho clic en el calendario. Está demás decir que la fecha fin será la misma que la de inicio, porque el clic se realiza para un día específico.

Podemos ejecutar la aplicación y crear eventos para mostrarlo en el calendario.

Crear Contenido Estático HTML para mostrar la Leyenda del Calendario

Desde el Diseñador de Páginas de la Página 1 creamos una nueva región que la llamaremos Leyendas del Calendario y en Tipo asignar Contenido Estático.

En el recuadro Texto ingresamos el siguiente contenido HTML, que simplemente es una tabla con dos columnas y 7 filas, en la cual la primera columna indica el color del evento y en la segunda columna nos indican el tipo de evento asociado al color.

<p> Cada evento o formación tiene un color específico dentro del calendario. </p>
<table>
<tbody>
<tr>
<td style="background-color: #2ECC71; width: 30px;"></td>
<td style="padding-left: 8px;"> Clases en Aula </td>
</tr>
<tr>
<td style="background-color: #4183D7; width: 30px;"></td>
<td style="padding-left: 8px;"> Conferencia </td>
</tr>
<tr>
<td style="background-color: #D91E18; width: 30px;"></td>
<td style="padding-left: 8px;"> Clases Online </td>
</tr>
<tr>
<td style="background-color: #6BB9F0; width: 30px;"></td>
<td style="padding-left: 8px;"> Webinar</td>
</tr>
<tr>
<td style="background-color: #000000; width: 30px;"></td>
<td style="padding-left: 8px;"> Seminario </td>
</tr>
<tr>
<td style="background-color: #BDC3C7; width: 30px;"></td>
<td style="padding-left: 8px;"> Recepción </td>
</tr>
<tr>
<td style="background-color: #F1C40F; width: 30px;"></td>
<td style="padding-left: 8px;"> Workshop </td>
</tr>
</tbody>
</table>
</br>
</br>
<p style="text:align: center;">
<img src="#APP_IMAGES#apex.png" width="180px"/>
</p>

Para que dicho contenido estático se presente al lado del calendario debemos ir a propiedades y en la sección Apariencia:

Para el Texto de las Leyendas:

Iniciar Nueva Fila: No

Columna: 11

Ampliación de Columna: Automático

Recordemos de subir una imagen en nuestro espacio de trabajo ya que estamos llamando a una imagen en nuestro código HTML:

<img src="#APP_IMAGES#apex.png" width="180px"/>

Guardamos la página y ejecutamos la aplicación y podemos ver el resultado de nuestro calendario de eventos después de haber ingresado varios eventos de diferentes formatos.

Conclusión

Hemos aprendido como crear un Calendario de tipo Región, como asignarles color a los diferentes formatos de eventos y crear las páginas para editar y crear nuevos eventos.

¡Será hasta la próxima!