# j-MonthlyCalendar

> Månad och dag namn tas från MONTHS och DAYS egenskaper definierade i jComponent bibliotek.

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

- Stöd endast månadsvisningar

__Konfigurera__:

- `parent {String}` en jQuery-selektor för att få fast höjd (default `auto`)
- `firstday {Number}` första dagen i kalendern `0 = Sunday`, standard `0`
- `noborder {Boolean}` inaktiverar gränsen (default: `false`)
- `selectable {Boolean}` möjliggör val av dagar (default: `true`)
- `morebutton {String}` en Tangular mall för __More knappen__ (default: `+{{ count }} more`)
- `select {String}` en väg till `Function(item_event, el, e)`, var försiktig: `item_event` kan vara `null`
- `create {String}` en väg till `Function({ beg: Date, end: Date }, beg_element, end_element)`
- `dblclick {String}` en väg till `Function(item_event, el, e)`
- `dblclickdate {String}` en väg till `Function(date, el, e)`
- `contextmenu {String}` en väg till `Function(item_event, el, e)`
- `rebind {String}` en väg till `Function({ dates: Array, date: Date })` körs när kalendern är återkallad
- `topoffset {Boolean}` Subtrakter `offset.top` från `height` (default: `false`)
- `topposition {Boolean}` Subtrakter `position.top` från `height` (default: `false`)
- `margin {Number}` topp/bottom marginal tillsammans (default: `0`)
- `marginxs {Number}` topp/bottom marginal tillsammans för `xs` skärmbredd
- `marginsm {Number}` topp/bottom marginal tillsammans för `sm` skärmbredd
- `marginmd {Number}` topp/bottom marginal tillsammans för `md` skärmbredd
- `marginlg {Number}` topp/bottom marginal tillsammans för `lg` skärmbredd
- __NEW__: `keepselected {Boolean}` behåller markerade (hovered) dagar (default: `false`)
- __NEW__: `hover {String}` en väg till `Function({ beg: Date, end: Date }, beg_element, end_element)` (samma som `create`, men det kallas på `component.hover()` och `component.unhover()` metoder)
- __NEW__: `scalewidth {Boolean}` skalar höjden enligt bredden på föräldralementet

__Metoder__:

- `component.addevents(events)` lägger till händelser
	- `events` betyder Array av föremål nedan:
	- `[{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]`
- `component.addevent(event)` lägger till en händelse
	- Kan inte kombineras med `addevents`-metoden
	- Kan utföras flera gånger
	- Föregående inlägg: `{ id: String, html: String, icon: String, color: String, background: Boolean }`
- __NEW__: `component.addbadge(date, [color])` lägger till ett märke
- Nytt: `component.hover(beg, end)`
- Nytt: `component.unhover()`
- `component.clear()` tar bort alla händelser och markeringar

__Lokalisering__:

Månad och dag namn tas från `MONTHS` och `DAYS` egenskaper definierade i jComponent bibliotek.

Använd den med `<ui-component name="monthlycalendar">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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