j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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

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>