# j-MonthlyCalendar

> Les noms de mois et de jour sont extraits des propriétés MONTHS et DAYS définies dans la bibliothèque jComponent.

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

- Seulement une vue mensuelle

__Configuration__ :

- `parent {String}` un sélectionneur jQuery pour obtenir une hauteur fixe (defaut `auto`)
- `firstday {Number}` Le premier jour du calendrier `0 = Sunday`Le défaut `0`
- `noborder {Boolean}` désactive la bordure (par défaut : `false`)
- `selectable {Boolean}` permet de sélectionner des jours (defaut: `true`)
- `morebutton {String}` un modèle Tangular pour le bouton __More__ (defaut: `+{{ count }} more`)
- `select {String}` est un chemin vers `Function(item_event, el, e)`, soyez prudent: `item_event` peut être `null`
- `create {String}` un chemin vers `Function({ beg: Date, end: Date }, beg_element, end_element)`
- `dblclick {String}` un chemin vers `Function(item_event, el, e)`
- `dblclickdate {String}` un chemin vers `Function(date, el, e)`
- `contextmenu {String}` un chemin vers `Function(item_event, el, e)`
- `rebind {String}` un chemin vers `Function({ dates: Array, date: Date })` est exécuté lorsque le calendrier est repoussé
- `topoffset {Boolean}` sous-traits `offset.top` à partir de `height` (defaut: `false`)
- `topposition {Boolean}` sous-traits `position.top` à partir de `height` (defaut: `false`)
- `margin {Number}` top/bottom marge ensemble (defaut: `0`)
- La marge de haut et bas de `marginxs {Number}` pour la largeur d'écran `xs`
- La marge de haut et bas de `marginsm {Number}` pour la largeur d'écran `sm`
- La marge de haut et bas de `marginmd {Number}` pour la largeur d'écran `md`
- La marge de haut et bas de `marginlg {Number}` pour la largeur d'écran `lg`
- __NEW__: `keepselected {Boolean}` maintient les jours sélectionnés (défaut : `false`)
- __NEW__: `hover {String}` un chemin vers `Function({ beg: Date, end: Date }, beg_element, end_element)` (comme le `create`, mais il est appelé sur les méthodes `component.hover()` et `component.unhover()`)
- __NEW__: `scalewidth {Boolean}` mesure la hauteur selon la largeur de l'élément parent

__Méthodes__ :

- `component.addevents(events)` : les événements
	- `events` signifie Array d’objets ci-dessous :
	- `[{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]`
- Le `component.addevent(event)` ajoute un événement
	- Il ne peut pas être combiné avec la méthode `addevents`
	- Il peut être exécuté plusieurs fois
	- Étiquette : `{ id: String, html: String, icon: String, color: String, background: Boolean }`
- __NEW__: `component.addbadge(date, [color])` ajoute un signe
- Étiquette : `component.hover(beg, end)`
- Étiquette : `component.unhover()`
- `component.clear()` supprime tous les événements et les signes

__Localisation__:

Les noms de mois et de jours sont tirés des propriétés `MONTHS` et `DAYS` définies dans la bibliothèque jComponent.

Utilisez-le avec `<ui-component name="monthlycalendar">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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