Fork from : https://github.com/MariemChaabeni/angular-calendar-year-view
npm install angular11-calendar-year-viewFork from :
https://github.com/MariemChaabeni/angular-calendar-year-view
``bash`
npm i angular-calendar-year-view --save`
Work with angular platform-browserbash`
npm i @angular/platform-browser@11.2.3 --save
You need to import in your index.html:
`html
`
`typescript
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularCalendarYearViewModule } from 'angular-calendar-year-view';
@NgModule({
imports: [
BrowserModule,
AngularCalendarYearViewModule
],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}
``
Use the view in your html:html`
[events]="events"
[viewDate]="viewDate"
[nothingToshowText]="nothingToshowText"
(eventClicked)="eventClicked($event)"
(actionClicked)="actionClicked($event)" >
In your typescript:
`typescript`
nothingToshowText:any='Nothing to show'; // "By default" => There are no events scheduled that day.
const colors: any = {
red: {
primary: '#ad2121',
secondary: '#FAE3E3'
},
yellow: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
};
actions: any[] = [
{
label: '',
name: 'delete'
},
{
label: '',
name: 'edit'
}
];
events: any = [
{
start: new Date(),
end: new Date(),
title: 'title event 1',
color: this.colors.red,
actions: this.actions
},
{
start: new Date(),
end: new Date(),
title: 'title event 2',
color: this.colors.yellow,
actions: this.actions
}
]
viewDate: Date = new Date();
themecolor: any = '#0a5ab3'`typescript`
eventClicked(event) {
console.log(event);
}
actionClicked(event) {
console.log('action',event.action)
console.log('event',event.event)
}`Custom popover template
!Image descriptionhtml`
My custom template`Set locale language
In your apps module:typescript``
import { NgModule,CUSTOM_ELEMENTS_SCHEMA,LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [
AngularCalendarYearViewModule
],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [
{
provide: LOCALE_ID,
useValue: 'fr'
}
]
})
export class MyModule {}