angular7 日卡片式历可改变时间
时间: 2023-08-02 14:34:16 浏览: 68
如果你想在 Angular 7 中实现一个日卡片式历,可以使用第三方库如 `angular-calendar`。
`angular-calendar`提供了一个叫做 `mwl-calendar-day-view` 的组件,可以显示一个日历,每个日历项以卡片的形式呈现,并且支持拖拽和缩放来改变时间范围。
你可以通过以下步骤来使用 `mwl-calendar-day-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-day-view` 组件:
```
<mwl-calendar-day-view
[viewDate]="viewDate"
[events]="events"
(eventClicked)="handleEvent($event.event)">
</mwl-calendar-day-view>
```
在上面的示例中,`viewDate` 是指当前显示的日期,`events` 是指日历上显示的事件,`eventClicked` 是指当用户点击事件时要执行的处理函数。
你可以根据需要在组件类中定义 `viewDate` 和 `events`,并且实现 `handleEvent` 处理函数。
4. 支持拖拽和缩放:
如果你想要支持拖拽和缩放来改变时间范围,你需要在 `mwl-calendar-day-view` 上添加 `mwl-resizable` 和 `mwl-draggable` 指令,如下所示:
```
<mwl-calendar-day-view
[viewDate]="viewDate"
[events]="events"
(eventClicked)="handleEvent($event.event)"
mwl-resizable
mwl-draggable>
</mwl-calendar-day-view>
```
这样,用户就可以通过拖拽和缩放来改变日历显示的时间范围了。
希望这个回答能够帮助到你。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)