# j-MonthlyCalendar

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

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

- 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.

```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>
```