select\n id,\n nombre_evento,\n fecha_inicio,\n fecha_fin,\n formato,\n case FORMATO\n when 'Clases en Aula' then 'apex-cal-green fa fa-edit'\n when 'Conferencia' then 'apex-cal-blue fa fa-laptop'\n when 'Clases Online' then 'apex-cal-red fa fa-globe'\n when 'Webinar' then 'apex-cal-bluesky fa fa-globe'\n when 'Seminario' then 'apex-cal-black fa fa-laptop'\n when 'Recepci\u00f3n' then 'apex-cal-silver fa fa-edit'\n when 'Workshop' then 'apex-cal-yellow fa fa-edit' \n end as css_class,\n instructor,\n costo \nfrom\n mis_eventos<\/pre>\nEn esta consulta SQL le estamos indicando que se presenten los eventos en distintos colores.<\/p>\n
El Tema Universal dispone de los siguientes CSS para poder darle color a nuestros elementos:<\/p>\n
apex-cal-red\napex-cal-cyan\napex-cal-blue\napex-cal-bluesky\napex-cal-darkblue\napex-cal-green\napex-cal-yellow\napex-cal-silver\napex-cal-brown\napex-cal-lime\napex-cal-white\napex-cal-gray\napex-cal-black\napex-cal-orange<\/pre>\nAdem\u00e1s, el tema soporta Font Awesome y por ello estamos definiendo los iconos en cada uno de los eventos, para ser mostrados en el calendario.<\/p>\n
En la secci\u00f3n Dise\u00f1o<\/strong> (Layout)<\/strong> vamos a exponer el calendario dentro de las 10 primeras columnas y dejamos las \u00faltimas 2 para crear un contenido HTML y mostrar las leyendas del Calendario.<\/p>\nEl template trabaja con 12 columnas y es por ello que vamos a distribuir la informaci\u00f3n de esta manera.<\/p>\n
Para el Calendario:<\/p>\n
Iniciar Nueva Fila: S\u00ed<\/strong><\/p>\nColumna: 1<\/strong><\/p>\nAmpliaci\u00f3n de Columna: 10<\/strong><\/p>\nEn la secci\u00f3n Apariencia<\/strong> (Appearance)<\/strong> designamos la plantilla como: Blank with Attributes.<\/p>\nSeleccionamos Atributos<\/strong> del Calendario en el panel de la izquierda de Presentaci\u00f3n.<\/p>\nEn la secci\u00f3n Configuraci\u00f3n<\/strong> del panel izquierdo de Propiedades, designamos lo siguiente:<\/p>\n\n- Columna de Visualizaci\u00f3n: NOMBRE_EVENTO<\/strong><\/li>\n
- Columna de Fecha de Inicio: FECHA_INICIO<\/strong><\/li>\n
- Columna de Fecha de Finalizaci\u00f3n: FECHA_FIN<\/strong><\/li>\n
- Columna de Clave Primaria: ID<\/strong><\/li>\n
- Mostrar Hora: S\u00ed <\/strong>\n
\n- Formato de Hora: 24 Horas<\/li>\n
- Primera Hora: 9<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
En el recuadro de Informaci\u00f3n Suplementaria, nos permite colocar la informaci\u00f3n que necesitemos mostrar en el caso que usemos el Tooltip<\/strong>.<\/p>\nPor ejemplo podemos ingresar lo siguiente:<\/p>\n
Evento de Tipo: &FORMATO. <\/br><\/em>\nInstructor: &INSTRUCTOR. <\/br><\/em>\nPrecio: US$ &COSTO. <\/br><\/em>\nFecha Inicio: &FECHA_INICIO. <\/br><\/em>\nFecha de Finalización: &FECHA_FIN. <\/br><\/em>\n<\/br><\/em>\nNota: Las fechas pueden ser cambiadas sin previo aviso.<\/em><\/pre>\nEn la opci\u00f3n Arrastrar y Soltar<\/strong> marcamos en S\u00ed<\/strong> dicha opci\u00f3n, para que podamos tener esa funcionalidad en nuestro calendario.<\/p>\nC\u00f3digo PL\/SQL de Arrastrar y Soltar<\/u>:<\/p>\nbegin\n update \"MIS_EVENTOS\"\n set \"FECHA_INICIO\" = to_date(:APEX$NEW_START_DATE, 'YYYYMMDDHH24MISS'),\n \"FECHA_FIN\" = to_date(nvl(:APEX$NEW_END_DATE,:APEX$NEW_START_DATE), 'YYYYMMDDHH24MISS')\n where \"ID\" = :APEX$PK_VALUE;\nend;<\/pre>\nPara que los estilos de la consulta SQL tengan efecto en el calendario necesitamos indicar la Clase de CSS, que ser\u00e1 la que denominamos en la consulta SQL como CSS_CLASS.<\/strong><\/p>\nTenemos la opci\u00f3n de mostrar o no los fines de semana, en este caso no vamos a mostrar los fines de semana porque no hay eventos asignados.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img3.jpg?resize=669%2C510&ssl=1\")
<\/p>\n
En Exportar podemos tildar las 4 opciones (CSV,PDF,iCal y XML).<\/p>\n
Guardamos la p\u00e1gina.<\/p>\n
Crear la funcionalidad de Ver y Editar eventos del Calendario<\/strong><\/h3>\nPara crear la funcionalidad de Ver o Editar eventos del calendario necesitamos en primera instancia crear una p\u00e1gina con el formulario de entrada de datos de la tabla MIS_EVENTOS.<\/p>\n
Desde la p\u00e1gina de inicio de la aplicaci\u00f3n, hacemos clic en el bot\u00f3n Crear P\u00e1gina<\/strong> y seleccionamos Pantalla<\/strong> para despu\u00e9s seleccionar Pantalla Basada en Tabla<\/strong>, seguimos los pasos del asistente el cual al finalizar crea la p\u00e1gina 2 como Pantalla Basada en MIS_EVENTOS.<\/p>\nSeleccionamos que el modo de p\u00e1gina sea un Cuadro de Di\u00e1logo Modal.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img4.jpg?resize=750%2C689&ssl=1\")
<\/p>\n
Editamos los elementos de p\u00e1gina P2_FECHA_INICIO y P2_FECHA_FIN colocando la M\u00e1scara de Formato como DD-MON-YYYY HH24:MI:SS. Esto nos permitir\u00e1 tener en el selector de fechas tambi\u00e9n la hora del d\u00eda. 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.<\/p>\n
Regresamos a la P\u00e1gina 1, en atributos del Calendario, en el panel de la derecha de propiedades, en la secci\u00f3n de Configuraci\u00f3n, hacemos clic en el bot\u00f3n que se encuentra al lado de Ver\/Editar Enlace<\/strong>, se abre la ventana emergente e ingresamos:<\/p>\nTarget<\/p>\n
Tipo: P\u00e1gina en esta aplicaci\u00f3n<\/p>\n
P\u00e1gina: 2<\/p>\n
Definir Elementos:<\/p>\n
Nombre: P2_ID<\/p>\n
Valor: &ID.<\/p>\n
Borrar Estado de Sesi\u00f3n:<\/p>\n
Borrar Cach\u00e9: 2<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img5.jpg?resize=521%2C507&ssl=1\")
<\/p>\n
Hacemos clic en el bot\u00f3n Ok.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img1.jpg?resize=750%2C315&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img2.jpg?resize=750%2C362&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img6.jpg?resize=521%2C506&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img7.jpg?resize=750%2C380&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2018\/09\/img8.jpg?resize=750%2C360&ssl=1\")
<\/p>\n