j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Unterstützt nur die Monatsansicht

Konfiguration:

parent {String} ein jQuery-Selektor zum Erhalten einer festen Höhe (Standard auto)
firstday {Number} erster Tag im Kalender 0 = Sunday, Standard 0
noborder {Boolean} deaktiviert den Rand (Standard: false)
selectable {Boolean} ermöglicht die Auswahl von Tagen (Standard: true)
morebutton {String} eine Tangular-Vorlage für die Schaltfläche „Mehr“ (Standard: +{{ count }} more)
select {String} ein Pfad zu Function(item_event, el, e), seien Sie vorsichtig: item_event kann null sein
create {String} ein Pfad zu Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} ein Pfad zu Function(item_event, el, e)
dblclickdate {String} ein Pfad zu Function(date, el, e)
contextmenu {String} ein Pfad zu Function(item_event, el, e)
rebind {String} Ein Pfad zu Function({ dates: Array, date: Date }) wird ausgeführt, wenn der Kalender erneut gebunden wird
topoffset {Boolean} subtrahiert offset.top von height (Standard: false)
topposition {Boolean} subtrahiert position.top von height (Standard: false)
margin {Number} oberer/unterer Rand zusammen (Standard: 0)
marginxs {Number} oberer/unterer Rand zusammen für xs Bildschirmbreite
marginsm {Number} oberer/unterer Rand zusammen für sm Bildschirmbreite
marginmd {Number} oberer/unterer Rand zusammen für md Bildschirmbreite
marginlg {Number} oberer/unterer Rand zusammen für lg Bildschirmbreite
NEU: keepselected {Boolean} behält ausgewählte (schwebebewegte) Tage bei (Standard: false)
NEU: hover {String} ein Pfad zu Function({ beg: Date, end: Date }, beg_element, end_element) (dasselbe wie create, aber es wird auf den Methoden component.hover() und component.unhover() aufgerufen)
NEU: scalewidth {Boolean} skaliert die Höhe entsprechend der Breite des übergeordneten Elements

Methoden:

component.addevents(events) fügt Ereignisse hinzu
- events bedeutet Array des folgenden Objekts:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) fügt ein Ereignis hinzu
- kann nicht mit der Methode addevents kombiniert werden
- kann mehrfach ausgeführt werden
- Ereignisobjekt: { id: String, html: String, icon: String, color: String, background: Boolean }
NEU: component.addbadge(date, [color]) fügt ein Abzeichen hinzu
NEU: component.hover(beg, end)
NEU: component.unhover()
component.clear() entfernt alle Ereignisse und Abzeichen

Lokalisierung:

Monats- und Tagesnamen werden den Eigenschaften MONTHS und DAYS entnommen, die in der Bibliothek jComponent definiert sind.

Verwenden Sie es mit <ui-component name="monthlycalendar">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>