ActionScript 3: Cómo hacer un Calendario dinámico .fla

Esta vez apareció la necesidad de usar gráficos en flash que utilicen fechas, y como nunca lo había utilizado, me puse a investigar. Después de todo si google todavía usa gráficos en flash para Analytics ¿por qué yo no iba a usarlo en mi humilde proyecto?¿no?

Así, las primeras pruebas exprimiendo las propiedades y metodos del objeto DATE dieron este calendario en actionscript3 desarrollado en muy pocas líneas.

El script que encontrarás a continuación es sólo una base para mostrar fechas, por eso es que utiliza una gráfica muy sencilla y su función puntual es: Dibujar el almanaque mensual, detectar años bisiestos (Febrero con 29 días), muestra el día actual, permite mostrar los meses y años siguientes y posteriores y, al pasar el mouse sobre un día, mostrará la fecha sobre la que estamos pasando.

Sin más preámbulos ni excusas aquí van los pasos para desarrollar este calendario en actionscript3 (de todos modos, al pie de este artículo te dejo el link para descargar el fla):

1- Para crear este calendario en ActionScript3 creamos un movieclip llamado "boton_btn" y otro llamado "dia_mc".

2- Dentro de "dia_mc" tenemos que crear un campo de texto dinámico llamado "numero_txt" con nombre de instancia "numero_txt".

3 - En el escenario ponemos 42 instancias de "dia_mc" (6 filas x 7 columnas) . Estas representarán las semanas del mes de domingo a lunes. Son 42 porque, dependiendo el día en el que empiece el mes y su cantidad de días, el mes tendrá 4, 5 o 6 semanas.

Los nombres de instancia de estos movieClip serán: "d0_mc", "d1_mc", "d2_mc",... "d42_mc".

4 - Además incluímos dos instancias de "boton_btn" con nombre de instancia "bSig_btn" y "bAnt_btn", un campo dinámico con nombre de instancia "mes_txt", otro llamado "diaHoy_txt" y un tercer campo de texto dinámico llamado "diaSel_txt"
Con los botones navegaremos por los meses y años posteriores y anteriores al actual. En los campos de texto irá el mes actual, la fecha de hoy y la fecha seleccionada cada vez que pasamos sobre un día del calendario.

5) Llegamos a la mejor parte: Escribí el codigo de aquí abajo en la línea de tiempo principal (cada bloque de código tiene un comentario para saber de qué se trata:


//BUSCO EL DÍA DE HOY
var hoy:Date = new Date(); //variable que contendrá todos los datos del día
var anio=hoy.fullYear; // año en formato YYYY
var mes=hoy.month; // mes en formato flash (de 0 a 11)
var dia=hoy.date; // día en formato flash (0 a 6)


//CARGO EL FORMULARIO
fCalendario(); //llamo a la función que arma el calendario


//FUNCION PARA EL CALENDARIO
function fCalendario():void {


//CARGO LOS NOMBRES DE LOS MESES EN UN ARRAY (el objeto Date cuenta los meses desde 0 hasta 11)                                                                                                                                 
var meses:Array = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var mesesDias:Array = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var diasemana:Array = new Array("Dom","Lun","Mar","Mie","Jue","Vie","Sab");


//BUSCO BISIESTOS PARA PONERLE 29 DÍAS A FEBRERO
if(anio%4==0 && anio%100!=0 || anio%400==0){ //esta es la formula para detectar bisiestos
mesesDias[1]=29;
}else{
mesesDias[1]=28;
}


//BUSCO EL PRIMER DÍA DEL MES.
var primerdiames:Date = new Date(anio,mes)


//ELIJO LA POSICIÓN EN EL CALENDARIO PARA EL PRIMER DÍA DEL MES.
var primerdia;
switch (primerdiames.day) {
case 0:
primerdia=0;
break;
case 1:
primerdia=1;
break;
case 2:
primerdia=2;
break;
case 3:
primerdia=3;
break;
case 4:
primerdia=4;
break;
case 5:
primerdia=5;
break;
case 6:
primerdia=6;
break;
}


//DIBUJO EL CALENDARIO
for(var i:uint=0;i
var vPos=primerdia+i;
var verDia = "d" + vPos;
root[verDia].alpha=1;
root[verDia].numero_txt.text=i+1;
root[verDia].numero_txt.background=0x990000;
if((i+1)==hoy.date && mes==hoy.month && anio==hoy.fullYear){
root[verDia].alpha=1;
root[verDia].numero_txt.backgroundColor=0xFF9900;
}
}


//MUESTRO EL MES VIGENTE
mes_txt.text = meses[mes] + " de " + anio;


//MUESTRO LA FECHA DE HOY EN EL CUADRO DE TEXTO
diaHoy_txt.text="día de hoy: "+ diasemana[hoy.day] + " " + dia + " de " + meses[hoy.month] + " de " + hoy.fullYear;
}


//BOTON ES PARA ADELANTAR - RETROCEDER
bSig_btn.addEventListener(MouseEvent.CLICK,fSigCalendario);
bAnt_btn.addEventListener(MouseEvent.CLICK,fAntCalendario);
function fSigCalendario(evt:MouseEvent){
for(var i=0;i<41;i++){
var bDia="d"+i;
root[bDia].alpha=0;
root[bDia].numero_txt.text="";
root[bDia].numero_txt.textColor=0x333333;
root[bDia].numero_txt.background=0x990000;
root[bDia].numero_txt.backgroundColor=0xFFFFFF;
}
if(mes==11){
mes=0;
anio=anio+1;
}else{
mes=mes+1;
}
fCalendario();
}
function fAntCalendario(evt:MouseEvent){
for(var i=0;i<41;i++){
var bDia="d"+i;
root[bDia].alpha=0;
root[bDia].numero_txt.text="";
root[bDia].numero_txt.textColor=0x333333;
root[bDia].numero_txt.background=0x990000;
root[bDia].numero_txt.backgroundColor=0xFFFFFF;
}
if(mes==0){
mes=11;
anio=anio-1;
}else{
mes=mes-1;
}
fCalendario();
}


//ACCIONES CUANDO SELECCIONO UN DÍA
for(var i=0;i<42;i++){
var toto="d" + i;
root[toto].addEventListener(MouseEvent.MOUSE_OVER,fTraceDia);
}
function fTraceDia(evt:MouseEvent){
var meses:Array = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
diaSel_txt.text=root[evt.currentTarget.name].numero_txt.text + " de " +meses[mes]+ " de " + anio;
}

Recordá que esto es sólo un ejemplo para ver como funciona el manejo de fechas en actionscript, todo es mejorable en función a tus necesidades.

Por eso te invito a descargar el .fla este ejemplo, mejorarlo y contarme tu experiencia. Suerte.
--------------------------------
Nota: Si este artículo te sirvió, por favor, visitá alguno de los enlaces patrocinados, seguro que ellos tendrán también un montón de cosas útiles.http://www.easy-share.com/1912546245/calendario.rar