如何调整MatDialog中内嵌Mat-calendar的尺寸至正常显示？

我创建了一个内嵌Mat-calendar的MatDialog，目前可通过设置width和height调整Dialog尺寸，但日历的日期表格仍过大（如图1）。若启用Dialog的width: '300px'配置，会出现如图2的异常显示效果，希望将其调整为如图3的正常样式。

相关代码 #

组件模板代码 #

<mat-card class="">
  <div class="flex justify-around items-center">
    <button mat-button (click)="today()">Today</button>
    <button mat-flat-button (click)="clearSelected()"[color]="'accent'">Clear</button>
    <button mat-flat-button (click)="select($event)" [color]="'primary'">Select</button>
  </div>
  <mat-calendar
    [dateClass]="dateClass()"
    #picker panelClass="endDate"
    [(selected)]="selectedDate"
    (selectedChange)="onSelect($event)">
  </mat-calendar>

样式代码 #

.example-header {
    display: flex;
    align-items: center;
    padding: 0.5em;
}
::ng-deep.md-datepicker-input-container {
    width: 200px;
}

Dialog打开代码 #

this._matDialog.open(DialogDueDateTableDialog, {
                // width: '300px',
                // height: 'h-full',
                // autoFocus: false,
                // maxHeight: '90vh', //you can adjust the value as per your view
                data: {
                    content:this.activatedRow,
                    column: column.name,
                    row:    row,
                    allData: this.rowData
                }
            })
            .afterClosed()
            .pipe(
                tap(() => this.activatedRow = null)
            );

显示效果 #

• 图1：日历日期表格过大的显示效果
  
• 图2：设置Dialog宽度后的异常显示效果
  
• 目标效果：日历正常显示的目标效果
  

步骤1：启用Dialog宽度配置 #

先打开Dialog的宽度设置，同时添加适配小屏幕的参数：

this._matDialog.open(DialogDueDateTableDialog, {
    width: '300px',
    maxWidth: '100vw', // 适配移动端小屏幕
    autoFocus: false,
    maxHeight: '90vh',
    data: {
        content:this.activatedRow,
        column: column.name,
        row:    row,
        allData: this.rowData
    }
})

步骤2：添加Mat-calendar适配样式 #

在组件样式文件中添加以下代码，穿透Angular样式隔离强制调整日历内部元素尺寸：

/* 让日历容器占满Dialog宽度并缩小内边距 */
::ng-deep .mat-calendar {
    padding: 8px;
    width: 100% !important;
}

/* 缩小月份年份标题字体 */
::ng-deep .mat-calendar-header {
    font-size: 14px;
    padding: 4px 0;
}

/* 调整日期单元格的大小和字体 */
::ng-deep .mat-calendar-body-cell {
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    font-size: 12px;
}

/* 缩小星期标题字体 */
::ng-deep .mat-calendar-body-label {
    font-size: 11px;
    padding: 4px 0;
}

/* 避免卡片内容溢出 */
mat-card {
    padding: 8px;
    margin: 0;
    overflow: hidden;
}

步骤3：优化按钮栏布局 #

窄宽度下调整按钮布局，避免挤压换行：

.flex.justify-around.items-center {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

mat-button, mat-flat-button {
    font-size: 12px;
    padding: 4px 8px;
}

原理：Mat-calendar自带默认最小尺寸，直接设置Dialog宽度会导致内部元素挤压溢出。通过::ng-deep穿透样式隔离，强制覆盖日历内部元素的尺寸参数，让日历自适应Dialog宽度，同时保持布局正常。

内容的提问来源于stack exchange，提问作者Andy Band