@tylertech/forge 3.8.1 → 3.9.0-dev.0

package/esm/calendar/calendar-constants.d.ts

@@ -29,6 +29,12 @@ export declare const CALENDAR_CONSTANTS: {
         SHOW_OTHER_MONTHS: string;
         SHOW_TODAY: string;
         TODAY_BUTTON: string;
+        SHOW_YESTERDAY: string;
+        YESTERDAY_BUTTON: string;
+        SHOW_LAST_SEVEN_DAYS: string;
+        LAST_SEVEN_DAYS_BUTTON: string;
+        SHOW_LAST_THIRTY_DAYS: string;
+        LAST_THIRTY_DAYS_BUTTON: string;
         VIEW: string;
         YEAR: string;
         YEAR_RANGE: string;
@@ -42,6 +48,7 @@ export declare const CALENDAR_CONSTANTS: {
         DATE_SPACER: string;
         DATE_SELECTED: string;
         DATE_TODAY: string;
+        DATE_YESTERDAY: string;
         DATE_VIEW: string;
         DATE_VIEW_ROW: string;
         DATE_WRAPPER: string;
@@ -58,10 +65,15 @@ export declare const CALENDAR_CONSTANTS: {
         RANGE_END: string;
         RANGE_START: string;
         RANGE_TARGET: string;
+        RANGE_LAST_SEVEN_DAYS: string;
+        RANGE_LAST_THIRTY_DAYS: string;
         READONLY: string;
         RTL: string;
         SHOW_OTHER_MONTHS: string;
         SHOW_TODAY: string;
+        SHOW_YESTERDAY: string;
+        SHOW_LAST_SEVEN_DAYS: string;
+        SHOW_LAST_THIRTY_DAYS: string;
         VIEW: string;
         YEAR_MENU_OPEN: string;
     };
@@ -82,6 +94,9 @@ export declare const CALENDAR_CONSTANTS: {
         PREVIOUS_BUTTON: string;
         PREVIOUS_BUTTON_TOOLTIP: string;
         TODAY_BUTTON: string;
+        YESTERDAY_BUTTON: string;
+        LAST_SEVEN_DAYS_BUTTON: string;
+        LAST_THIRTY_DAYS_BUTTON: string;
         YEAR_BUTTON: string;
     };
     slots: {
@@ -92,6 +107,9 @@ export declare const CALENDAR_CONSTANTS: {
         PREVIOUS_YEARS_BUTTON_TEXT: string;
         NEXT_YEARS_BUTTON_TEXT: string;
         TODAY_BUTTON_TEXT: string;
+        YESTERDAY_BUTTON_TEXT: string;
+        LAST_SEVEN_DAYS_BUTTON_TEXT: string;
+        LAST_THIRTY_DAYS_BUTTON_TEXT: string;
         CLEAR_BUTTON_TEXT: string;
     };
     parts: {
@@ -114,6 +132,12 @@ export declare const CALENDAR_CONSTANTS: {
         RANGE_START: string;
         TODAY: string;
         TODAY_BUTTON: string;
+        YESTERDAY: string;
+        YESTERDAY_BUTTON: string;
+        LAST_SEVEN_DAYS: string;
+        LAST_SEVEN_DAYS_BUTTON: string;
+        LAST_THIRTY_DAYS: string;
+        LAST_THIRTY_DAYS_BUTTON: string;
         WEEKEND: string;
         YEAR_BUTTON: string;
         YEAR_BUTTON_ELEMENT: string;
@@ -138,6 +162,7 @@ export declare const CALENDAR_CONSTANTS: {
         DATE_SPACER: string;
         DATE_SELECTED: string;
         DATE_TODAY: string;
+        DATE_YESTERDAY: string;
         DATE_VIEW: string;
         DATE_WRAPPER: string;
         DAY_ROW: string;
@@ -153,7 +178,12 @@ export declare const CALENDAR_CONSTANTS: {
         RANGE: string;
         RANGE_END: string;
         RANGE_START: string;
+        RANGE_LAST_SEVEN_DAYS: string;
+        RANGE_LAST_THIRTY_DAYS: string;
         TODAY_BUTTON: string;
+        YESTERDAY_BUTTON: string;
+        LAST_SEVEN_DAYS_BUTTON: string;
+        LAST_THIRTY_DAYS_BUTTON: string;
         TOOLTIP: "forge-tooltip";
         VIEW: string;
         YEAR_BUTTON: string;
@@ -172,6 +202,9 @@ export declare const CALENDAR_CONSTANTS: {
         DEFAULT_PREVIOUS_YEARS_BUTTON_TEXT: string;
         DEFAULT_NEXT_YEARS_BUTTON_TEXT: string;
         DEFAULT_TODAY_BUTTON_TEXT: string;
+        DEFAULT_YESTERDAY_BUTTON_TEXT: string;
+        DEFAULT_LAST_SEVEN_DAYS_BUTTON_TEXT: string;
+        DEFAULT_LAST_THIRTY_DAYS_BUTTON_TEXT: string;
         DEFAULT_CLEAR_BUTTON_TEXT: string;
     };
     numbers: {
@@ -226,6 +259,7 @@ export interface ICalendarDateSelectEventData {
     range?: DateRange;
     rangeSelectionState?: RangeSelectionState;
     type: CalendarView;
+    rangeName?: string;
 }
 export interface ICalendarMonthChangeEventData {
     month: number;

package/esm/calendar/calendar-constants.js

@@ -27,6 +27,12 @@ const observedAttributes = {
     SHOW_OTHER_MONTHS: 'show-other-months',
     SHOW_TODAY: 'show-today',
     TODAY_BUTTON: 'today-button',
+    SHOW_YESTERDAY: 'show-yesterday',
+    YESTERDAY_BUTTON: 'yesterday-button',
+    SHOW_LAST_SEVEN_DAYS: 'show-last-seven-days',
+    LAST_SEVEN_DAYS_BUTTON: 'last-seven-days-button',
+    SHOW_LAST_THIRTY_DAYS: 'show-last-thirty-days',
+    LAST_THIRTY_DAYS_BUTTON: 'last-thirty-days-button',
     VIEW: 'view',
     YEAR: 'year',
     YEAR_RANGE: 'year-range'
@@ -46,6 +52,7 @@ const classes = {
     DATE_SPACER: 'forge-calendar__date-spacer',
     DATE_SELECTED: 'forge-calendar__date--selected',
     DATE_TODAY: 'forge-calendar__date--today',
+    DATE_YESTERDAY: 'forge-calendar__date--yesterday',
     DATE_VIEW: 'forge-calendar__date-view',
     DATE_VIEW_ROW: 'forge-calendar__date-view__row',
     DATE_WRAPPER: 'forge-calendar__date-wrapper',
@@ -62,10 +69,15 @@ const classes = {
     RANGE_END: 'forge-calendar__range--end',
     RANGE_START: 'forge-calendar__range--start',
     RANGE_TARGET: 'forge-calendar__range__target',
+    RANGE_LAST_SEVEN_DAYS: 'forge-calendar__range__last-seven-days',
+    RANGE_LAST_THIRTY_DAYS: 'forge-calendar__range__last-thirty-days',
     READONLY: 'forge-calendar--readonly',
     RTL: 'forge-calendar--rtl',
     SHOW_OTHER_MONTHS: 'forge-calendar--show-other-months',
     SHOW_TODAY: 'forge-calendar--show-today',
+    SHOW_YESTERDAY: 'forge-calendar--show-yesterday',
+    SHOW_LAST_SEVEN_DAYS: 'forge-calendar--show-last-seven-days',
+    SHOW_LAST_THIRTY_DAYS: 'forge-calendar--show-last-thirty-days',
     VIEW: 'forge-calendar__view',
     YEAR_MENU_OPEN: 'forge-calendar--year-menu-open'
 };
@@ -86,6 +98,9 @@ const ids = {
     PREVIOUS_BUTTON: 'previous-button',
     PREVIOUS_BUTTON_TOOLTIP: 'previous-button-tooltip',
     TODAY_BUTTON: 'today-button',
+    YESTERDAY_BUTTON: 'yesterday-button',
+    LAST_SEVEN_DAYS_BUTTON: 'last-seven-days-button',
+    LAST_THIRTY_DAYS_BUTTON: 'last-thirty-days-button',
     YEAR_BUTTON: 'year-button'
 };
 const slots = {
@@ -96,6 +111,9 @@ const slots = {
     PREVIOUS_YEARS_BUTTON_TEXT: 'previous-years-button-text',
     NEXT_YEARS_BUTTON_TEXT: 'next-years-button-text',
     TODAY_BUTTON_TEXT: 'today-button-text',
+    YESTERDAY_BUTTON_TEXT: 'yesterday-button-text',
+    LAST_SEVEN_DAYS_BUTTON_TEXT: 'last-seven-days-button-text',
+    LAST_THIRTY_DAYS_BUTTON_TEXT: 'last-thirty-days-button-text',
     CLEAR_BUTTON_TEXT: 'clear-button-text'
 };
 const weekdayParts = {
@@ -128,6 +146,12 @@ const parts = {
     RANGE_START: 'range-start',
     TODAY: 'today',
     TODAY_BUTTON: 'today-button',
+    YESTERDAY: 'yesterday',
+    YESTERDAY_BUTTON: 'yesterday-button',
+    LAST_SEVEN_DAYS: 'last-seven-days',
+    LAST_SEVEN_DAYS_BUTTON: 'last-seven-days-button',
+    LAST_THIRTY_DAYS: 'last-thirty-days',
+    LAST_THIRTY_DAYS_BUTTON: 'last-thirty-days-button',
     WEEKEND: 'weekend',
     YEAR_BUTTON: 'year-button',
     YEAR_BUTTON_ELEMENT: 'year-button-element'
@@ -145,6 +169,7 @@ const selectors = {
     DATE_SPACER: `.${classes.DATE_SPACER}`,
     DATE_SELECTED: `.${classes.DATE_SELECTED}`,
     DATE_TODAY: `.${classes.DATE_TODAY}`,
+    DATE_YESTERDAY: `.${classes.DATE_YESTERDAY}`,
     DATE_VIEW: `#${ids.DATE_VIEW}`,
     DATE_WRAPPER: `.${classes.DATE_WRAPPER}`,
     DAY_ROW: `#${ids.DAY_ROW}`,
@@ -160,7 +185,12 @@ const selectors = {
     RANGE: `.${classes.RANGE}`,
     RANGE_END: `.${classes.RANGE_END}`,
     RANGE_START: `.${classes.RANGE_START}`,
+    RANGE_LAST_SEVEN_DAYS: `.${classes.RANGE_LAST_SEVEN_DAYS}`,
+    RANGE_LAST_THIRTY_DAYS: `.${classes.RANGE_LAST_THIRTY_DAYS}`,
     TODAY_BUTTON: `#${ids.TODAY_BUTTON}`,
+    YESTERDAY_BUTTON: `#${ids.YESTERDAY_BUTTON}`,
+    LAST_SEVEN_DAYS_BUTTON: `#${ids.LAST_SEVEN_DAYS_BUTTON}`,
+    LAST_THIRTY_DAYS_BUTTON: `#${ids.LAST_THIRTY_DAYS_BUTTON}`,
     TOOLTIP: TOOLTIP_CONSTANTS.elementName,
     VIEW: '#view',
     YEAR_BUTTON: `#${ids.YEAR_BUTTON}`
@@ -179,6 +209,9 @@ const strings = {
     DEFAULT_PREVIOUS_YEARS_BUTTON_TEXT: 'Previous years',
     DEFAULT_NEXT_YEARS_BUTTON_TEXT: 'Next years',
     DEFAULT_TODAY_BUTTON_TEXT: 'Today',
+    DEFAULT_YESTERDAY_BUTTON_TEXT: 'Yesterday',
+    DEFAULT_LAST_SEVEN_DAYS_BUTTON_TEXT: 'Last 7 days',
+    DEFAULT_LAST_THIRTY_DAYS_BUTTON_TEXT: 'Last 30 days',
     DEFAULT_CLEAR_BUTTON_TEXT: 'Clear'
 };
 const numbers = {

package/esm/calendar/calendar-core.d.ts

@@ -17,11 +17,20 @@ export interface ICalendarCore extends ICalendarBase {
     menuAnimation: CalendarMenuAnimationType;
     clearButton: boolean;
     todayButton: boolean;
+    yesterdayButton: boolean;
+    lastSevenDaysButton: boolean;
+    lastThirtyDaysButton: boolean;
     clearCallback: (() => void) | undefined;
     todayCallback: (() => void) | undefined;
+    yesterdayCallback: (() => void) | undefined;
+    lastSevenDaysCallback: (() => void) | undefined;
+    lastThirtyDaysCallback: (() => void) | undefined;
     tooltipBuilder: CalendarTooltipBuilder | undefined;
     clear(): void;
     today(): void;
+    yesterday(): void;
+    lastSevenDays(): void;
+    lastThirtyDays(): void;
     selectDate(date: Date, setFocus?: boolean): void;
     deselectDate(date: Date, setFocus?: boolean): void;
     toggleDate(date: Date, force?: boolean): void;
@@ -37,6 +46,9 @@ export declare class CalendarCore implements ICalendarCore {
     private _year;
     private _focusedDate;
     private _showToday;
+    private _showYesterday;
+    private _showLastSevenDays;
+    private _showLastThirtyDays;
     private _showOtherMonths;
     private _fixedHeight;
     private _events;
@@ -63,8 +75,14 @@ export declare class CalendarCore implements ICalendarCore {
     private _showHeader;
     private _clearButton;
     private _todayButton;
+    private _yesterdayButton;
+    private _lastSevenDaysButton;
+    private _lastThirtyDaysButton;
     private _clearCallback;
     private _todayCallback;
+    private _yesterdayCallback;
+    private _lastSevenDaysCallback;
+    private _lastThirtyDaysCallback;
     private _view;
     private _menuAnimation;
     private _menuYear;
@@ -93,6 +111,9 @@ export declare class CalendarCore implements ICalendarCore {
     private _preventFocusListener;
     private _previousButtonListener;
     private _todayButtonListener;
+    private _yesterdayButtonListener;
+    private _lastSevenDaysButtonListener;
+    private _lastThirtyDaysButtonListener;
     private _yearButtonListener;
     constructor(_adapter: ICalendarAdapter);
     initialize(): void;
@@ -126,6 +147,9 @@ export declare class CalendarCore implements ICalendarCore {
     private _onYearSelected;
     private _onClearClicked;
     private _onTodayClicked;
+    private _onYesterdayClicked;
+    private _onLastSevenDaysClicked;
+    private _onLastThirtyDaysClicked;
     /** Attempts to the month and year of the value in single mode, then emits a selection event  */
     private _trySetValueMonthAndYear;
     /** Sets initial date tabindex and focus to today or the first enabled date in view */
@@ -414,6 +438,12 @@ export declare class CalendarCore implements ICalendarCore {
     private _applyShowOtherMonths;
     private _applyShowToday;
     private _applyTodayButton;
+    private _applyShowYesterday;
+    private _applyYesterdayButton;
+    private _applyShowLastSevenDays;
+    private _applyLastSevenDaysButton;
+    private _applyShowLastThirtyDays;
+    private _applyLastThirtyDaysButton;
     private _applyTooltipBuilder;
     private _applyWeekendDays;
     private _applyValue;
@@ -507,6 +537,30 @@ export declare class CalendarCore implements ICalendarCore {
     set todayButton(value: boolean);
     get todayCallback(): (() => void) | undefined;
     set todayCallback(value: (() => void) | undefined);
+    /** Get/set show yesterday */
+    get showYesterday(): boolean;
+    set showYesterday(value: boolean);
+    /** Get/set whether to show the yesterday button */
+    get yesterdayButton(): boolean;
+    set yesterdayButton(value: boolean);
+    get yesterdayCallback(): (() => void) | undefined;
+    set yesterdayCallback(value: (() => void) | undefined);
+    /** Get/set show last seven days */
+    get showLastSevenDays(): boolean;
+    set showLastSevenDays(value: boolean);
+    /** Get/set whether to show the last seven days button */
+    get lastSevenDaysButton(): boolean;
+    set lastSevenDaysButton(value: boolean);
+    get lastSevenDaysCallback(): (() => void) | undefined;
+    set lastSevenDaysCallback(value: (() => void) | undefined);
+    /** Get/set show last thirty days */
+    get showLastThirtyDays(): boolean;
+    set showLastThirtyDays(value: boolean);
+    /** Get/set whether to show the last thirty days button */
+    get lastThirtyDaysButton(): boolean;
+    set lastThirtyDaysButton(value: boolean);
+    get lastThirtyDaysCallback(): (() => void) | undefined;
+    set lastThirtyDaysCallback(value: (() => void) | undefined);
     /** Get/set the tooltip builder */
     get tooltipBuilder(): CalendarTooltipBuilder | undefined;
     set tooltipBuilder(value: CalendarTooltipBuilder | undefined);
@@ -541,6 +595,12 @@ export declare class CalendarCore implements ICalendarCore {
     setActiveDate(date: Date, setFocus?: boolean): boolean;
     /** Go to today */
     today(): void;
+    /** Go to yesterday */
+    yesterday(): void;
+    /** Go to last seven days */
+    lastSevenDays(): void;
+    /** Go to last thirty days */
+    lastThirtyDays(): void;
     /** Toggles a date selected or unselected */
     toggleDate(date: Date, force?: boolean): void;
 }

package/esm/calendar/calendar-core.js

@@ -18,6 +18,9 @@ export class CalendarCore {
         this._month = new Date().getMonth();
         this._year = new Date().getFullYear();
         this._showToday = true;
+        this._showYesterday = true;
+        this._showLastSevenDays = true;
+        this._showLastThirtyDays = true;
         this._showOtherMonths = false;
         this._fixedHeight = false;
         this._events = [];
@@ -40,6 +43,9 @@ export class CalendarCore {
         this._showHeader = true;
         this._clearButton = false;
         this._todayButton = false;
+        this._yesterdayButton = false;
+        this._lastSevenDaysButton = false;
+        this._lastThirtyDaysButton = false;
         // Menu
         this._view = 'date';
         this._menuAnimation = 'scale';
@@ -66,6 +72,9 @@ export class CalendarCore {
         this._preventFocusListener = evt => evt.preventDefault();
         this._previousButtonListener = () => this._onPreviousButtonClicked();
         this._todayButtonListener = () => this._onTodayClicked();
+        this._yesterdayButtonListener = () => this._onYesterdayClicked();
+        this._lastSevenDaysButtonListener = () => this._onLastSevenDaysClicked();
+        this._lastThirtyDaysButtonListener = () => this._onLastThirtyDaysClicked();
         this._yearButtonListener = () => this._onYearButtonClicked();
     }
     initialize() {
@@ -77,6 +86,9 @@ export class CalendarCore {
         this._applyFixedHeight();
         this._applyReadOnly();
         this._applyShowToday();
+        this._applyShowYesterday();
+        this._applyShowLastSevenDays();
+        this._applyShowLastThirtyDays();
         this._applyPreventFocus();
         this._applyShowHeader();
         this._applyMonth();
@@ -86,6 +98,9 @@ export class CalendarCore {
         this._applyLocale();
         this._applyClearButton();
         this._applyTodayButton();
+        this._applyYesterdayButton();
+        this._applyLastSevenDaysButton();
+        this._applyLastThirtyDaysButton();
         this._applyFirstDayOfWeek();
         this._applyShowOtherMonths();
         this._createDateView();
@@ -415,6 +430,15 @@ export class CalendarCore {
     _onTodayClicked() {
         this.today();
     }
+    _onYesterdayClicked() {
+        this.yesterday();
+    }
+    _onLastSevenDaysClicked() {
+        this.lastSevenDays();
+    }
+    _onLastThirtyDaysClicked() {
+        this.lastThirtyDays();
+    }
     /** Attempts to the month and year of the value in single mode, then emits a selection event  */
     _trySetValueMonthAndYear(month, year, type = 'date') {
         if (!this.selectionFollowsMonth || this._mode !== 'single' || !this._value?.length) {
@@ -1360,7 +1384,7 @@ export class CalendarCore {
         if (!this._clearButton) {
             this._adapter.unregisterClearButtonListener(this._clearButtonListener);
             this._adapter.removeClearButton();
-            if (!this._todayButton) {
+            if (!this._todayButton && !this._yesterdayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
                 this._adapter.removeFooter();
             }
         }
@@ -1657,7 +1681,7 @@ export class CalendarCore {
         if (!this._todayButton) {
             this._adapter.unregisterTodayButtonListener(this._todayButtonListener);
             this._adapter.removeTodayButton();
-            if (!this._clearButton) {
+            if (!this._clearButton && !this._yesterdayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
                 this._adapter.removeFooter();
             }
         }
@@ -1667,6 +1691,63 @@ export class CalendarCore {
             this._adapter.registerTodayButtonListener(this._todayButtonListener);
         }
     }
+    _applyShowYesterday() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_YESTERDAY, this._showYesterday);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_YESTERDAY, this._showYesterday);
+    }
+    _applyYesterdayButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.YESTERDAY_BUTTON, true, this._yesterdayButton.toString());
+        if (!this._yesterdayButton) {
+            this._adapter.unregisterYesterdayButtonListener(this._yesterdayButtonListener);
+            this._adapter.removeYesterdayButton();
+            if (!this._clearButton && !this._todayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setYesterdayButton();
+            this._adapter.registerYesterdayButtonListener(this._yesterdayButtonListener);
+        }
+    }
+    _applyShowLastSevenDays() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_LAST_SEVEN_DAYS, this._showLastSevenDays);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_LAST_SEVEN_DAYS, this._showLastSevenDays);
+    }
+    _applyLastSevenDaysButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.LAST_SEVEN_DAYS_BUTTON, true, this._lastSevenDaysButton.toString());
+        if (!this._lastSevenDaysButton) {
+            this._adapter.unregisterLastSevenDaysButtonListener(this._lastSevenDaysButtonListener);
+            this._adapter.removeLastSevenDaysButton();
+            if (!this._clearButton && !this._todayButton && !this._yesterdayButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setLastSevenDaysButton();
+            this._adapter.registerLastSevenDaysButtonListener(this._lastSevenDaysButtonListener);
+        }
+    }
+    _applyShowLastThirtyDays() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_LAST_THIRTY_DAYS, this._showLastThirtyDays);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_LAST_THIRTY_DAYS, this._showLastThirtyDays);
+    }
+    _applyLastThirtyDaysButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.LAST_THIRTY_DAYS_BUTTON, true, this._lastThirtyDaysButton.toString());
+        if (!this._lastThirtyDaysButton) {
+            this._adapter.unregisterLastThirtyDaysButtonListener(this._lastThirtyDaysButtonListener);
+            this._adapter.removeLastThirtyDaysButton();
+            if (!this._clearButton && !this._todayButton && !this._yesterdayButton && !this.lastSevenDaysButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setLastThirtyDaysButton();
+            this._adapter.registerLastThirtyDaysButtonListener(this._lastThirtyDaysButtonListener);
+        }
+    }
     _applyTooltipBuilder() {
         if (this._view === 'date') {
             this._dates.forEach(d => {
@@ -2065,6 +2146,99 @@ export class CalendarCore {
     set todayCallback(value) {
         this._todayCallback = value;
     }
+    /** Get/set show yesterday */
+    get showYesterday() {
+        return this._showYesterday;
+    }
+    set showYesterday(value) {
+        if (this._showYesterday !== value) {
+            this._showYesterday = value;
+            if (this._isInitialized) {
+                this._applyShowYesterday();
+            }
+        }
+    }
+    /** Get/set whether to show the yesterday button */
+    get yesterdayButton() {
+        return this._yesterdayButton;
+    }
+    set yesterdayButton(value) {
+        if (this._yesterdayButton !== value) {
+            this._yesterdayButton = value;
+            if (this._isInitialized) {
+                this._applyYesterdayButton();
+            }
+        }
+    }
+    /* Get/set the yesterday button callback */
+    get yesterdayCallback() {
+        return this._yesterdayCallback;
+    }
+    set yesterdayCallback(value) {
+        this._yesterdayCallback = value;
+    }
+    /** Get/set show last seven days */
+    get showLastSevenDays() {
+        return this._showLastSevenDays;
+    }
+    set showLastSevenDays(value) {
+        if (this._showLastSevenDays !== value) {
+            this._showLastSevenDays = value;
+            if (this._isInitialized) {
+                this._applyShowLastSevenDays();
+            }
+        }
+    }
+    /** Get/set whether to show the last seven days button */
+    get lastSevenDaysButton() {
+        return this._lastSevenDaysButton;
+    }
+    set lastSevenDaysButton(value) {
+        if (this._lastSevenDaysButton !== value) {
+            this._lastSevenDaysButton = value;
+            if (this._isInitialized) {
+                this._applyLastSevenDaysButton();
+            }
+        }
+    }
+    /* Get/set the last seven days button callback */
+    get lastSevenDaysCallback() {
+        return this._lastSevenDaysCallback;
+    }
+    set lastSevenDaysCallback(value) {
+        this._lastSevenDaysCallback = value;
+    }
+    /** Get/set show last thirty days */
+    get showLastThirtyDays() {
+        return this._showLastThirtyDays;
+    }
+    set showLastThirtyDays(value) {
+        if (this._showLastThirtyDays !== value) {
+            this._showLastThirtyDays = value;
+            if (this._isInitialized) {
+                this._applyShowLastThirtyDays();
+            }
+        }
+    }
+    /** Get/set whether to show the last thirty days button */
+    get lastThirtyDaysButton() {
+        return this._lastThirtyDaysButton;
+    }
+    set lastThirtyDaysButton(value) {
+        if (this._lastThirtyDaysButton !== value) {
+            this._lastThirtyDaysButton = value;
+            if (this._isInitialized) {
+                this._applyLastThirtyDaysButton();
+            }
+        }
+    }
+    /* Get/set the last thirty days button callback */
+    get lastThirtyDaysCallback() {
+        return this._lastThirtyDaysCallback;
+    }
+    set lastThirtyDaysCallback(value) {
+        this._lastThirtyDaysCallback = value;
+    }
     /** Get/set the tooltip builder */
     get tooltipBuilder() {
         return this._tooltipBuilder;
@@ -2213,11 +2387,55 @@ export class CalendarCore {
     today() {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
+        const endOfToday = new Date();
+        endOfToday.setHours(23, 59, 59, 0);
         this._goToDate(today, true);
         if (this._todayCallback) {
             this._todayCallback();
         }
     }
+    /** Go to yesterday */
+    yesterday() {
+        const today = new Date();
+        const yesterdayFrom = new Date(today.setDate(today.getDate() - 1));
+        yesterdayFrom.setHours(0, 0, 0, 0);
+        const yesterdayTo = new Date(yesterdayFrom);
+        yesterdayTo.setHours(23, 59, 59, 0);
+        const dateRange = [yesterdayFrom, yesterdayTo];
+        this._adapter.setRange(dateRange);
+        this._goToDate(yesterdayFrom, true);
+        if (this._yesterdayCallback) {
+            this._yesterdayCallback();
+        }
+    }
+    /** Go to last seven days */
+    lastSevenDays() {
+        const today = new Date();
+        const lastSevenDaysFrom = new Date(today.setDate(today.getDate() - 7));
+        lastSevenDaysFrom.setHours(0, 0, 0, 0);
+        const lastSevenDaysTo = new Date();
+        lastSevenDaysTo.setHours(23, 59, 59, 0);
+        const dateRange = [lastSevenDaysFrom, lastSevenDaysTo];
+        this._adapter.setRange(dateRange);
+        this._applyValue(dateRange);
+        if (this._lastSevenDaysCallback) {
+            this._lastSevenDaysCallback();
+        }
+    }
+    /** Go to last thirty days */
+    lastThirtyDays() {
+        const today = new Date();
+        const lastThirtyDaysFrom = new Date(today.setDate(today.getDate() - 30));
+        lastThirtyDaysFrom.setHours(0, 0, 0, 0);
+        const lastThirtyDaysTo = new Date();
+        lastThirtyDaysTo.setHours(23, 59, 59, 0);
+        const dateRange = [lastThirtyDaysFrom, lastThirtyDaysTo];
+        this._adapter.setRange(dateRange);
+        this._applyValue(dateRange);
+        if (this._lastThirtyDaysCallback) {
+            this._lastThirtyDaysCallback();
+        }
+    }
     /** Toggles a date selected or unselected */
     toggleDate(date, force) {
         this._onDateSelected(date);

package/esm/calendar/calendar-dom-utils.d.ts

@@ -38,6 +38,12 @@ export declare function getFooter(): HTMLElement;
 export declare function getClearButton(): HTMLElement;
 /** Returns a today button. */
 export declare function getTodayButton(): HTMLElement;
+/** Returns a yesterday button. */
+export declare function getYesterdayButton(): HTMLElement;
+/** Returns a last seven days button. */
+export declare function getLastSevenDaysButton(): HTMLElement;
+/** Returns a last thirty days button. */
+export declare function getLastThirtyDaysButton(): HTMLElement;
 /** Checks whether an event originated from a date element, returning the element if it did. */
 export declare function eventIncludesDate(evt: Event, includeDisabled?: boolean): HTMLElement | null;
 /** Checks whether an event originated from an element with the given id, returning the element if it did. */

package/esm/calendar/calendar-dom-utils.js

@@ -270,6 +270,42 @@ export function getTodayButton() {
     todayButton.appendChild(slot);
     return todayButton;
 }
+/** Returns a yesterday button. */
+export function getYesterdayButton() {
+    const yesterdayButton = document.createElement('forge-button');
+    yesterdayButton.id = CALENDAR_CONSTANTS.ids.YESTERDAY_BUTTON;
+    yesterdayButton.setAttribute('part', CALENDAR_CONSTANTS.parts.YESTERDAY_BUTTON);
+    yesterdayButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.YESTERDAY_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_YESTERDAY_BUTTON_TEXT;
+    yesterdayButton.appendChild(slot);
+    return yesterdayButton;
+}
+/** Returns a last seven days button. */
+export function getLastSevenDaysButton() {
+    const lastSevenDaysButton = document.createElement('forge-button');
+    lastSevenDaysButton.id = CALENDAR_CONSTANTS.ids.LAST_SEVEN_DAYS_BUTTON;
+    lastSevenDaysButton.setAttribute('part', CALENDAR_CONSTANTS.parts.LAST_SEVEN_DAYS_BUTTON);
+    lastSevenDaysButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.LAST_SEVEN_DAYS_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_LAST_SEVEN_DAYS_BUTTON_TEXT;
+    lastSevenDaysButton.appendChild(slot);
+    return lastSevenDaysButton;
+}
+/** Returns a last thirty days button. */
+export function getLastThirtyDaysButton() {
+    const lastThirtyDaysButton = document.createElement('forge-button');
+    lastThirtyDaysButton.id = CALENDAR_CONSTANTS.ids.LAST_THIRTY_DAYS_BUTTON;
+    lastThirtyDaysButton.setAttribute('part', CALENDAR_CONSTANTS.parts.LAST_THIRTY_DAYS_BUTTON);
+    lastThirtyDaysButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.LAST_THIRTY_DAYS_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_LAST_THIRTY_DAYS_BUTTON_TEXT;
+    lastThirtyDaysButton.appendChild(slot);
+    return lastThirtyDaysButton;
+}
 /** Checks whether an event originated from a date element, returning the element if it did. */
 export function eventIncludesDate(evt, includeDisabled) {
     const element = getEventPath(evt).find(p => p.classList && p.classList.contains(CALENDAR_CONSTANTS.classes.DATE));