CALENDARIO


Content especial Calendario.

XOne tiene como funcionalidad en sus diseños el uso del calendario, el cual resulta muy útil para la entrada de datos tipo fecha y además de brindar muy buena apariencia a la aplicació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-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.


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;
}


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

Ejemplo:

<coll name="ContentdatosCalendario" title="calendario" xloadall="true"
sql="select t1.*, 
case    when TIPO='Info: Azul' then '#8AA3FB'    when TIPO='Visita: Naranja' then '#FBCC8A'   when TIPO='Pedido: Verde' then '#8AFB95'  end as MAP_COLORVIEW,  
case    when t1.HORAINI is null then '19:00'   else HORAINI end as HORAINI,
case    when t1.HORAFIN is null then '23:00'  else HORAFIN end as HORAFIN,
t1.FECHA as MAP_FECHA,
t1.DESCRIPCION as MAP_DESCRIPCION from ##PREF##tareas t1" objname="tareas" updateobj="tareas" progid="ASData.CASBasicDataObj">
      <group name="HEADER" id="10" class="groupfixed_header">
        <frame name="frmtitulo" class="frmsuperior">
          <prop name="SALIR" type="B" class="btvolversuper" />
          <prop name="MENU" type="TL" class="tlsuper" title="DATOS CALENDARIO" />
          <prop name="MAP_COLORACTIVO" type="T" visible="0" />
        </frame>
      </group>
      <group name="FOOTER" id="0" class="groupfixed_footer">
        <prop name="MAP_IDLINEA" type="N" visible="0" />
        <prop name="MAP_GROUP" type="N" visible="0" />
        <prop name="MAP_TOTAL_PAGES" type="N" visible="0" />
        <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior">
          <prop name="MAP_CANCELAR" type="B" labelwidth="0" width="100%" bgcolor="#00000000" locked="true" />
        </frame>
      </group>
      <group name="General" id="1">
        <frame name="frmgrid" width="100%">
          <prop name="MAP_FECHA" type="D" visible="4" labelwidth="0" width="200p" text-align="center" textfont-size="8" />
          <prop name="MAP_DESCRIPCION" type="T" visible="4" labelwidth="0" width="520p" text-align="center" textfont-size="8" newline="false" />
        </frame>
        <frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">
          <prop name="FECHA" type="D" visible="1" datefrom="true" dateto="true" title="Fecha:" class="classdate" />
          <prop name="MAP_TIPO" type="T" mapcol-values="Info: Azul,Visita: Naranja,Pedido: Verde" visible="0" />
          <prop name="HORAINI" type="TT" mask="Hh#:#Mm" visible="1" timefrom="true" title="Hora Inicio:" class="classtime" />
          <prop name="HORAFIN" timeto="true" type="TT" visible="1" mask="Hh#:#Mm" title="Hora Fin:" class="classtime" />
          <prop name="TIPO" type="T" showinline="true" class="classT" visible="1" title="Tipo:" linkedto="MAP_TIPO" linkedfield="DATA" onchange="refresh(TIPO)" />
          <prop name="DESCRIPCION" type="T" visible="1" title="Descripción:" class="classTMultiline" />
          <prop name="MAP_COLORVIEW" type="T" visible="0" colorview="true" />
          <prop name="MAP_BUTCANCELAR" type="B" caption="CANCELAR" class="btnButton" method="ExecuteNode(onback)" />
          <prop name="MAP_BUTACEPTAR" type="B" caption="ACEPTAR" class="btnButton" method="ExecuteNode(guardar)" newline="false"  />
        </frame>
        <!--<frame name="floatadd1" top="900p" left="610p" width="90p" height="90p" floating="true">
          <prop name="BTADD1" type="B" visible="1" labelwidth="0" method="ExecuteNode(addcalendario)" width="75p" img="add.png" imgsel="add_click.png" />
        </frame>-->
      </group>
      <befored-edit>
          <action name="runscript">
          <script language="javascript">
				self.MAP_COLORACTIVO = "#666666";
			</script>
        </action>
      </befored-edit>
      <create>
          <action name="runscript">
          <script language="javascript">
				self.MAP_COLORACTIVO = "#666666";
			</script>
        </action>
      </create>
      <ondateselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHA,MAP_TITLE_NAME_MES,MAP_TITLE_ANO,BEdit,BDelete">
        <action name="runscript">
          <param name="DATEVALUE" />
          <param name="TIMEVALUE" />
          <param name="EVENTVALUE" />
          <script language="javascript">
                var mothName = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
				selfDataColl.getOwnerObject().MAP_FECHA = DATEVALUE;
				selfDataColl.getOwnerObject().MAP_TITLE_NAME_MES = mothName[DATEVALUE.getMonth()].toString().toUpperCase();
				selfDataColl.getOwnerObject().MAP_TITLE_ANO = DATEVALUE.getFullYear().toString();
				var coll = appData.getCollection("ContentTareas");
				var obj = coll.findObject("strftime('%Y-%m-%d',t1.FECHA)=strftime('%Y-%m-%d','" + DATEVALUE.toString() + "')");
				if ( obj == null){
					selfDataColl.getOwnerObject().MAP_IDTAREASELECTED= 0;
					selfDataColl.getOwnerObject().MAP_VER= 0;
				}else{
					selfDataColl.getOwnerObject().MAP_IDTAREASELECTED = obj.ID;
					selfDataColl.getOwnerObject().MAP_SELECCIONADO = obj.MAP_DESCRIPCION;
					selfDataColl.getOwnerObject().MAP_VER = 1;
				}
			</script>
        </action>
      </ondateselected>
      <onpageselected refresh="true" show-wait-dialog="false" refresh-owner="MAP_FECHA,MAP_TITLE_NAMES_MES,MAP_TITLE_ANO,BEdit,BDelete">
        <action name="runscript">
          <param name="DATEVALUE" />
          <param name="CURRENT" />
          <param name="DATEFROM" />
          <param name="TOTALDAYS" />
          <script language="javascript">
				var mothName = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
				selfDataColl.getOwnerObject().MAP_FECHA = DATEVALUE;
				selfDataColl.getOwnerObject().MAP_TITLE_NAME_MES = mothName[DATEVALUE.getMonth()].toString().toUpperCase();
				selfDataColl.getOwnerObject().MAP_TITLE_ANO = DATEVALUE.getFullYear().toString();
				selfDataColl.getOwnerObject().MAP_VER = 0;
			</script>
        </action>
      </onpageselected>
      <!--<addcalendario show-wait-dialog="false" refresh="true">
        <action name="runscript">
          <script language="javascript">    	
				var fechainicio = Date.parse(formatDateTime(self.FECHA,2) + " " + self.HORAINI + ":00");
				var fechafin = Date.parse(formatDateTime(self.FECHA,2) + " " + self.HORAFIN + ":00");
				ui.addCalendarItem("Titulo Tarea byXOne:" + self.TIPO.toString(),"Descripción: " + self.DESCRIPCION.toString(),"Lugar del Evento",fechainicio,fechafin);    
			</script>
        </action>
      </addcalendario>-->
      <onback show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				appData.failWithMessage(-11888,"##EXIT##");
			</script>
        </action>
      </onback>
      <guardar show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				self.save();
				appData.failWithMessage(-11888,"##EXIT##");
			</script>
        </action>
      </guardar>
    </coll>