calendar

calendar widget displays a calendar in a user friendly interface which adjusts for different form factors. The control includes APIs to set date, month, year and start of week
set styles for different dates
and pick a date.

  • Extends basecontrol

    • Syntax 

    <div data-juci="calendar"></div>
    Use only one calendar so that the user does not get overwhelmed with other controls in that page.

    Attributes

    • data-juci {String}
      A string with value calendar.

    Methods

    • getDate()
      Gets the selected date in the calendar
      Returns:
      {Date}
    • Navigates the calendar to the specified year and month.
      Parameters:
      • month{Number}
        [0-11] Month number to navigate to.
      • year{Number}
        [1900-3000] Year to navigate to.
      Fires:
      calendarnavigate
    • refresh()
      Refreshes and updates the calendar interface with updates styles and selection.
    • resetDateStyles()
      Resets the previously applied date styles.
      See:
      refresh
      To reset the styles, call calendar.refresh().
    • setDate(date, bGoToDate)
      Sets selected date in the calendar.
      Parameters:
      • bGoToDate{Boolean}
        True to navigate the calendar to the set date.
      • date{Date}
        Date to be set
    • setDateStyles(styleObj)
      Sets custom styling on specified dates in the calendar
      Parameters:
      • styleObj{Object}
        Style configuration. Check the example for more details
      juci.getControl("my-calendar").setDateStyles({
	"2013" : {
		"0" : {
			"1": { "color" : "blue", "background" : "grey"}
		},
		"11": {
			"20" : "juci_red"
		}
	}
});
      See:
      refresh
      To apply the styles, call calendar.refresh().
    • setMonth(month)
      Sets the month of the calendar.
      Parameters:
      • month{Number}
        [0-11] Month number to navigate to.
      Fires:
      calendarnavigate
    • setStartOfWeek(startOfWeek, bDontRefresh)
      Sets the specified day as the start of week.
      Parameters:
      • startOfWeek{String}
        [Sun, Mon, Tue, Wed, Thu, Fri, Sat] Day to be set as start of the week.
      • bDontRefresh
    • setYear(year)
      Sets the year of the calendar.
      Parameters:
      • year{Number}
        [1900-3000] Year to navigate to.
      Fires:
      calendarnavigate

    Events

    • calendarnavigate(eventObj) Cancellable
      Fires when navigation occurs due to user action or through API calls.
      Parameters:
    • dateselect(eventObj) Cancellable
      Fires when user selects a date in the calendar.
      Parameters: