Comunidad de diseño web y desarrollo en internet online

Crear calendario personalizado en Flash

Cuantas veces nos pidio un cliente que hubiera un calendario en su web, para poder añadir citas, eventos, o sus propias noticias? Ademas tambien es un elemento indispensable en todo weblog que se precie, por eso aprenderemos a hacer uno, y ademas aprenderemos a que se señale el dia de hoy, y los dias en los que haya algo marcado. Para ello me basare [solo en una funcion y en la parte grafica] del calendario que hizo en gran maestro TMeister


Vista previa del calendario

Primero explicaremos el objeto Date, pero solo las funciones basicas que utilizaremos, hay dos tipo de funciones, las getXXX y las setXXX, como su nombre indica una recoge los datos y las otra... los "introduce"?? eso es posible? se puede modificar la fecha? Pues si!! es como las ecuaciones con infinitas soluciones que se estudian en matematikas, dependiendo del valores que les des a unas u otras variables el resto toman un valor correspondiente, para explicarlo mejor... digamos que queremos saber el dia en que nacimos, todos tendremos una fecha, por ejemplo el 15 de Enero de 1986, pero en que dia de la semana? Pues metemos esos datos y recogemos que cayo en Miercoles....

Algunas cosillas para tener en cuenta, los meses, al igual que los dias[de la semana] van del 0-11 y del 0-6 respectivamente, empezando estos ultimos por el Domingo [ya que se usa asi en gran parte del mundo]. Asi mismo los años te los devuelve a partir de 1900, es decir, por ejemplo el 2004 es 104, esto tambien tendremos que tenerlo en cuenta.

Cosas que tendremos que CREAR en el escenario [esto tb se podria hacer por codigo AS, pero no merece la pena]

  • Un cuadro de 7x7 celdillas [en cada celdilla ira un numero, esto es porque la primera fila la usaremos para poner los dias de la semana -Do,Lu,Ma,Mi,Ju,Vi,Sa- y las otras 6 son para los dias del mes]
  • Yo recomiendo unas celdillas de 22x17, donde la fuente "Verdana" a tamaño 10 y negrita queda bastante bien
  • Un MC llamado "activo" con un boton "bt" en su interior
  • Un campo de texto dinamico llamado "tip" con las fuentes Embebidas que utilizaremos como tool_tip para indicar que accion hay tal o cual dia
  • Un campo de texto con la fuente que utilicemos [en este caso Verdana] embebidas
  • Otro campo de texto dinamico "mes_txt", donde pondremos el mes en el que estamos [EJ: "Enero 1986"]
  • Dos botones "sig_mc" y "ant_mc", nos serviran para "navegar" entre los meses

Con todo esto... empecemos:

_lockroot = true;
//linea necesaria siempre
/* esto es para que despues muestre el mes en el que estamos */

ma = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
"Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
/* creamos el objeto date, al no dar parametros se establece la
fecha de hoy - guardamos los datos en variables para tener una
referencia y poder señalar el dia de hoy en el calendario */

hoy = new Date();
diaHoy = hoy.getDate();
mesCurso = mesHoy=hoy.getMonth();
anioCurso = anioHoy=(Number(hoy.getYear())+1900);
Ahora crearemos unas funciones, una hara casillas de dias normales y la otra en vez de casillas hara los botones.
function hazDia(p, col, label) {
/* los parametros son, profundidad del mc, color y etiketa del dia */
//creamos un MC paa dibujar el rectangulo

var tm_mc = algo.createEmptyMovieClip("tempo"+p, p);
tm_mc.beginFill(col);
tm_mc.lineStyle(1, 0xffffff);
tm_mc.lineTo(0, 0);
tm_mc.lineTo(0+22, 0);
tm_mc.lineTo(0+22, 0+17);
tm_mc.lineTo(0, 0+17);
tm_mc.lineTo(0, 0);
// el formato dela fuente que usemos
format = new TextFormat();
format.font = "Verdana";
format.size = 10;
format.bold = true;
format.color = 0xFAB4E7;
//creamos un campo de Texto
tm_mc.createTextField("label_txt", p+100, 2, 0, 0, 0);
tm_mc.label_txt.selectable = false;
tm_mc.label_txt.embedFonts = true;
//aki es donde marcamos el dia que es
tm_mc.label_txt.text = label;
tm_mc.label_txt.autoSize = true;
tm_mc.label_txt.setTextFormat(format);
return tm_mc;
}
function hazBoton(p, label, accion, idb) {
/*muy similar al de hacer dias, profundidad, etiketa del dia, la accion o titulo del mensaje del que hara display, y el idb es la referencia a la entrada del blog de ese dia, por lo demas todo mas o menos igual */
//copiamos el boton

var tm_mc = activo.duplicateMovieClip("tempo"+p, p);
format = new TextFormat();
format.font = "Verdana";
format.size = 10;
format.bold = true;
format.color = 0xFAB4E7;
tm_mc.createTextField("label_txt", p+100, 2, 0, 0, 0);
tm_mc.label_txt.selectable = false;
tm_mc.label_txt.html = true;
tm_mc.label_txt.text = label;
tm_mc.label_txt.autoSize = true;
tm_mc.label_txt.setTextFormat(format);
//aqui le pones el titulo que saldra al pasar por encima del dia
tm_mc.accion = accion;
/*esta funcion es para que haga referencia al blog y buske la entrada, no se explicara en el tutorial, pero se muestra como hacerla */
tm_mc.bt.onRelease = function() {
this.busca_lycos(idb);
};
return tm_mc;
}
Con todo esto viene lo mas facil, hacer el calendario!, esta claro que podriamos ahaerlo a mano pero meter todos y cada uno de los meses....haremos una funcion qu epueda ser llamada cuantas veces queramos, solo pasandole el mes y el año que lo dibuje ella solita
function meses(m, a) {
//eliminamos anteriores botones si hubiera
for (k=0; k<32; k++) {
_root["tempo"+k].removeMovieClip();
}
algo.removeMovieClip();
/*kreamos un mc para dobujar dentro, asi solo tendremos que borrar el mc y no todos los cuadraditos dibujados */
_root.createEmptyMovieClip("algo", 999);
delete elmes;
/* al pasarle parametro al objeto date, situa la fecha en ese mes y año, los parametros son año,mes,dia,horas,minutos,...etc etc, tambien se podria haber hecho con las funciones setYear y setMonth del objeto Date, pero asi resulta mas comodo */
elmes = new Date(a, m);
//recogemos el mes que queremos ver
mesCurso = elmes.getMonth();
//lo mismo con el año
anioCurso = (Number(elmes.getYear())+1900);
//ponemos el display en pantalla
mes_txt.text = ma[mesCurso]+" "+anioCurso;
/*esto nos dira en que fila esta, la fila 0 es la de Do,Lu,Ma,Mi;ju;vi;sa */
encol = 1;
//un bucle para que cree los dias
for (d=1; d<=31; d++) {
//hoyToca, es para ver si hay boton o no
hoyToca = 0;
//usamos el setDate, para el numero del mes
elmes.setDate(d);
/*esto es curioso, tenemos que comprobar si son de el mismo mes, ya que un dia 31 en septiembre [inexistente], lo admite como dia 1 de octubre*/
if (elmes.getMonth() == mesCurso) {
/*miramos en nuestro array de acciones por si hay algun dia que concuerde */
for (k=0; k<dias_activos.length; k++) {
manejo = new Array();
manejo = dias_activos[k].split("/");
if (manejo[0] == d && manejo[1] == (Number(mesCurso)+1) && manejo[2] == anioCurso) {
//si es afirmativo guardamos los datos
hoyToca = d;
enDia = k;
}
}
/*si hoyToca es mayor de cero indica que hay una accion y por lo tanto un botn.... lo llamaremos pues*/
if (hoyToca>0) {
dia = hazBoton(d, d, acciones[enDia], idblog[enDia]);
} else {
/*en caso contrario es un dia normal, comprobaremos si se trata de hoy, comprobando dia, mes y año*/
if (d == diaHoy && mesCurso == mesHoy && anioCurso == anioHoy) {
dia = hazDia(d, "0x950964", d);
} else {
dia = hazDia(d, "0xF25BD5", d);
}
}
dia._x = 22*elmes.getDay();
dia._y = 17*encol;
/*si getDay [devuelve los dias de la semana es 6, indica que llega al fin de una semana, sumaremos a encol para pasar a la linea siguiente */
if (elmes.getDay()>=6) {
encol++;
}
}
}
}
Por ultimo solo nos faltan las acciones de los botones pertinentes para navegar entre los meses y como no, inicializar nuestro calendario
ant_mc.onRelease = function() {
if (mesCurso>0) {
meses(--mesCurso, anioCurso);
} else {
mesCurso = 11;
meses(mesCurso, --anioCurso);
}
};
sig_mc.onRelease = function() {
if (mesCurso<11) {
meses(++mesCurso, anioCurso);
} else {
mesCurso = 0;
meses(mesCurso, ++anioCurso);
}
};
meses(mesHoy, anioHoy);
No creo que tenga que explicarlo, solo dire que para los dias tiene que estar en el "dias_activos" de esta forma 04/09/2004, es decir, dd/mm/aaaa, estar atentos a sumar 1900 cuando recojamos el año, y a sumar 1 cuando comprobemos, ya que para nosotros septiembre es el mes 9, para flash el 8 [todo esto ya esta en el script]

Finalmente os pondre el codigo [pero no comentare] el de la acciones de los botones, es sencillo, solo tendras que copiarlo en el MC "activo"

bt.onRollOver = function() {
_root.tip.autoSize = "left";
_root.tip.text = accion;
_root.tip._x = Math.round(-_root.tip._width-1);
_root.tip._y = _root._ymouse-20;
};
bt.onRollOut = function() {
_root.tip._y = -300;
};
Ejemplo ON-LINE - dentro de mi BLOG-

Mucha gente me pregunta como mete datos en el calendario, fue algo que se me olvido explicar (con detenimiento) pero basicamente tendreis 3 Arrays ....
dias_activos (con las fechas en formato dd/mm/aaaa), acciones(el titulo de la noticia) y idblo (el identificador en la DB). Con un ejemplo quedara mas claro

dias_activos = ["01/01/2005","15/01/2005","31/03/2005"];
acciones = ["Feliz Año Nuevo","El dia de mi cumpleaños","Mañana me suben el ADSL"];
idblog = [3,5,6];

Evidentemente "Feliz Año Nuevo" se corresponde al post del 01/01/2005 y al identificador 3 de la DB. Para cargar estos datos desde DB o XML a Flash podeis hacerlo como preferais, si teneis dudas mirar la seccion de tutoriales, los de LoadVars, XML o AMFPHP

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate