DateGalleryConfig<T>

Properties

• canSelect Optional

  DateGalleryCanSelectPredicate<T>

  An optional callback predicate that is given a DateGalleryDate and must return a boolean, when the boolean is true that date can be selected, when false the date cannot be selected.

  Useful for when wanting to implement a min and max date, or prevent the weekends from being selected, or dates that have events.

  This callback is called when:

  1. A DateGalleryDate is constructed for a frame to determine the value of the DateGalleryDates canBeSelected boolean. This happens when the frame changes, or when an event is added / removed, or a date is selected / deselected.
  2. Whenever a date is about to get selected, to check if that date can be selected. Happens for example when selectDate or selectRange etc etc is called.

  IMPORTANT: try to make the predicate pure to make it easier to reason about. Otherwise you might get a scenario in which a DateGalleryDates canBeSelected is true, but can still be selected via selectDate.

  Defaults to undefined meaning all dates an be selected.

  Since 1.6.0

• events Optional

  DateGalleryEventConfig<T> []

  The initial events the DateGallery will start out with. Events in the sense of events on a calendar: birthdays / dentist appointments etc.

  Defaults to [] for no events.

  Since 1.6.0

• firstDayOfWeek Optional

  DateGalleryDayOfWeek

  What is to be considered the first day of the week, is used in modes such as 'week' to determine on which day of the week to start the frame.

  The firstDayOfWeek is a number between 0 and 6, were each number represents a day of the week:

  0 = Sunday 1 = Monday 2 = Tuesday 3 = Wednesday 4 = Thursday 5 = Friday 6 = Saturday

  Defaults to '0' which is 'sunday'.

  Since 1.6.0

• initialDate Optional

  string | Date

  A date that will act as the initial anchor date for the date frame.

  It will set the date frame to the "closest" date given the mode.

  Can either be a Date instance, or a string which can be passed to the Date constructor to make a date.

  For example if you use "2023-06-23" as the initialDate and the mode is set to 'year', the date frame will be the year 2023. If for the same initialDate the mode was set to month-six-weeks the month of June would have been the date frame instead.

  Defaults to the current date.

  Since 1.6.0

• isUTC Optional

  boolean

  Whether the DateGallery is in UTC mode or not.

  When the DateGallery is in UTC mode all dates that are given to you via the DateGallery through a DateGalleryDate are given in UTC.

  Also all operations on Date objects within the DateGallery or done via the UTC variants.

  UTC is useful for when you want all datepickers / calendars to look the same al around the world, which is not very often.

  Defaults to false meaning the browsers local offset is used.

  Since 1.6.0

• keepHistoryFor Optional

  number

  For how many items the history may contain in the DateGallery.

  Defaults to 0 meaning that it will not track history.

  Since 1.6.0

• maxSelectionLimit Optional

  number | false

  How many dates can be selected at the same time.

  When the value of limit is false there is no limit to the number of active items.

  Defaults to false.

  Since 1.6.0

• maxSelectionLimitBehavior Optional

  DateGalleryMaxSelectionLimitBehavior

  How the limit is enforced. In other words what the behavior should be when the limit is surpassed.

  The modes are strings which can be the following values:

  1. 'circular': the first date that was selected which will be removed so the last selected date can be added without violating the limit. This basically means that the first one in is the first one out.
  2. 'error': An error is thrown whenever the limit is surpassed, the error is called the DateGallerySelectionLimitReachedError.
  3. 'ignore': Nothing happens when an date is selected and the limit is reached. The date is simply not selected, but no error is thrown.

  Defaults to 'circular'.

  Since 1.6.0

• mode Optional

  DateGalleryMode

  The mode the DateGallery is going to start on.

  Can be one of these modes:

  1. 'day': a single day per frame.
  2. 'week': seven days per frame, starting at the configured firstDayOfWeek.
  3. 'month': all days within a calendar month per frame. A frame will then always start on the first of the month, and end on the last day of the month.
  4. 'month-six-weeks': all days within a calendar month, but padded out to six weeks. Meaning that there are always 42 days in the frame. Useful for when you want you calendar / datepicker to be visually stable height wise. Starts the days on the configured firstDayOfWeek.
  5. 'month-pad-to-week': all days within a calendar month, but padded out so it always contains full weeks. Only the smallest amount of padding is added to get to the full weeks. Starts the days on the configured firstDayOfWeek. For example if the week is configured to start on sunday, and the month starts on a tuesday, it will add monday and sunday.
  6. 'year': a frame will contain all 365 days (or 366 when a leap year) within a year.

  Defaults to 'month-six-weeks'.

  Since 1.6.0

• numberOfFrames Optional

  number

  The number of frames that are visible at a time for the end user.

  This is useful for when you want to show a multiple frames at the same time. For example if you an entire years worth of month-single-month calendars you'd set the numberOfFrames to 12.

  Defaults to 1 for a single frame at a time.

  Since 1.6.0

• selectedDates Optional

  string | Date []

  The dates that are considered selected when the DateGallery is initialized.

  The dates you provide will be converted to midnight.

  Are passed through the canSelect predicate any date that cannot be selected is filtered out of the array.

  Defaults to [] for no events.

  Since 1.6.0