{{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:
\\
^ 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====
==== Eventos capturables VBScript====
'Este nodo se ejecuta cuando se selecciona un día del mes
'Este nodo se ejecuta cuando se cambia el mes
'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.
==== 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