Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including marked-calendar with all npm packages installed. Try it out:

var markedCalendar = require("marked-calendar")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

marked-calendar v1.5.1

Lit-Element webcomponent marked-calendar

marked-calendar Published on webcomponents.org

Lit-Elementy web component configurable calendar to mark moods or other configurable options.

Demo

marked-calendar codepen demo

<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>

```html
## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

$ npm run start


## Running Tests

$ npm run test


## Build

$ npm run build


## Author

* **Mánu Fosela** - *Javascript Developer* - [manufosela](https://github.com/manufosela)

## License

This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details

## Generated

**generator-lit-element-base** - *yeoman npm package* - by [@manufosela](https://github.com/manufosela/generator-litelement-webcomponent)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free