Web UI component: j-MonthlyCalendar

  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-MonthlyCalendar (BETA)

  • supports only monthly view


  • 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


  • 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 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 }
  • component.clear() removes all events


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