j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Wspiera tylko miesięczny widok

Konfiguracja:

parent {String} - wybór jQuery do uzyskania stałej wysokości (default auto)
firstday {Number} Pierwszy dzień w kalendarzu 0 = Sunday• Default 0
noborder {Boolean} nie jest granicą (default: false)
selectable {Boolean} umożliwia wybór dni (default: true)
morebutton {String} szablonu Tangular dla przycisku Więcej (default: +{{ count }} more)
select {String} jest drogą do Function(item_event, el, e), uważaj: item_event może być null
create {String} - droga do Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} - droga do Function(item_event, el, e)
dblclickdate {String} - droga do Function(date, el, e)
contextmenu {String} - droga do Function(item_event, el, e)
rebind {String} Droga do Function({ dates: Array, date: Date }) Wykonuje się, gdy kalendarz jest odłożony
Subtrakcje topoffset {Boolean} offset.top z height (default: false)
Subtrakcje topposition {Boolean} position.top z height (default: false)
margin {Number} górna / dolna marża razem (default: 0)
marginxs {Number} górna / dolna margina razem dla szerokości ekranu xs
marginsm {Number} górna / dolna margina razem dla szerokości ekranu sm
marginmd {Number} górna / dolna margina razem dla szerokości ekranu md
marginlg {Number} górna / dolna margina razem dla szerokości ekranu lg
NEW: keepselected {Boolean} utrzymuje wybrane dni (default: false)
NEW: hover {String} jest ścieżką do Function({ beg: Date, end: Date }, beg_element, end_element) (tak samo jak create, ale nazywa się go metodami component.hover() i component.unhover())
NEW: scalewidth {Boolean} skala wysokość według szerokości elementu ojczystego

Metody:

component.addevents(events) dodaje wydarzenia
- events oznacza Array obiektu poniżej:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) dodaje wydarzenie
- Nie można łączyć z metodą addevents
- Można go wykonywać wielokrotnie
- Obiekt wydarzenia: { id: String, html: String, icon: String, color: String, background: Boolean }
NEW: component.addbadge(date, [color]) dodaje znak
Nowy: component.hover(beg, end)
Nowy: component.unhover()
component.clear() usuwa wszystkie wydarzenia i znaki

Lokalizacja:

Nazwy miesięcy i dni pochodzą z właściwości MONTHS i DAYS zdefiniowanych w bibliotece jComponent.

Użyj go z <ui-component name="monthlycalendar">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>