在 ejs-calendar 中禁用日期选择器

Question

在普通 ejs 日历中单击月份名称，会显示一个网格系统，可以切换月份和年份。我想禁用它。

<div id="container">
      <ejs-calendar
        #calendarObj
        [firstDayOfWeek]="1"
        dayHeaderFormat="narrow"
        (renderDayCell)="highlightWeekend($event)"
        [values]="date"
        [isMultiSelection]="isMultiSelection"
        [showTodayButton]="false"
        (created)="onCreated($event)"
        (change)="onClick($event)"
      >
      </ejs-calendar>
    </div>

Answer 1

我们可以禁用日历标题上的任何指针事件。将此添加到您的 component.css 文件

.e-title { pointer-events: none !important; }

Answer 2

将 [min] 月设置为 First-day 当月，将 [max] 月设置为当月的最后一天。

在component.ts文件中

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  providers: [ToolbarService, EditService, PageService]
})
export class AppComponent {
  today = new Date();
  firstDayOfMonth = new Date(
    this.today.getFullYear(),
    this.today.getMonth(),
    1
  );
  lastDayOfMonth = new Date(
    this.today.getFullYear(),
    this.today.getMonth() + 1,
    0
  );
  public ngOnInit(): void {}
}

并在.template.html

div id="container">
    <ejs-calendar
        #calendarObj
        [firstDayOfWeek]="1"
        dayHeaderFormat="narrow"
        (renderDayCell)="highlightWeekend($event)"
        [values]="date"
        [isMultiSelection]="isMultiSelection"
        [showTodayButton]="false"
        (created)="onCreated($event)"
        (change)="onClick($event)"
        start="month"
        [min]="firstDayOfMonth"
        [max]="lastDayOfMonth"
    >
    </ejs-calendar>
</div>

可以找到示例here

Answer 3

您可以使用下面的 css 代码禁用日历的标题。

  .e-calendar .e-header .e-title {
    pointer-events: none !important;
  }

示例 link：https://stackblitz.com/edit/disable-title-4eyzf1?file=app.component.css

在 ejs-calendar 中禁用日期选择器

Disable date-picker in ejs-calendar

html

calendar

syncfusion

ejs

angular