Content especial Calendario.
XOne tiene como funcionalidad en sus diseños el uso del calendario, el cual resulta muy útil para la entrada de datos tipo fecha y además de brindar muy buena apariencia a la aplicación.
El calendario que en lugar de ponerlo como colección directamente como se hizo en los inicios, que sale con el diseño por defecto interno del framework y que no se puede cambiar nada de la apariencia visual, se ha definido en forma de content, utilizando el atributo viewmode=“calendarview”.
De esta forma, al ser un content, tenemos una mayor versatilidad a la hora de colocarlo en pantalla.
En adelante, será el calendario en forma de content el que siga desarrollándose, y aquí se describen los atributos que aplican a la hora de cambiar la apariencia visual.
Ejemplo:
<frame name="frcontentcalendario" width="100%" height="30%" bgcolor="#273238" align="center"> <prop name="CuentaClienteCalendario" type="Z" viewmode="calendarview" contents="CuentaClienteCalendario" class="z_calendario" width="90%" height="100%"/> <contents name="CuentaClienteCalendario" src="CuentaClienteCalendario" /> </frame>
Atributos | Descripción |
---|---|
viewmode=“calendarview” | Esto es para el mes. |
calendar-viewmode | Este es un submodo del anterior (Hay que especificar también el atributo anterior viewmode=“calendarview”). Posibles valores “week” y “month”(por defecto), para vista semanal y mensual respectivamente |
forecolor:#FFFFFF | Color de fuente. |
bgcolor:#DFDFDF | Color de fondo por defecto. |
cell-forecolor:#ffffff | Color de fuente de la celda. |
cell-border-width:2 | Tamaño del borde de cada línea. |
cell-align:center | Alineación de la celda. |
align:center | Alineación general del control. |
fontsize:12 | Tamaño de la fuente. |
cell-selected-bgcolor:#00000000 | Color del fondo de la celda seleccionada. |
cell-selected-border-color:#00CC00 | Color del borde de la celda seleccionada. |
weekdays-bgcolor:#00000000 | Color de los días. |
weekdays-forecolor:#333333,#999999,#999999,#999999,#999999,#999999,#999999 | Color de la fuente de cada uno de los días: DOMINGO, LUNES, MARTES, MIÉRCOLES, JUEVES, VIERNES, SÁBADO. |
weekdays-fontsize:5 | Tamaño de los días de la semana. |
weekdays-longname:false | Qué tipo de nombre sale, si el tipo largo o el tipo corto. |
weekdays-align:topleft | Alineación de esos nombres. |
border-width:2 | Tamaño de los bordes. |
textfont-bold:true | Para hacerlo negrita bold. |
cell-border-color:#00000000 | Color borde de la celda. |
page-swipe:false | Si permite que se desplace los meses o las semanas con el dedo. Por defecto true. |
border:false | Si tiene borde o no. |
week-start-hour:0 | Inicio de la hora que se indica en el día, ya que los días se dividen entre 0 a 23:59. |
week-end-hour:1 | Final de la hora que se indica en el día. |
cell-bgcolor=“##FLD_MAP_COLOREMPRESA##“ | Color de la celda. |
cell-other-month-bgcolor=”##FLD_MAP_COLORCALENDARIO_NOMESACTUAL##“ | Color de la celda de los días del otro mes que no es el mes seleccionado. |
cell-selected-forecolor=”##FLD_MAP_COLOREMPRESA##“ | Color de la fuente del día seleccionado. Permite width y height para poner el tamaño, lo ideal sería poner todos los atributos en una clase y asociársela. |
A continuación se muestra como pueden usarse algunos de los atributos para diseño de calendario XOne, estos definidos en una CSS (.z_calendario)
.z_calendario { extends:prop; cell-border-width:0; cell-align:center; align:center; fontsize:11; forecolor:#FFFFFF; bgcolor:#273238; cell-forecolor:#FFFFFF; cell-bgcolor:#273238; cell-other-month-bgcolor:#777777; cell-selected-forecolor:#FABB00; cell-selected-bgcolor:#FFFFFF; cell-selected-border-bgcolor:#000000; cell-border-color:#273238; weekdays-bgcolor:#00000000; /*DOMINGO,LUNES,MARTES,MIERCOLES,JUEVES,VIERNES,SABADO*/ /*weekdays-forecolor:#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF;*/ weekdays-forecolor:#FFFFFF; weekdays-fontsize:5; weekdays-longname:false; weekdays-align:top|left; border-width:3; textfont-bold:true; page-swipe:false; paging-enabled:false; border:false; week-start-hour:0; week-end-hour:1; }
<ondateselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHACALENDAR,MAP_TITLE_MES_MR,MAP_TITLE_ANO_MR"> <action name="runscript"> <param name="DATEVALUE" /> <param name="TIMEVALUE" /> <param name="EVENTVALUE" /> <script language="javascript"> var monthNames = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); selfDataColl.getOwnerObject().MAP_FECHACALENDAR = DATEVALUE; selfDataColl.getOwnerObject().MAP_TITLE_MES_MR = monthNames[DATEVALUE.getMonth()].toString().toUpperCase(); selfDataColl.getOwnerObject().MAP_TITLE_ANO_MR = DATEVALUE.getFullYear().toString(); </script> </action> </ondateselected> <onpageselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHACALENDAR,MAP_TITLE_MES_MR,MAP_TITLE_ANO_MR"> <action name="runscript"> <param name="DATEVALUE" /> <param name="CURRENT" /> <param name="DATEFROM" /> <param name="TOTALDAYS" /> <script language="javascript"> var monthNames = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); selfDataColl.getOwnerObject().MAP_FECHACALENDAR = DATEVALUE; selfDataColl.getOwnerObject().MAP_TITLE_MES_MR = monthNames[DATEVALUE.getMonth()].toString().toUpperCase(); selfDataColl.getOwnerObject().MAP_TITLE_ANO_MR = DATEVALUE.getFullYear().toString(); </script> </action> </onpageselected>
'Este nodo se ejecuta cuando se selecciona un día del mes <ondateselected refresh="true" show-wait-dialog="false" refresh-owner="DatosPoblaciones,MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,MAP_RUTA"> <action name="runscript"> <param name="DATEVALUE" /> <param name="TIMEVALUE" /> <param name="EVENTVALUE" /> <script language="vbscript"> 'Esto es para coger el valor de la fecha del día seleccionado thisDataColl.OwnerObject("MAP_FECHA")= DATEVALUE thisDataColl.OwnerObject("MAP_TITLE_NAMES_MES")=ucase(cstr(monthname(DATEVALUE))) thisDataColl.OwnerObject("MAP_TITLE_ANO")= cstr(year(DATEVALUE)) </script> </action> </ondateselected> 'Este nodo se ejecuta cuando se cambia el mes <onpageselected refresh="true" show-wait-dialog="false" refresh-owner="DatosPoblaciones,MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,MAP_RUTA"> <action name="runscript"> <param name="DATEVALUE" /> <param name="TIMEVALUE" /> <param name="EVENTVALUE" /> <script language="vbscript"> thisDataColl.OwnerObject("MAP_FECHA")= DATEVALUE thisDataColl.OwnerObject("MAP_TITLE_NAMES_MES")=ucase(cstr(monthname(DATEVALUE))) thisDataColl.OwnerObject("MAP_TITLE_ANO")= cstr(year(DATEVALUE)) </script> </action> </onpageselected> 'Esto se ejecuta cuando se van a pintar CADA UNA de las celdas del calendario. Si el script es pesado, puede tardar mucho. 'Se recomienda no utilizar si se requiere velocidad. <oncelldraw> <action name="runscript"> <param name="CELLDATE" /> <script language="VBScript"> 'Poner el script que sea. </script> </action> </oncelldraw>
// ***** JAVASCRIPT ***** self.getContents("GastosCalendar").setVariables("moveto","prev"); //Para ir al mes anterior self.getContents("GastosCalendar").setVariables("moveto","next"); //Para ir al mes siguiente
' ***** VBSCRIPT ***** this.Contents("DatosCalendario").variables("moveto")="prev" 'Para ir al mes anterior this.Contents("DatosCalendario").variables("moveto")="next" 'Para ir al mes siguiente
Ejemplo:
<coll name="ContentdatosCalendario" title="calendario" xloadall="true" sql="select t1.*, case when TIPO='Info: Azul' then '#8AA3FB' when TIPO='Visita: Naranja' then '#FBCC8A' when TIPO='Pedido: Verde' then '#8AFB95' end as MAP_COLORVIEW, case when t1.HORAINI is null then '19:00' else HORAINI end as HORAINI, case when t1.HORAFIN is null then '23:00' else HORAFIN end as HORAFIN, t1.FECHA as MAP_FECHA, t1.DESCRIPCION as MAP_DESCRIPCION from ##PREF##tareas t1" objname="tareas" updateobj="tareas" progid="ASData.CASBasicDataObj"> <group name="HEADER" id="10" class="groupfixed_header"> <frame name="frmtitulo" class="frmsuperior"> <prop name="SALIR" type="B" class="btvolversuper" /> <prop name="MENU" type="TL" class="tlsuper" title="DATOS CALENDARIO" /> <prop name="MAP_COLORACTIVO" type="T" visible="0" /> </frame> </group> <group name="FOOTER" id="0" class="groupfixed_footer"> <prop name="MAP_IDLINEA" type="N" visible="0" /> <prop name="MAP_GROUP" type="N" visible="0" /> <prop name="MAP_TOTAL_PAGES" type="N" visible="0" /> <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior"> <prop name="MAP_CANCELAR" type="B" labelwidth="0" width="100%" bgcolor="#00000000" locked="true" /> </frame> </group> <group name="General" id="1"> <frame name="frmgrid" width="100%"> <prop name="MAP_FECHA" type="D" visible="4" labelwidth="0" width="200p" text-align="center" textfont-size="8" /> <prop name="MAP_DESCRIPCION" type="T" visible="4" labelwidth="0" width="520p" text-align="center" textfont-size="8" newline="false" /> </frame> <frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##"> <prop name="FECHA" type="D" visible="1" datefrom="true" dateto="true" title="Fecha:" class="classdate" /> <prop name="MAP_TIPO" type="T" mapcol-values="Info: Azul,Visita: Naranja,Pedido: Verde" visible="0" /> <prop name="HORAINI" type="TT" mask="Hh#:#Mm" visible="1" timefrom="true" title="Hora Inicio:" class="classtime" /> <prop name="HORAFIN" timeto="true" type="TT" visible="1" mask="Hh#:#Mm" title="Hora Fin:" class="classtime" /> <prop name="TIPO" type="T" showinline="true" class="classT" visible="1" title="Tipo:" linkedto="MAP_TIPO" linkedfield="DATA" onchange="refresh(TIPO)" /> <prop name="DESCRIPCION" type="T" visible="1" title="Descripción:" class="classTMultiline" /> <prop name="MAP_COLORVIEW" type="T" visible="0" colorview="true" /> <prop name="MAP_BUTCANCELAR" type="B" caption="CANCELAR" class="btnButton" method="ExecuteNode(onback)" /> <prop name="MAP_BUTACEPTAR" type="B" caption="ACEPTAR" class="btnButton" method="ExecuteNode(guardar)" newline="false" /> </frame> <!--<frame name="floatadd1" top="900p" left="610p" width="90p" height="90p" floating="true"> <prop name="BTADD1" type="B" visible="1" labelwidth="0" method="ExecuteNode(addcalendario)" width="75p" img="add.png" imgsel="add_click.png" /> </frame>--> </group> <befored-edit> <action name="runscript"> <script language="javascript"> self.MAP_COLORACTIVO = "#666666"; </script> </action> </befored-edit> <create> <action name="runscript"> <script language="javascript"> self.MAP_COLORACTIVO = "#666666"; </script> </action> </create> <ondateselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHA,MAP_TITLE_NAME_MES,MAP_TITLE_ANO,BEdit,BDelete"> <action name="runscript"> <param name="DATEVALUE" /> <param name="TIMEVALUE" /> <param name="EVENTVALUE" /> <script language="javascript"> var mothName = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); selfDataColl.getOwnerObject().MAP_FECHA = DATEVALUE; selfDataColl.getOwnerObject().MAP_TITLE_NAME_MES = mothName[DATEVALUE.getMonth()].toString().toUpperCase(); selfDataColl.getOwnerObject().MAP_TITLE_ANO = DATEVALUE.getFullYear().toString(); var coll = appData.getCollection("ContentTareas"); var obj = coll.findObject("strftime('%Y-%m-%d',t1.FECHA)=strftime('%Y-%m-%d','" + DATEVALUE.toString() + "')"); if ( obj == null){ selfDataColl.getOwnerObject().MAP_IDTAREASELECTED= 0; selfDataColl.getOwnerObject().MAP_VER= 0; }else{ selfDataColl.getOwnerObject().MAP_IDTAREASELECTED = obj.ID; selfDataColl.getOwnerObject().MAP_SELECCIONADO = obj.MAP_DESCRIPCION; selfDataColl.getOwnerObject().MAP_VER = 1; } </script> </action> </ondateselected> <onpageselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,BEdit,BDelete"> <action name="runscript"> <param name="DATEVALUE" /> <param name="CURRENT" /> <param name="DATEFROM" /> <param name="TOTALDAYS" /> <script language="javascript"> var mothName = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); selfDataColl.getOwnerObject().MAP_FECHA = DATEVALUE; selfDataColl.getOwnerObject().MAP_TITLE_NAME_MES = mothName[DATEVALUE.getMonth()].toString().toUpperCase(); selfDataColl.getOwnerObject().MAP_TITLE_ANO = DATEVALUE.getFullYear().toString(); selfDataColl.getOwnerObject().MAP_VER = 0; </script> </action> </onpageselected> <!--<addcalendario show-wait-dialog="false" refresh="true"> <action name="runscript"> <script language="javascript"> var fechainicio = Date.parse(formatDateTime(self.FECHA,2) + " " + self.HORAINI + ":00"); var fechafin = Date.parse(formatDateTime(self.FECHA,2) + " " + self.HORAFIN + ":00"); ui.addCalendarItem("Titulo Tarea byXOne:" + self.TIPO.toString(),"Descripción: " + self.DESCRIPCION.toString(),"Lugar del Evento",fechainicio,fechafin); </script> </action> </addcalendario>--> <onback show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> appData.failWithMessage(-11888,"##EXIT##"); </script> </action> </onback> <guardar show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> self.save(); appData.failWithMessage(-11888,"##EXIT##"); </script> </action> </guardar> </coll>