j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Поддържа само месечен изглед

Конфигуриране:

parent {String} е jQuery селектор за получаване на фиксирана височина (предварително auto)
firstday {Number} Първият ден в календара 0 = Sundayдефолт 0
noborder {Boolean} Недостатъчни граници (дефолт: false)
selectable {Boolean} позволява избора на дни (предварително: true)
morebutton {String} е шаблон на Tangular за бутона More (предварително: +{{ count }} more)
select {String} е път към Function(item_event, el, e), бъдете внимателни: item_event може да бъде null
create {String} Пътят към Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} Пътят към Function(item_event, el, e)
dblclickdate {String} Пътят към Function(date, el, e)
contextmenu {String} Пътят към Function(item_event, el, e)
rebind {String} Пътят към Function({ dates: Array, date: Date }) Извършва се, когато календарът е прехвърлен
topoffset {Boolean} субтракти offset.top от height (предварително: false)
topposition {Boolean} субтракти position.top от height (предварително: false)
margin {Number} Върху и надолу марж (предварително: 0)
marginxs {Number} топ/долна маржа заедно за ширина на екрана xs
marginsm {Number} топ/долна маржа заедно за ширина на екрана sm
marginmd {Number} топ/долна маржа заедно за ширина на екрана md
marginlg {Number} топ/долна маржа заедно за ширина на екрана lg
NEW: keepselected {Boolean} запазва избрани (определени) дни (предварително: false)
NEW: hover {String} е път към Function({ beg: Date, end: Date }, beg_element, end_element) (същото като create, но се нарича на методите component.hover() и component.unhover())
NEW: scalewidth {Boolean} скалира височината според ширината на родителския елемент

Методи:

component.addevents(events) добавя събития
- events означава Array на обекта по-долу:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) добавя събитие
- Не може да се комбинира с метода на addevents
- Може да бъде изпълнен няколко пъти
- Обект на събитие: { id: String, html: String, icon: String, color: String, background: Boolean }
NEW: component.addbadge(date, [color]) добавя знак
Новата е: component.hover(beg, end)
Новата е: component.unhover()
component.clear() премахва всички събития и знаци

Локализация:

Месецът и дневните имена се вземат от свойствата на MONTHS и DAYS определени в библиотеката на jComponent.

Използвайте го с <ui-component name="monthlycalendar">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>