Arisman Webs - Diseño Web

Estamos cargando la página
sólo será un monento.

8 Feb 2019

Recursos WebPolymer 3

Webcomponent calendario- Polymer 3

Este componente crea un calendario simple desarrollado por Arisman Webs. Para añadir el calendario.

Instalación:
npm i aw-calendar

Uso:
<script type="module" src="/node_modules/aw_calendar/aw-calendar-simple.js"></script>
<aw-calendar-simple></aw-calendar-simple>

El componente admite las siguientes propiedades:

- `name`: (String) Da un nombre al calendario para poder tratarlo por separado.
- `time`: (Boolean) Indica si se debe poder seleccionar la hora.
- `fechainit`: (String) Selecciona una fecha inicial en el calendario en format "AAAA-MM-DD HH:SS" (La hora no es obligatoria).
- `noselectpast`: (Boolean) Indica si no se deben poder seleccionar las fechas ya pasadas. Def: false.
- `noselectsat`: (Boolean) Inica si no se deben poder seleccionar los sábados. Def: false
- `noselectsun`: (Boolean) Inica si no se deben poder seleccionar los domingos. Def: false
- `noselectfest`: (Boolean) Indica si no se deben poder seleccionar los festivos. Def: false.
- `nomarktoday`: (Boolean) Indica si no debe ir marcado el día actual en el calendario. Def: false.
- `nomarkfest`: (Boolean) Indica si queremos que los festivos salgan marcados. Def: false.
- `ccaa`: (String) Comunidad autónoma sobre la que calculará los festivos. Def: false
- `diasfest`: (Array) Array con días festivos que se quieran añadir manualmente.
- `noink`: (Boolean) Evita el efecto ripple al seleccionar un día en el calendario.
- `responsefunc`: Función de callback al seleccionar un día en el calendario.



Atributo ccaa

Solo para España, este calendario tendrá incorporado los días festivos. Además podemos añadir los días festivos de cada comunidad autónoma con el atributo "ccaa". Las comunidades autónomas permitidas son las siguientes:

- `andalucia`
- `aragon`
- `asturias`
- `baleares`
- `canarias`
- `cantabria`
- `castilla`
- `cataluña`
- `ceuta`
- `extremadura`
- `galicia`
- `madrid`
- `mancha`
- `melilla`
- `murcia`
- `navarra`
- `rioja`
- `valencia`
- `vascongadas`

Ejemplo:
<aw-calendar-simple unresolved fechainit="2018-02-09" ccaa="andalucia"></aw-calendar-simple>

Para el ejemplo anterior vemos que el 28 de febrero está marcado como festivo al ser el día de Andalucía.



Atributo diasfest

Si se necesitan añadir días festivos concretos, como por ejemplo festivos locales se puede hacer a través de este atributo. Pasar en un Array los días festivos que se necesita.

¡NOTA! Recuerda que para pasar Arrays a Polymer hay que invertir las comillas del atributo y debería quedar asi: diasfest='["1-9","2-11"]'.

Ejemplo:
<aw-calendar-simple unresolved fechainit="2018-9-14 20:30" ccaa="cataluña" diasfest='["1-9","2-11"]'></aw-calendar-simple>




Uso del calendario

Para recoger la fecha seleccionada en el calendario lo podemos hacer de dos maneras diferentes. Podemos hacer uso del atributo **responsefunc**, añadiendo a éste una función de respuesta al que el calendario enviará los datos al hacer una selección. Si este atributo no está definido, podemos recoger los valores del calendario a través del evento `aw-calendar-simple`.

A continuación mostramos dos ejemplos con las diferentes opciones:

Ejemplo con función de respuesta:
<aw-calendar-simple unresolved name="mi-calendario" responsefunc="myfunc"></aw-calendar-simple>
<script>
    function myfunc( response ) {
        console.log( response );
    }
</script>

Ejemplo con evento aw-calendar-simple:
<aw-calendar-simple unresolved name="mi-calendario"></aw-calendar-simple>
<script>
window.addEventListener( "aw-calendar-simple", ( ev ) => {
console.log( ev.detail.date );
if( ev.detail.date.name === "mi-calendario" ) {
console.log( "Mi calendario tiene esta fecha " + ev.detail.date.string );
}
});
</script>

Como se puede observar en la consola, todos los calendarios lanzan el evento, para poder diferenciarlos cuando hay varios calendarios, se utiliza el atributo name que es enviado en la respuesta. de este modo podemos identificar cual es el calendario que se está enviando.

Con este evento, podremos tratar la fecha y la hora seleccionada en el calendario.



Dando estilo al calendario

Para dar esitlo al calendario podemos utilizar las siguientes variables.

/* Variables de tema asumidas por el calendario */

--aw-font-family
--aw-primary-color
--aw-primary-text-color

/* Titulo del selectable de hora */

--aw-calendar-hour-tit-selectable-font-size: 14px;
--aw-calendar-hour-tit-selectable-font-weight: normal;
--aw-calendar-hour-tit-selectable-font-style: oblique;
--aw-calendar-hour-tit-selectable-color: #888888;

/* Estilos de los selectables */

--aw-calendar-selectables-max-width: 76px;
--aw-calendar-selectable-| arial;
--aw-calendar-selectable-font-size: 14px;
--aw-calendar-selectable-font-style: oblique;
--aw-calendar-selectable-color: --aw-primary-text-color | #333333;

--aw-calendar-input-background-color-focused: #F6F6F6;
--aw-calendar-input-border-color-focused: #DDDDDD;
--aw-calendar-input-color-focused: --aw-calendar-selectable-color | --aw-primary-text-color | #333333;


/* Iconos de los selectables */

--aw-calendar-icon-fill: #777777;
--aw-calendar-icon-fill-hover: #999999;

/* Lista de selección de meses */

--aw-calendar-list-color: --aw-primary-text-color | #333333;
--aw-calendar-list-color-hover: white;
--aw-calendar-list-background-color: white;
--aw-calendar-list-background-color-hover: --aw-primary-color | #999999;
--aw-calendar-list-font-size: 12px;
--aw-calendar-list-padding: 3px;

/* Región de días del calendario */

--aw-calendar-tit-color: --aw-primary-text-color | #333333;
--aw-calendar-tit-font-size: 14px;
--aw-calendar-tit-font-style: normal;
--aw-calendar-tit-font-weight: bold;

--aw-calendar-color: #333333;
--aw-calendar-font-weight: normal;
--aw-calendar-font-size: 14px;
--aw-calendar-font-style: normal;

--aw-calendar-day-color-hover: --aw-calendar-color | #333333;
--aw-calendar-day-background-color-hover: #EAEAEA;

--aw-calendar-selected-color: white;
--aw-calendar-selected-radius: 50%;
--aw-calendar-selected-background-color: #444444;

--aw-calendar-today-radius: 50%;
--aw-calendar-today-background-color: #999999;
--aw-calendar-festivo-color: #ad1414;