Web Component: j-MonthlyCalendar
j-MonthlyCalendar (BETA)
- supports only monthly view
Configuration:
parent
{String} a jQuery selector for obtaining of fixed height (defaultauto
)firstday
{Number} first day in the calendar0 = Sunday
, default0
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 toFunction(item_event, el, e)
, be careful:item_event
can benull
create
{String} a path toFunction({ beg: Date, end: Date }, beg_element, end_element)
dblclick
{String} a path toFunction(item_event, el, e)
dblclickdate
{String} a path toFunction(date, el, e)
contextmenu
{String} a path toFunction(item_event, el, e)
rebind
{String} a path toFunction({ dates: Array, date: Date })
is executed when the calendar is rebindedtopoffset
{Boolean} subtractsoffset.top
fromheight
(default:false
)topposition
{Boolean} subtractsposition.top
fromheight
(default:false
)margin
{Number} top/bottom margin together (default:0
)marginxs
{Number} top/bottom margin together forxs
screen widthmarginsm
{Number} top/bottom margin together forsm
screen widthmarginmd
{Number} top/bottom margin together formd
screen widthmarginlg
{Number} top/bottom margin together forlg
screen width- NEW:
keepselected {Boolean}
keeps selected (hovered) days (default:false
) - NEW:
hover {String}
a path toFunction({ beg: Date, end: Date }, beg_element, end_element)
(same likecreate
, but it's called oncomponent.hover()
andcomponent.unhover()
methods) - NEW:
scalewidth {Boolean}
scales the height according to the width of the parent element
Methods:
component.addevents(events)
adds eventsevents
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 }
- can't be combined with
- 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.
Author
- Peter Širka petersirka@gmail.com
- License
Created
27. november 2020
Updated
31. january 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
