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.


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:

      <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