j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

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.

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>