MaterialCalendarPickerComponent class

An infinitely-scrolling material-styled calendar which supports selecting single dates or date ranges.

You probably want to use material-datepicker or material-date-range-picker instead of this.

Attributes:

mode -- What sort of interaction this calendar supports. Valid values are "none", "single-date", or "date-range". Defaults to "none".

Styling:

Calendar selections are blue by default. The color of selections can be customized using the calendar-highlights SCSS mixin.

Selected ranges have IDs, which are used to pick the right style out of the mixin. For example, the standard date range picker uses this styling:

 @include calendar-highlights('.calendar', (
   range: $mat-blue-map,
   comparison: $mat-google-yellow-map,
   range comparison: $mat-green-map,
 ));

This sets the primary date range (which has the ID "range") to blue, the comparison date range to yellow, and the overlap to green. The overlap color has to be specified manually; the calendar doesn't try to blend the colors automatically.

Annotations

@Component(changeDetection: ChangeDetectionStrategy.onPush, directives: [NgFor], selector: 'material-calendar-picker', styleUrls: ['material_calendar_picker.scss.css'], templateUrl: 'material_calendar_picker.html')

Constructors

MaterialCalendarPickerComponent(@Optional() @Inject(datepickerClock) Clock? clock, Clock legacyClock, @Attribute('mode') String? mode)

Properties

allowHighlightUpdates ↔ bool: Set this to false to temporarily suppress updates to the calendar's range highlights.
getter/setter pair
compact ↔ bool: Whether to enable compact calendar styles.
getter/setter pair
container ← HtmlElement?: no getter
dayNames → List<String>: Names of each day of the week.
no setter
hashCode → int: The hash code for this object.
no setterinherited
maxDate ↔ Date?: Dates later than maxDate cannot be clicked on or scrolled to.
getter/setter pair
minDate ↔ Date?: Dates earlier than minDate cannot be clicked on or scrolled to.
getter/setter pair
mode → CalendarSelectionMode: What sort of interaction this calendar supports.
no setter
movingStartMaintainsLength ← bool: For date range selection, whether clicking to move the start date should also move the end date (preserving the length of the selected range).
no getter
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
state ↔ CalendarState?: An object describing the entire state of the calendar -- what's selected on the calendar, and whether or not the selection is currently "active".
getter/setter pair
stateChange → Stream<CalendarState?>: Fired when the calendar state changes -- e.g. when the user starts dragging the selected date range.
no setter
visibleMonth → Stream<Date>: Fired when the visible month changes -- e.g. when a new month scrolls into view.
no setter

Methods

ngAfterChanges() → void
ngAfterViewInit() → void
ngOnDestroy() → void: Executed before the directive is removed from the DOM and destroyed.
ngOnInit() → void: Executed after the first change detection run for a directive.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
scrollToDate(Date date) → void: Scroll the calendar so that date becomes visible.
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Constants

DATE_COMPACT_HEIGHT_PX → const int
DATE_HEIGHT_PX → const int: The height of the each calendar date, in pixels.
WEEK_ROWS_IN_MONTH → const int: Months can have up to 6 partial weeks. We also may need space for a title, but a 6-week month will always have an inline title. (Proof: Longest month is 31 days. 28 of those days will appear in the middle 4 weeks, leaving 3 days. To reach 6 weeks, there must be at least 1 day before and after the middle 4 weeks. Therefore there can be at most 2 days in the first week, giving enough space for an inline title.)