angular 日历可改变时间

如果你想要在 Angular 中实现一个可改变时间的日历，可以使用第三方库如`angular-calendar`。

`angular-calendar`提供了一个叫做 `mwl-calendar-month-view` 的组件，它可以显示一个月份的日历，并且支持拖拽和缩放来改变时间范围。

你可以通过以下步骤来使用 `mwl-calendar-month-view` 组件：

1. 安装依赖：

   npm install angular-calendar date-fns --save

2. 导入模块：

在你的模块中导入 `CalendarModule`：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { CalendarModule } from 'angular-calendar';

   import { AppComponent } from './app.component';

   @NgModule({
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       CalendarModule.forRoot()
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
   })
   export class AppModule {}

3. 在模板中使用 `mwl-calendar-month-view` 组件：

   <mwl-calendar-month-view
     [viewDate]="viewDate"
     [events]="events"
     (eventClicked)="handleEvent($event.event)">
   </mwl-calendar-month-view>

在上面的示例中，`viewDate` 是指当前显示的月份日期，`events` 是指日历上显示的事件，`eventClicked` 是指当用户点击事件时要执行的处理函数。

你可以根据需要在组件类中定义 `viewDate` 和 `events`，并且实现 `handleEvent` 处理函数。

4. 支持拖拽和缩放：

如果你想要支持拖拽和缩放来改变时间范围，你需要在 `mwl-calendar-month-view` 上添加 `mwl-resizable` 和 `mwl-draggable` 指令，如下所示：

   <mwl-calendar-month-view
     [viewDate]="viewDate"
     [events]="events"
     (eventClicked)="handleEvent($event.event)"
     mwl-resizable
     mwl-draggable>
   </mwl-calendar-month-view>

这样，用户就可以通过拖拽和缩放来改变日历显示的时间范围了。

希望这个回答能够帮助到你。