AS3 – Útiles – Calendario dinamico Open source con varios idiomas, Español, Ingles, Catalan, frances etc. para flash

Flash As3 Open source dynamic calendar with support for multiple languages, English, Spanish, Catalan, French etc.

Las descargas y agradecimientos al final del post. / Downloads and acknowledgments at the end of the post.

El siguiente ejemplo simple mostraría un calendario con la configuración por defecto

import flash.events.Event;
import flash.events.MouseEvent;
import com.xavirobot.componentes.calendario.Calendario;

var calendar:Calendario = new Calendario();
addChild(calendar);

var txt1:TextInput = new TextInput();
addChild(txt1);

button.addEventListener(MouseEvent.CLICK, onClic);
function onClic(e:Event):void {
    calendar.Open(txt1,button.x,button.y);
}

import flash.events.Event;

import flash.events.MouseEvent;

import com.xavirobot.componentes.calendario.Calendario;

var calendar:Calendario = new Calendario();

addChild(calendar);

var txt1:TextInput = new TextInput();

addChild(txt1);

button.addEventListener(MouseEvent.CLICK, onClic);

function onClic(e:Event):void {

calendar.Open(txt1,button.x,button.y);

}

Podemos asignar la misma instancia del calendario a múltiples botones y campos de texto sin
necesidad de crear nuevas instancias

El calendario puede configurarse mediante el constructor especificando los parámetros necesarios

public final function Calendario(
		   language        : String = "ES"     , margins         : int  = 5        ,
		   cellWidth       : int    = 22       , cellHeight      : int  = 22       ,
		   spaceCells      : int    = 1        , round           : int  = 10       ,
		   cellRound       : int    = 7        , lineColor       : uint = 0xc5e8f7 ,
		   baseColor1      : uint   = 0xffffff , baseColor2      : uint = 0xf7f7f7 ,
		   navColor        : uint   = 0x000000 , cellColorEmpty  : uint = 0xbfbfbf ,
		   cellColorBase1  : uint   = 0xf4f4f4 , cellColorBase2  : uint = 0xdedede , 
		   cellColorToday1 : uint   = 0xeed513 , cellColorToday2 : uint = 0xff6600 , 
		   cellColorOver1  : uint   = 0xbde5f2 , cellColorOver2  : uint = 0x8fd3e7 ,
		   cellColorText   : uint   = 0x000000 , dateColorText   : uint = 0x000000){

public final function Calendario(

language : String = "ES" , margins : int = 5 ,

cellWidth : int = 22 , cellHeight : int = 22 ,

spaceCells : int = 1 , round : int = 10 ,

cellRound : int = 7 , lineColor : uint = 0xc5e8f7 ,

baseColor1 : uint = 0xffffff , baseColor2 : uint = 0xf7f7f7 ,

navColor : uint = 0x000000 , cellColorEmpty : uint = 0xbfbfbf ,

cellColorBase1 : uint = 0xf4f4f4 , cellColorBase2 : uint = 0xdedede ,

cellColorToday1 : uint = 0xeed513 , cellColorToday2 : uint = 0xff6600 ,

cellColorOver1 : uint = 0xbde5f2 , cellColorOver2 : uint = 0x8fd3e7 ,

cellColorText : uint = 0x000000 , dateColorText : uint = 0x000000){

language -> Debe contener uno de los siguientes valores – US, ES, CA, FR, IT, PT, DE
margins -> Margenes del calendario
cellWidth -> Ancho de las celdas
cellHeight -> Alto de las celdas
spaceCells -> Espacio entre celdas
Round -> Redondeado de las esquinas del calendario
cellRound -> Redondeado de las esquinas de las celdas
lineColor -> Color de contorno del calendario
baseColor1 -> Color radial de fondo del calendario (Se fusiona con baseColor2)
baseColor2 -> Color radial de fondo del calendario (Se fusiona con baseColor1)
navColor -> Color de los botones para pasar al mes siguiente o anterior
cellColorEmpty -> Color de las celdas que no disponen de fecha
cellColorBase1 -> Color de la celda (Se fusiona con cellColorBase2)
cellColorBase2 -> Color de la celda (Se fusiona con cellColorBase1)
cellColorToday1 -> Color linear de la celda que marca la fecha actual (Se fusiona con cellColorToday2)
cellColorToday2 -> Color linear de la celda que marca la fecha actual (Se fusiona con cellColorToday1)
cellColorOver1 -> Color linear de la celda al pasar con el raton por encima (Se fusiona con cellColorOver2 )
cellColorOver2 -> Color linear de la celda al pasar con el raton por encima (Se fusiona con cellColorOver1)
cellColorText -> Color del texto de las celdas
DateTextColor -> Color del texto que muestra el mes y el año

La clase también dispone del método Open que requiere los siguiente parámetros

public function Open(txtObj:TextInput, X:int=0, Y:int=0, dir:String="RD", onRollOutHide:Boolean = true ):void {}

1	public function Open(txtObj:TextInput, X:int=0, Y:int=0, dir:String="RD", onRollOutHide:Boolean = true ):void {}

txtObj:TextInput, -> Objeto Campo de texto de tipo input al que se copiara la fecha seleccionada en el calendario
X:int=0, -> Posicion X a partir de donde el calendario sera mostrado
Y:int=0, -> Posicion X a partir de donde el calendario sera mostrado
dir:String=”RD”, -> Direccion respecto a las posiciones dadas X e Y de los parametros anteriores en la que sera mostrado el calendario, los valores posibles son “RD” = Derecha y abajo. “RU” = Derecha y Arriba. “LD” = Izqueirda y Abajo. “LU” = Izquierda y Arriba. El valor por defecto es “RD”.
onRollOutHide:Boolean = true -> Establece si el calendario se cerrara automaticamente cuando el raton se salga fuera del area del calendario, si se establece en false el calendario no se cerrara hasta que seleccionemos una fecha.

Además de pasar los parámetros en el constructor también es posible configurar varios parámetros de manera independiente antes de llamar al método Open

calendar.ceW = 32;
calendar.ceH = 32;
calendar.lan = "IT";
calendar.Open(txtObject,100,100);

calendar.ceW = 32;

calendar.ceH = 32;

calendar.lan = "IT";

calendar.Open(txtObject,100,100);

También existe otro método de pasar los parámetros mediante el método setSkin.
setSkin acepta una cadena con todos los parámetros separados por un espacio (el orden de los parámetros es importante)

calendar.setSkin = "US 5 22 22 1 10 5 0x0099ff 0xffcc00 0xff6600 0xffffff 0xcccccc 0x00ff00 0x009900 0xffcc00 0xff9900 0x000000 0x000066 0xffffff 0xffffff";
calendar.Open(txtObject,100,100);

1 2	calendar.setSkin = "US 5 22 22 1 10 5 0x0099ff 0xffcc00 0xff6600 0xffffff 0xcccccc 0x00ff00 0x009900 0xffcc00 0xff9900 0x000000 0x000066 0xffffff 0xffffff"; calendar.Open(txtObject,100,100);

La última configuración pasada al calendario es la que prevalece si el calendario vuelve a abrirse sin configurarse

Para probar diferentes combinaciones de colores de manera fácil existe un editor de skins en la descarga que permite pre visualizar y copiar el código del skin

Ejemplo de la clase:

This movie requires Flash Player 9

Editor:

This movie requires Flash Player 9

Codigo Ejemplo:

import flash.events.Event;
import flash.events.MouseEvent;
import com.xavirobot.componentes.calendario.Calendario;
/* 
* @author Javier Vicente Medina ->http://jvm.bricobit.com (2012)
*/

//Default params
var a01 : String = "ES"     ; //languages -> US, ES, CA, FR, IT, PT, DE
var a02 : int    = 10       ; //margins
var a03 : int    = 35       ; //cellWidth
var a04 : int    = 35       ; //cellHeight
var a05 : int    = 1        ; //spaceCells
var a06 : int    = 10       ; //Round Corner calendar
var a07 : int    = 7        ; //Round Corner Cells
var a08 : uint   = 0xc5e8f7 ; //lineColor - Color contour line calendar
var a09 : uint   = 0xffffff ; //baseColor1 (Radial Gradient background)Inner
var a10 : uint   = 0xf7f7f7 ; //baseColor2 (Radial Gradient background)Outer
var a11 : uint   = 0x000000 ; //navColor (Next && Preview month buttons)
var a12 : uint   = 0xbfbfbf ; //cellColorEmpty
var a13 : uint   = 0xf4f4f4 ; //cellColorBase1 (Lineat Gradient)
var a14 : uint   = 0xdedede ; //cellColorBase2 (Linear Gradient)
var a15 : uint   = 0xeed513 ; //cellColorToday1 (Lineat Gradient)
var a16 : uint   = 0xff6600 ; //cellColorToday2 (Lineat Gradient)
var a17 : uint   = 0xbde5f2 ; //cellColorOver1 (Lineat Gradient)
var a18 : uint   = 0x8fd3e7 ; //cellColorOver2 (Lineat Gradient)
var a19 : uint   = 0x000000 ; //cellColorText
var a20 : uint   = 0x000000 ; //DateTextColor
//ONLY ONE INSTANCE FOR ALL BUTTONS

//Al crear la instancia podemos especificar todos los parametros o ninguno
var calendar:Calendario = new Calendario(a01,a02,a03,a04,a05,a06,a07,a08,a09,a10,a11,a12,a13,a14,a15,a16,a17,a18,a19,a20);
addChild(calendar);
//----------------------------------------------
cal1.addEventListener(MouseEvent.CLICK, onCal1);
function onCal1(e:Event):void {
	calendar.setSkin = skinBlueBase;
	calendar.Open(txt1,cal1.x,cal1.y);
}
//----------------------------------------------
cal2.addEventListener(MouseEvent.CLICK, onCal2);
function onCal2(e:Event):void {
	//Podemos especificar que aparezcal hacia la izquierda y abajo "LD"
	//Podemos especificar parametros en concreto por separado
	calendar.ceW = 40;
	calendar.ceH = 40;
	calendar.Open(txt2,cal2.x+cal2.width,cal2.y,"LD");
}
//----------------------------------------------
cal3.addEventListener(MouseEvent.CLICK, onCal3);
function onCal3(e:Event):void {
	//podemos pasar todos los parametros mediante
	//una cadena separada por espacios(se puede utilizar el editor
	//de skins
	calendar.setSkin = skinAltoContraste;
	//Si hacemos rollout no se cierra
	calendar.Open(txt3,cal3.x,cal3.y,"RD",false);
}
//----------------------------------------------
cal4.addEventListener(MouseEvent.CLICK, onCal4);
function onCal4(e:Event):void {
	calendar.ceW = 15;
	calendar.ceH = 15;
	calendar.lan = "US";
	//podemos decir que se cierre la hacer un rollOut
	calendar.Open(txt4,cal4.x+cal4.width,cal4.y+cal4.height,"LU",true);
}
//----------------------------------------------

cal5.addEventListener(MouseEvent.CLICK, onCal5);
cal5.buttonMode = true;
function onCal5(e:Event):void {
	calendar.setSkin = skinXavirobot;
	calendar.Open(txt5,cal5.x,cal5.y,"RU",true);
}
//----------------------------------------------
//Ejemplos de skins creados con el editor de skins
var skinBlueBase:String ="US 5 32 32 1 10 7 0xc5e8f7 0xffffff 0xf7f7f7 0x000000 0xbfbfbf 0xf4f4f4 0xdedede 0xeed513 0xff6600 0xbde5f2 0x8fd3e7 0x000000 0x000000"; 
var skinAltoContraste:String = "US 5 22 22 1 10 5 0xffffff 0x000000 0x000000 0xffffff 0xe4e4e4 0x000000 0x757575 0xffcc00 0xff9900 0xf7ef41 0xfaeb41 0xffffff 0xffffff";
var skinXavirobot:String ="US 5 22 22 1 10 5 0x0099ff 0xffcc00 0xff6600 0xffffff 0xcccccc 0x00ff00 0x009900 0xffcc00 0xff9900 0x000000 0x000066 0xffffff 0xffffff";

import flash.events.Event;

import flash.events.MouseEvent;

import com.xavirobot.componentes.calendario.Calendario;

* @author Javier Vicente Medina ->http://jvm.bricobit.com (2012)

//Default params

var a01 : String = "ES" ; //languages -> US, ES, CA, FR, IT, PT, DE

var a02 : int = 10 ; //margins

var a03 : int = 35 ; //cellWidth

var a04 : int = 35 ; //cellHeight

var a05 : int = 1 ; //spaceCells

var a06 : int = 10 ; //Round Corner calendar

var a07 : int = 7 ; //Round Corner Cells

var a08 : uint = 0xc5e8f7 ; //lineColor - Color contour line calendar

var a09 : uint = 0xffffff ; //baseColor1 (Radial Gradient background)Inner

var a10 : uint = 0xf7f7f7 ; //baseColor2 (Radial Gradient background)Outer

var a11 : uint = 0x000000 ; //navColor (Next && Preview month buttons)

var a12 : uint = 0xbfbfbf ; //cellColorEmpty

var a13 : uint = 0xf4f4f4 ; //cellColorBase1 (Lineat Gradient)

var a14 : uint = 0xdedede ; //cellColorBase2 (Linear Gradient)

var a15 : uint = 0xeed513 ; //cellColorToday1 (Lineat Gradient)

var a16 : uint = 0xff6600 ; //cellColorToday2 (Lineat Gradient)

var a17 : uint = 0xbde5f2 ; //cellColorOver1 (Lineat Gradient)

var a18 : uint = 0x8fd3e7 ; //cellColorOver2 (Lineat Gradient)

var a19 : uint = 0x000000 ; //cellColorText

var a20 : uint = 0x000000 ; //DateTextColor

//ONLY ONE INSTANCE FOR ALL BUTTONS

//Al crear la instancia podemos especificar todos los parametros o ninguno

var calendar:Calendario = new Calendario(a01,a02,a03,a04,a05,a06,a07,a08,a09,a10,a11,a12,a13,a14,a15,a16,a17,a18,a19,a20);

addChild(calendar);

//----------------------------------------------

cal1.addEventListener(MouseEvent.CLICK, onCal1);

function onCal1(e:Event):void {

calendar.setSkin = skinBlueBase;

calendar.Open(txt1,cal1.x,cal1.y);

}

//----------------------------------------------

cal2.addEventListener(MouseEvent.CLICK, onCal2);

function onCal2(e:Event):void {

//Podemos especificar que aparezcal hacia la izquierda y abajo "LD"

//Podemos especificar parametros en concreto por separado

calendar.ceW = 40;

calendar.ceH = 40;

calendar.Open(txt2,cal2.x+cal2.width,cal2.y,"LD");

}

//----------------------------------------------

cal3.addEventListener(MouseEvent.CLICK, onCal3);

function onCal3(e:Event):void {

//podemos pasar todos los parametros mediante

//una cadena separada por espacios(se puede utilizar el editor

//de skins

calendar.setSkin = skinAltoContraste;

//Si hacemos rollout no se cierra

calendar.Open(txt3,cal3.x,cal3.y,"RD",false);

}

//----------------------------------------------

cal4.addEventListener(MouseEvent.CLICK, onCal4);

function onCal4(e:Event):void {

calendar.ceW = 15;

calendar.ceH = 15;

calendar.lan = "US";

//podemos decir que se cierre la hacer un rollOut

calendar.Open(txt4,cal4.x+cal4.width,cal4.y+cal4.height,"LU",true);

}

//----------------------------------------------

cal5.addEventListener(MouseEvent.CLICK, onCal5);

cal5.buttonMode = true;

function onCal5(e:Event):void {

calendar.setSkin = skinXavirobot;

calendar.Open(txt5,cal5.x,cal5.y,"RU",true);

}

//----------------------------------------------

//Ejemplos de skins creados con el editor de skins

var skinBlueBase:String ="US 5 32 32 1 10 7 0xc5e8f7 0xffffff 0xf7f7f7 0x000000 0xbfbfbf 0xf4f4f4 0xdedede 0xeed513 0xff6600 0xbde5f2 0x8fd3e7 0x000000 0x000000";

var skinAltoContraste:String = "US 5 22 22 1 10 5 0xffffff 0x000000 0x000000 0xffffff 0xe4e4e4 0x000000 0x757575 0xffcc00 0xff9900 0xf7ef41 0xfaeb41 0xffffff 0xffffff";

var skinXavirobot:String ="US 5 22 22 1 10 5 0x0099ff 0xffcc00 0xff6600 0xffffff 0xcccccc 0x00ff00 0x009900 0xffcc00 0xff9900 0x000000 0x000066 0xffffff 0xffffff";

[download id=”39″ format=”2″]

4 comments on “AS3 – Útiles – Calendario dinamico Open source con varios idiomas, Español, Ingles, Catalan, frances etc. para flash”

16 octubre, 2012 at 17:08
Duende says:
Nuevamente me salvaste la capa con este calendario.
gracias por compartirlo
24 noviembre, 2012 at 23:38
Iván says:
Jo que bueno esto!
y muy completo, gran trabajo.
26 noviembre, 2012 at 9:36
jvm says:
Hombre ese ivan, gracias 🙂
9 abril, 2018 at 20:22
German says:
Hola. LLegué tarde a la entrega de este componentes, me gustaría tenerlo…

Deja un comentario Cancelar respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.