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<>()
<ant-calendar></ant-calendar>
Input data of 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>