j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

supports only monthly view

Configuration:

parent {String} a jQuery selector for obtaining of fixed height (default auto)
firstday {Number} first day in the calendar 0 = Sunday, default 0
noborder {Boolean} disables border (default: false)
selectable {Boolean} enables selecting of days (default: true)
morebutton {String} a Tangular template for More button (default: +{{ count }} more)
select {String} a path to Function(item_event, el, e), be careful: item_event can be null
create {String} a path to Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} a path to Function(item_event, el, e)
dblclickdate {String} a path to Function(date, el, e)
contextmenu {String} a path to Function(item_event, el, e)
rebind {String} a path to Function({ dates: Array, date: Date }) is executed when the calendar is rebinded
topoffset {Boolean} subtracts offset.top from height (default: false)
topposition {Boolean} subtracts position.top from height (default: false)
margin {Number} top/bottom margin together (default: 0)
marginxs {Number} top/bottom margin together for xs screen width
marginsm {Number} top/bottom margin together for sm screen width
marginmd {Number} top/bottom margin together for md screen width
marginlg {Number} top/bottom margin together for lg screen width
NEW: keepselected {Boolean} keeps selected (hovered) days (default: false)
NEW: hover {String} a path to Function({ beg: Date, end: Date }, beg_element, end_element) (same like create, but it's called on component.hover() and component.unhover() methods)
NEW: scalewidth {Boolean} scales the height according to the width of the parent element

Methods:

component.addevents(events) adds events
- events means Array of object below:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) adds an event
- can't be combined with addevents method
- can be executed multiple times
- event object: { id: String, html: String, icon: String, color: String, background: Boolean }
NEW: component.addbadge(date, [color]) adds a badge
NEW: component.hover(beg, end)
NEW: component.unhover()
component.clear() removes all events and badges

Localization:

Month and day names are taken from MONTHS and DAYS properties defined in jComponent library.

Use it with <ui-component name="monthlycalendar">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>