# j-MonthlyCalendar

> Los nombres de mes y día se toman de las propiedades MESES y DÍAS definidas en la biblioteca jComponent.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 39827d3be1095f3f866b1e6839d1f9116f3948ca17f4aac07fc381c167a38e46
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- admite solo vista mensual

__Configuración__:

- `parent {String}` un selector jQuery para obtener una altura fija (por defecto `auto`)
- `firstday {Number}` primer día en el calendario `0 = Sunday`, por defecto `0`
- `noborder {Boolean}` desactiva el borde (predeterminado: `false`)
- `selectable {Boolean}` permite seleccionar días (predeterminado: `true`)
- `morebutton {String}` una plantilla Tangular para __botón Más__ (predeterminado: `+{{ count }} more`)
- `select {String}` un camino a `Function(item_event, el, e)`, cuidado: `item_event` puede ser `null`
- `create {String}` un camino hacia `Function({ beg: Date, end: Date }, beg_element, end_element)`
- `dblclick {String}` un camino hacia `Function(item_event, el, e)`
- `dblclickdate {String}` un camino hacia `Function(date, el, e)`
- `contextmenu {String}` un camino hacia `Function(item_event, el, e)`
- `rebind {String}` se ejecuta una ruta a `Function({ dates: Array, date: Date })` cuando se vuelve a vincular el calendario
- `topoffset {Boolean}` resta `offset.top` de `height` (predeterminado: `false`)
- `topposition {Boolean}` resta `position.top` de `height` (predeterminado: `false`)
- `margin {Number}` margen superior/inferior juntos (predeterminado: `0`)
- `marginxs {Number}` margen superior/inferior juntos para el ancho de pantalla `xs`
- `marginsm {Number}` margen superior/inferior juntos para el ancho de pantalla `sm`
- `marginmd {Number}` margen superior/inferior juntos para el ancho de pantalla `md`
- `marginlg {Number}` margen superior/inferior juntos para el ancho de pantalla `lg`
- __NUEVO__: `keepselected {Boolean}` mantiene los días seleccionados (desplazados) (predeterminado: `false`)
- __NUEVO__: `hover {String}` una ruta a `Function({ beg: Date, end: Date }, beg_element, end_element)` (igual que `create`, pero se llama mediante los métodos `component.hover()` y `component.unhover()`)
- __NUEVO__: `scalewidth {Boolean}` escala la altura según el ancho del elemento principal

__Métodos__:

- `component.addevents(events)` agrega eventos
	- `events` significa Matriz de objetos a continuación:
	- `[{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]`
- `component.addevent(event)` agrega un evento
	- no se puede combinar con el método `addevents`
	- se puede ejecutar varias veces
	- objeto de evento: `{ id: String, html: String, icon: String, color: String, background: Boolean }`
- __NUEVO__: `component.addbadge(date, [color])` agrega una insignia
- __NUEVO__: `component.hover(beg, end)`
- __NUEVO__: `component.unhover()`
- `component.clear()` elimina todos los eventos e insignias.

__Localización__:

Los nombres de mes y día se toman de las propiedades `MONTHS` y `DAYS` definidas en la biblioteca jComponent.

Úselo con `<ui-component name="monthlycalendar">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<style>
	body{margin:0;padding:0;overflow:hidden;}
</style>

<ui-component name="monthlycalendar" path="common.date" config="parent:auto;noborder:1;firstday:1"></ui-component>

<script>
	var common = { date: NOW };

	(function() {
		var events = [];
		events.push({ id: 'a', beg: NOW.add('-10 days'), end: NOW.add('2 days'), html: 'Big event', color: 'orange' });
		events.push({ id: 'b', beg: NOW, html: 'Current', icon: 'ti ti-car', color: 'blue' });
		SETTER(true, 'monthlycalendar/addevents', events);
	})();

</script>
```