Lit-Elementy web component configurable calendar to mark moods or other configurable options.
<h2>Basic marked-calendar Demo</h2>
<h3>Demo</h3>
<marked-calendar
year="2020"
title="Imputacion de horas"
savedata
weekends
legend='[
{"code": "#0F0", "label": "V", "title": "Vacaciones"},
{"code": "#FF0", "label": "LD", "title": "Libre Disposición"},
{"code": "#F00", "label": "A", "title": "Ausencia"},
{"code": "#00F", "label": "T", "title": "Teletrabajo"},
{"code": "#F90", "label": "DE", "title": "Dia de Eventos"},
{"code": "#F0F", "label": "AH", "title": "Autorizado por el Head"},
{"code": "#0FF", "label": "CD", "title": "Dia de la Capacidad"} ]'
holidays='[
{"title": "Año nuevo", "date": "1/1"},
{"title": "Dia de Reyes", "date": "6/1"},
{"title": "Jueves Santo", "date": "9/4"},
{"title": "Viernes Santo", "date": "10/4"},
{"title": "Día del trabajador", "date": "1/5"},
{"title": "Día de la comunidad de Madrid", "date":"2/5"},
{"title": "San Isidro", "date":"15/5"},
{"title": "Día de la Asunción de la Virgen", "date": "15/8"},
{"title": "Día de todos los santos (pasado del domingo)", "date": "2/11"},
{"title": "Día de la Almudena", "date":"9/11"},
{"title": "Día de la constitución", "date": "6/12"},
{"title": "Día de la Inmaculada Concepción", "date": "9/12"},
{"title": "Festivo en Kairós", "date": "24/12"},
{"title": "Navidad", "date": "25/12"},
{"title": "Festivo en Kairós", "date": "31/12"},
{"title": "Año Nuevo", "date": "1/1/2021"},
{"title": "Día de Reyes", "date": "6/1/2021"} ]'
>
></marked-calendar>
<marked-calendar
year="2020"
title="Imputacion de horas"
savedata
weekends
legend='[
{"code": "#0F0", "label": "V", "title": "Vacaciones"},
{"code": "#FF0", "label": "LD", "title": "Libre Disposición"},
{"code": "#F00", "label": "A", "title": "Ausencia"},
{"code": "#00F", "label": "T", "title": "Teletrabajo"},
{"code": "#F90", "label": "DE", "title": "Dia de Eventos"},
{"code": "#F0F", "label": "AH", "title": "Autorizado por el Head"},
{"code": "#0FF", "label": "CD", "title": "Dia de la Capacidad"} ]'
holidays='[
{"title": "Año nuevo", "date": "1/1"},
{"title": "Dia de Reyes", "date": "6/1"},
{"title": "Jueves Santo", "date": "9/4"},
{"title": "Viernes Santo", "date": "10/4"},
{"title": "Día del trabajador", "date": "1/5"},
{"title": "Día de la comunidad de Madrid", "date":"2/5"},
{"title": "San Isidro", "date":"15/5"},
{"title": "Día de la Asunción de la Virgen", "date": "15/8"},
{"title": "Día de todos los santos (pasado del domingo)", "date": "2/11"},
{"title": "Día de la Almudena", "date":"9/11"},
{"title": "Día de la constitución", "date": "6/12"},
{"title": "Día de la Inmaculada Concepción", "date": "9/12"},
{"title": "Festivo en Kairós", "date": "24/12"},
{"title": "Navidad", "date": "25/12"},
{"title": "Festivo en Kairós", "date": "31/12"},
{"title": "Año Nuevo", "date": "1/1/2021"},
{"title": "Día de Reyes", "date": "6/1/2021"} ]'
></marked-calendar>
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install
to install your element's dependencies, then run polymer serve
to serve your element locally.
$ npm run start
$ npm run test
$ npm run build
- Mánu Fosela - Javascript Developer - manufosela
This project is licensed under the Apache 2.0 License - see the LICENSE file for details
generator-lit-element-base - yeoman npm package - by @manufosela