wiki:2.-desarrollo-app:2.5.-controles-by-xone:calendario:start

Tabla de Contenidos

Control Calendario

Control Calendario

Introducció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.

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;

}

Con estos atributos se logra un diseño de la siguiente forma:

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