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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
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
|
1 2 3 4 |
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)
|
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:
Editor:
Codigo Ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
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"; |
- Descargado (835) veces.
3 comments on “AS3 – Útiles – Calendario dinamico Open source con varios idiomas, Español, Ingles, Catalan, frances etc. para flash”
Nuevamente me salvaste la capa con este calendario.
gracias por compartirlo
Jo que bueno esto!
y muy completo, gran trabajo.
Hombre ese ivan, gracias 🙂