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>

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