{{indexmenu_n>1}}
===== 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:
<code javascript>
  <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>
</code>

\\
^ 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:
{{:wiki:2.-desarrollo-app:2.5.-controles-by-xone:l.-calendario:calendario.png?nolink&350|}}

==== Eventos capturables Javascript====
<code 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>    
</code>


==== Eventos capturables VBScript====
<code vb>
 
'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>
</code>

==== Control del calendario por script ====
<code javascript>
// ***** JAVASCRIPT *****
self.getContents("GastosCalendar").setVariables("moveto","prev");   //Para ir al mes anterior

self.getContents("GastosCalendar").setVariables("moveto","next");   //Para ir al mes siguiente
</code>


<code vb>
' ***** VBSCRIPT *****
this.Contents("DatosCalendario").variables("moveto")="prev"   'Para ir al mes anterior

this.Contents("DatosCalendario").variables("moveto")="next"   'Para ir al mes siguiente
</code>