Calendarios a todo color en Oracle APEX 5.0 - Oracle Wiki - Oracle - Toad World

Calendarios a todo color en Oracle APEX 5.0

Oracle Community

Calendarios a todo color en Oracle APEX 5.0

Como no era de otra manera Apex nos sigue sorprendiendo con las nuevas características que tenemos para incorporar a nuestras aplicaciones en APEX.
 
Una de esas características es el Calendario, 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 Workspace 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.
 
Para visualizar mejor el Calendario en nuestra página de Apex, vamos a cambiar la orientación del Menú de navegación ya que por defecto se  muestra como un sidebar.
 
Para ver cómo cambiar la orientación del Menú de Navegación, puedes verlo en éste artículo.
 
Además podemos eliminar la región de la ruta de navegación 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 a Calendario.
 
En la sección Origen, 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 he adicionado los iconos en cada uno de los eventos, para ser mostrados en el calendario.
 
En la sección Apariencia designamos la plantilla como: Blank with Attributes.
 
En la sección Cuadrícula 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:
            Columna: 1
Ampliación de Columna: 10
 
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
-        Mostrar Hora:
 
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.
Instructor: &INSTRUCTOR.
Precio: US$ &COSTO.
Fecha Inicio: &FECHA_INICIO.
Fecha de Finalización: &FECHA_FIN.
 
Nota: Las fechas pueden ser cambiadas sin previo aviso.
 
 
En la opción Arrastrar y Soltar marcamos en dicha opción, para que podamos tener esa funcionalidad en nuestro calendario.
 
Columna de Clave Primaria: ID
 
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 Crear Pantalla basada en Tabla o Vista, seguimos los pasos del asistente el cual al finalizar crea la página 2 como Pantalla Basada en MIS_EVENTOS.
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
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 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.
Formato de Fecha del Calendario
 
Antes de seguir aquí me encontré con una situación algo extraña. Cuando ingresaba las fechas por ejemplo 5-AUG-2015 al 6-AUG-2015 en el calendario solo se marcaba el día 5 y el día 6 no se mostraba marcado, a pesar de que la FECHA_FIN era el día 6 de Agosto.
El problema pasaba por la especificación del tiempo en la fecha de finalización y su respectiva precisión, es decir, el tipo de formato que acepta el calendario es: RRRRMMDDHH24MISS y esto nos indica que estamos pasando la fecha y la hora, si configuramos la fecha de finalización con 0 horas, 0 minutos y 0 segundos significa que no hay tiempo en ese día para mostrar un evento, por ese motivo es que no se muestra en el calendario el ultimo día.
 
 
Para solucionar este problema simplemente podemos adelantar las horas del ultimo día y configurar la fecha como 2015-08-06 18:30:00 (indicando con esa hora que es el cierre del evento) de ese modo en el calendario se mostrará marcado los días 5 y 6 de agosto inclusive.
 
 
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>
 
<p style='text:align: center;'>
<img src="#WORKSPACE_IMAGES#logo-apex/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
 
 
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 asignarle color a los diferentes formatos de eventos y crear las paginas para editar y crear nuevos eventos.
Será hasta la próxima!
3337 6 /
Follow / 31 Mar 2016 at 5:17pm

como podes traducir el calendario de ingles a español?

Follow / 8 Jun 2016 at 9:18pm

Hola Mauricio, tienes que configurar en Globalización (en edición de propiedades de la aplicación)  que el lenguaje primario de la aplicación se el Español. Saludos

Follow / 28 Oct 2016 at 11:49pm

Hola Clarisa, de antemano quería agradecer por compartir tan excelente material. tengo una pequeña consulta.

¿sabes como puedo quitar el Scroll que aparece en el calendario, me gustaría ver todos los días del mes sin tener que hacer uso de esta funcionalidad?

Follow / 31 Oct 2016 at 11:47pm

Hola! me gustaría saber cómo vinculo 2 campos pivote al calendario para guardar varios eventos por departamento por ejemplo.

Les agradecería la ayuda. Saludos

Follow / 5 Nov 2016 at 4:40pm

FABIANCA en la semana voy a subir un post sobre eso y Geannis, no entiendo bien lo que preguntas puedes ser un poquito mas especifico? Saludos