# j-MonthlyCalendar

> De naam van de maand en de dag wordt genomen uit de eigenschappen van MONTHS en DAYS die zijn gedefinieerd in de jComponent bibliotheek.

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

- Ondersteunt alleen maandelijkse visie

__Configuratie__:

- `parent {String}` een jQuery selector voor het verkrijgen van vaste hoogte (default `auto`)
- `firstday {Number}` Eerste dag in de kalender `0 = Sunday`De default `0`
- `noborder {Boolean}` onbeperkt grens (default: `false`)
- `selectable {Boolean}` maakt het mogelijk om dagen te selecteren (default: `true`)
- `morebutton {String}` een Tangular-template voor __Meer knop__ (default: `+{{ count }} more`)
- `select {String}` een weg naar `Function(item_event, el, e)`, wees voorzichtig: `item_event` kan `null` zijn
- `create {String}` een weg naar `Function({ beg: Date, end: Date }, beg_element, end_element)`
- `dblclick {String}` een weg naar `Function(item_event, el, e)`
- `dblclickdate {String}` een weg naar `Function(date, el, e)`
- `contextmenu {String}` een weg naar `Function(item_event, el, e)`
- `rebind {String}` een route naar `Function({ dates: Array, date: Date })` wordt uitgevoerd wanneer de kalender is teruggedrukt
- `topoffset {Boolean}` subtrakten `offset.top` van `height` (default: `false`)
- `topposition {Boolean}` subtrakten `position.top` van `height` (default: `false`)
- `margin {Number}` top/bottom marge samen (default: `0`)
- `marginxs {Number}` top/bottom margin samen voor `xs` schermbreedte
- `marginsm {Number}` top/bottom margin samen voor `sm` schermbreedte
- `marginmd {Number}` top/bottom margin samen voor `md` schermbreedte
- `marginlg {Number}` top/bottom margin samen voor `lg` schermbreedte
- __NEW__: `keepselected {Boolean}` behoudt geselecteerde (gewaardeerde) dagen (default: `false`)
- __NEW__: `hover {String}` een weg naar `Function({ beg: Date, end: Date }, beg_element, end_element)` (zoals `create`, maar het wordt genoemd op de methoden `component.hover()` en `component.unhover()`)
- __NEW__: `scalewidth {Boolean}` schaalt de hoogte volgens de breedte van het moederelement

__Methoden__:

- `component.addevents(events)` toont evenementen
	- `events` betekent Array van object hieronder:
	- `[{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]`
- `component.addevent(event)` voegt een evenement toe
	- kan niet worden gecombineerd met de `addevents`-methode
	- Kan meerdere keren worden uitgevoerd
	- Voorbeeld: `{ id: String, html: String, icon: String, color: String, background: Boolean }`
- __NEW__: `component.addbadge(date, [color])` voegt een badge toe
- Hoofdstukken: `component.hover(beg, end)`
- Hoofdstukken: `component.unhover()`
- `component.clear()` verwijdert alle gebeurtenissen en badges

__Localisatie__:

De naam van de maand en de dag wordt genomen uit de eigenschappen `MONTHS` en `DAYS` die zijn gedefinieerd in de jComponent bibliotheek.

Gebruik het met `<ui-component name="monthlycalendar">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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