j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

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.

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>