Share via Share via... Twitter LinkedIn Facebook Pinterest Telegram WhatsApp Yammer Reddit TeamsCambios recientesSend via e-MailImprimirEnlace permanente × Tabla de Contenidos CALENDARIO Ejemplo de clase definida para calendario Eventos capturables Javascript Eventos capturables VBScript Control del calendario por script CALENDARIO 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-viewmodeEste 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:#FFFFFFColor de fuente. bgcolor:#DFDFDFColor de fondo por defecto. cell-forecolor:#ffffffColor de fuente de la celda. cell-border-width:2Tamañ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:#00000000Color de los días. weekdays-forecolor:#333333,#999999,#999999,#999999,#999999,#999999,#999999Color de la fuente de cada uno de los días: DOMINGO, LUNES, MARTES, MIÉRCOLES, JUEVES, VIERNES, SÁBADO. weekdays-fontsize:5Tamañ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:2Tamaño de los bordes. textfont-bold:truePara hacerlo negrita bold. cell-border-color:#00000000Color borde de la celda. page-swipe:falseSi permite que se desplace los meses o las semanas con el dedo. Por defecto true. border:falseSi tiene borde o no. week-start-hour:0Inicio 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:1Final 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. Ejemplo de clase definida para calendario 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; } Eventos capturables Javascript <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> Eventos capturables VBScript '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> Control del calendario por script // ***** 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>