j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Supporta solo la visione mensile

Configurazione:

parent {String} un selettore jQuery per ottenere altezza fissa (default auto)
firstday {Number} Il primo giorno del calendario 0 = SundayIl default 0
noborder {Boolean} disabilita la frontiera (default: false)
selectable {Boolean} consente di selezionare i giorni (default: true)
morebutton {String} un modello di Tangular per il pulsante More (default: +{{ count }} more)
select {String} un percorso a Function(item_event, el, e), stare attenti: item_event può essere null
create {String} un percorso a Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} un percorso a Function(item_event, el, e)
dblclickdate {String} un percorso a Function(date, el, e)
contextmenu {String} un percorso a Function(item_event, el, e)
rebind {String} un percorso a Function({ dates: Array, date: Date }) viene eseguito quando il calendario è rivolto
topoffset {Boolean} sottrazione offset.top da height (default: false)
topposition {Boolean} sottrazione position.top da height (default: false)
margin {Number} marchio superiore / inferiore insieme (default: 0)
marginxs {Number} top/bottom margine insieme per la larghezza dello schermo xs
marginsm {Number} top/bottom margine insieme per la larghezza dello schermo sm
marginmd {Number} top/bottom margine insieme per la larghezza dello schermo md
marginlg {Number} top/bottom margine insieme per la larghezza dello schermo lg
NEW: keepselected {Boolean} mantiene i giorni selezionati (di default: false)
NEW: hover {String} un percorso a Function({ beg: Date, end: Date }, beg_element, end_element) (come create, ma è chiamato su metodi component.hover() e component.unhover())
NEW: scalewidth {Boolean} scala l'altezza in base alla larghezza dell'elemento madre

Metodi:

component.addevents(events) aggiunge eventi
- events significa Array di oggetto sotto:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) aggiunge un evento
- Non può essere combinato con il metodo addevents
- Può essere eseguito più volte
- Oggetto di evento: { id: String, html: String, icon: String, color: String, background: Boolean }
NEW: component.addbadge(date, [color]) aggiunge un segno
Sito ufficiale: component.hover(beg, end)
Sito ufficiale: component.unhover()
component.clear() rimuove tutti gli eventi e i segni

Localizzazione:

I nomi del mese e del giorno vengono presi dalle proprietà MONTHS e DAYS definite nella biblioteca jComponent.

Utilizzare con <ui-component name="monthlycalendar">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>