@acpaas-ui/ngx-agenda 中文文档教程

Question

@acpaas-ui/ngx-agenda

@acpaas-ui/agenda 模块提供了aui-agenda 组件，可以作为日历显示事件。 目前该组件只能显示月视图。

Installation

npm install @acpaas-ui/agenda --save

在app.module.ts 中导入组件

import { AgendaModule } from '@acpaas-ui/agenda';

@NgModule({
    imports: [
        AgendaModule
    ]
})

Translation

可以通过forChild 函数翻译月份和星期几标签。

注意日期顺序： 0 = 星期日，1 = 星期一，2 = 星期二，... 6 = 星期六 0 = 一月，1 = 二月，... 11 = 十二月

@NgModule({
    imports: [
        AgendaModule.forChild(
            ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
            ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
        ),
    ]
})

Basic Usage

最基本的示例是只呈现当前日期的议程。

<aui-agenda
    [activeDate]="activeDate"
    [view]="'MONTH'"
></aui-agenda>

activeDate: Date 当前日期。 示例：“2018-01-10”将打开一月份的月视图。 “2018-02-20”将开启2月份的月视图。

view: string 活动视图。 目前，只有 MONTH 视图可用。

Define startday of week

可以定义哪一天是一周的第一天。 用数字定义日期（0 = 星期日，1 = 星期一，...）或使用 DAYS 枚举：（DAYS.MONDAY 计算结果为 1）import { DAYS } from @acpaas-ui/agenda。

<aui-agenda
    [startDayOfWeek]="0"
></aui-agenda>

Display events

<aui-agenda
    ...
    [events]="events"
></aui-agenda>

events: Event[] 事件列表。 一个事件应该至少有一个 startDate, endDate 和 'title.

Display events: template (only for month view)

可以在月视图中为事件项定义模板。

<ng-template #itemTemplate let-event="event">
    <aui-icon name="ai-calendar-3"></aui-icon> {{event.title}}
</ng-template>

<aui-agenda
    ...
    [events]="events"
    [monthEventItemTemplate]="itemTemplate"
></aui-agenda>

使用 ng-template 定义模板，使用 monthEventItemTemplate 在 aui-agenda 上定义。 在模板中，可以使用 let-event="event" 获取事件数据。

Navigate

在议程中导航有一个回调。 示例：从一月导航到二月，返回值为{ start: "2018-01-29...", end: "2018-03-4..."}。 该值包含月视图的第一天和最后一天。 请注意，第一天和最后一天取决于配置的 startDayOfWeek 属性。

<aui-agenda
    ...
    [events]="events"
    (navigate)="onNavigate($event)"
></aui-agenda>

Select day

单击一天有一个回调。 返回值是所选日期（独立于时区）的 YYYY-MM-DD 格式的字符串。

<aui-agenda
    ...
    (selectDay)="onSelectDay($event)"
></aui-agenda>

Click on "more items" (month view)

当一天的事件多于槽时，aui-agenda 将显示一个带有点击回调的“更多”按钮。 返回值是所选日期的 Date。

<aui-agenda
    ...
    (clickMore)="onClickMore($event)"
></aui-agenda>

Agenda size (month view)

aui-agenda 组件的样式基于父容器的可用宽度。 在侧边栏中使用该组件应该会自动呈现 aui-agenda 的小版本。 全屏呈现 aui-agenda 应该在桌面上呈现大版本，在小屏幕上呈现小版本。