# j-MonthlyCalendar

> Názvy mesiacov a dní sú prevzaté z vlastností MONTHS a DAYS definovaných v knižnici jComponent.

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

- podporuje iba mesačné zobrazenie

__Konfigurácia__:

- `parent {String}` a volič jQuery na získanie pevnej výšky (predvolené `auto`)
- `firstday {Number}` prvý deň v kalendári `0 = Sunday`, predvolené `0`
- `noborder {Boolean}` zakáže hranicu (predvolené: `false`)
- `selectable {Boolean}` umožňuje výber dní (predvolené: `true`)
- Šablóna `morebutton {String}` a Tangular pre __tlačidlo Viac__ (predvolené: `+{{ count }} more`)
- `select {String}` cesta k `Function(item_event, el, e)`, pozor: `item_event` môže byť `null`
- `create {String}` cesta k `Function({ beg: Date, end: Date }, beg_element, end_element)`
- `dblclick {String}` cesta k `Function(item_event, el, e)`
- `dblclickdate {String}` cesta k `Function(date, el, e)`
- `contextmenu {String}` cesta k `Function(item_event, el, e)`
- `rebind {String}` cesta k `Function({ dates: Array, date: Date })` sa vykoná pri opätovnom zviazaní kalendára
- `topoffset {Boolean}` odpočíta `offset.top` od `height` (predvolené: `false`)
- `topposition {Boolean}` odpočítava `position.top` od `height` (predvolené: `false`)
- `margin {Number}` horný/dolný okraj spolu (predvolené: `0`)
- `marginxs {Number}` horný/dolný okraj spolu pre šírku obrazovky `xs`
- `marginsm {Number}` horný/dolný okraj spolu pre šírku obrazovky `sm`
- `marginmd {Number}` horný/dolný okraj spolu pre šírku obrazovky `md`
- `marginlg {Number}` horný/dolný okraj spolu pre šírku obrazovky `lg`
- __NOVINKA__: `keepselected {Boolean}` ponecháva vybraté dni (pri umiestnení kurzora myši) (predvolené: `false`)
- __NEW__: `hover {String}` cesta k `Function({ beg: Date, end: Date }, beg_element, end_element)` (rovnaká ako `create`, ale volá sa pri metódach `component.hover()` a `component.unhover()`)
- __NOVINKA__: `scalewidth {Boolean}` upraví výšku podľa šírky nadradeného prvku

__Metódy__:

- `component.addevents(events)` pridáva udalosti
	- `events` znamená pole nižšie uvedených objektov:
	- `[{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]`
- `component.addevent(event)` pridáva udalosť
	- nemožno kombinovať s metódou `addevents`
	- možno vykonať viackrát
	- objekt udalosti: `{ id: String, html: String, icon: String, color: String, background: Boolean }`
- __NOVINKA__: `component.addbadge(date, [color])` pridáva odznak
- __NOVINKA__: `component.hover(beg, end)`
- __NOVINKA__: `component.unhover()`
- `component.clear()` odstráni všetky udalosti a odznaky

__Lokalizácia__:

Názvy mesiacov a dní sú prevzaté z vlastností `MONTHS` a `DAYS` definovaných v knižnici jComponent.

Použite ho so `<ui-component name="monthlycalendar">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov 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>
```