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

Question

@acpaas-ui/ngx-calendar

一个简单的日历组件，具有月、年和十年视图，您可以在其中轻松导航到特定日期。

Usage

import { CalendarModule } from '@acpaas-ui/ngx-calendar';

Documentation

访问我们的文档网站获取完整的操作文档和指南

API

Name	Default value	Description
@Input() selectedDate: Date;	-	The date the user selected. Will be used as a base for the different calendar views.
@Input() range: DateRange;	-	A date range to decide which dates are available for selection.
@Input() weekdayLabels: WeekdayLabelsConfig;	-	Override the default weekday labels. Can also be done in the forChild method.
@Input() monthLabels: MonthLabelsConfig;	-	Override the default month labels. Can also be done in the forChild method.
@Output() selectDate: EventEmitter<any>	-	Will emit the selected date and completion state (the date is complete when a day is picked).

Example

import { CalendarModule } from '@acpaas-ui/ngx-calendar;'

@NgModule({
    imports: [
        CalendarModule.forChild([
            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
        ], [
            'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
        ])
    ]
});

export class AppModule {};

import { DateRange } from '@acpaas-ui/js-date-utils';

public clickedDate: Date = new Date();
public range: DateRange = [1, 6];

selectDate(event) {
    if (event.complete) {
        this.clickedDate = event.date;
    }
}

<aui-calendar
    [range]="range"
    [selectedDate]="clickedDate"
    (selectDate)="selectDate($event)">
</aui-calendar>

Contributing

访问我们的Contribution Guidelines 获取更多关于如何贡献的信息。