Installation

npm install ant-agenda

Import the library

Firstly, import the AntAgendaModuel to your *.module.ts file.

import { AntAgendaModule } from 'ant-agenda';

@NgModule({
    imports: [
        ...
        AntAgendaModule
    ],
    ...
}

Use the Calendar

1. Calendar component

This is the main part of the calendar, which displays dates and the number of event on each date.

import { CalendarElement } from 'ant-agenda';

<ngx-calendar language="vi" [data]="data" [selectedEvents]="selectedEvents"></ngx-calendar>

let selectedEvents: BehaviorSubject<CalendarElement> = new BehaviorSubject<CalendarElement>(null);

selectedEvents is used as an identifier to match a <ngx-calendar></ngx-calendar> with a <ngx-event-list></ngx-event-list>. By assigning those element with the same selectedEvents, you create a 'data connection' between them so that the calendar element knows where to transfer data to.

2. Event list component

This component show the the list of events of each date, together with its detail.

<ngx-event-list language="vi" [selectedEvents]="selectedEvents"></ngx-event-list>

@Input

The Input [selectedEvents] must receive a variable of BehaviourSubject<CalendarElement> with the inital value set to null in order to let the component know from which calendar component it should retrieve data.

The Input [bottomButton] is optional object and used to display a button at the bottom of the event list.

{
    "name": "ButtonName",
    "class": "CSS Class" 
}

@Output

// Triggered when user click the bottom button
@Output() onBottomButtonClick: EventEmitter<>()

Input data of <ant-calendar></ant-calendar>

Calendar events

To pass data to the calendar, which is an array of AntEvent class, use Input binding [data].

import { AntEvent } from 'ant-agenda';

var myEvents: BehaviorSubject<AntEvent[]> = new BehaviorSubject<AntEvent[]>([]);

// Pass data to the calendar
let eventList: AntEvent[] = [
    new AntEvent(
        'Test event 1', 
        new Date(2018, 6, 10, 10, 30)
    ),
    new AntEvent(
        'Test Event 2',
        new Date(2018, 6, 10, 15),
        new Date(2018, 7, 10, 11),
        'yellow'
    )
];

myEvents.next(eventList);

<ngx-calendar [data]="myEvents"></ngx-calendar>

Events

onDateSelected: Triggerd when user tap/click on a date. $event: array of AntEvent[] in that date.

Style customization

Wrap each of these elements with a div then set font-size, width, height for that div to modify the size of the calendar.

1. Calendar component

textColor: string;
eventStyle: string; // image text-full text-short
previousButtonText: string;
nextButtonText: string;

<ngx-calendar
    headerBgColor="#E7F2F7"
    hoverColor="#E9FFF1"
    eventStyle="text-short"
></ngx-calendar>

2. Eventlist component

eventBgColor: string;
bgColor: string;
textColor: string;

<ngx-event-list
    eventBgColor="#a8a7a7"
    bgColor="#8f8e8e"
    textColor="white"></ngx-event-list>

Language & Date format

1. Import a language pack (*.ts) following this structure:

export class LangPackVI {
  months = ['Tháng Một',
            'Tháng Hai',
            'Tháng Ba',
            'Tháng Tư',
            'Tháng Năm',
            'Tháng Sáu',
            'Tháng Bảy',
            'Tháng Tám',
            'Tháng Chín',
            'Tháng Mười',
            'Tháng Mười một',
            'Tháng Mười hai'];
  monthAbbrs = ['Một', 'Hai', 'Ba', 'Bốn', 'Năm', 'Sáu', 'Bảy', 'Tám', 'Chín', 'Mười', 'Mười một', 'Mười hai'];
  monthNarrs = ['Mo', 'Ha', 'B', 'Tu', 'N', 'S', 'Ba', 'T', 'C', 'M', 'MM', 'MH'];
  days = ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
  dayAbbrs = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
  dayShorts = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
  dayNarrs = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
  longDateFormat = 'MMMM yyyy';
  shortDateFormat = 'MM/dd/yy';
}

import { LangPackVI } from './lang/vi';

2. Register the language pack

import { LanguageConfigService } from 'ant-agenda';

constructor(languageConfigService: LanguageConfigService) {
    languageConfigService.registerLanguagePack('vi', new LangPackVI());
}

3. Using the registered language

Input the localeID to the componenet Example:

<ngx-calendar language="vi"></ngx-calendar>
<ngx-event-list language="vi"></ngx-event-list>