j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

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

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>