angular 11.0+ calendar year view

Fork from :
https://github.com/MariemChaabeni/angular-calendar-year-view

Demo

Live Demo: https://angular-ft5znm.stackblitz.io/

How it looks

!Image description

Getting started

First install through npm:

``bash
npm i angular-calendar-year-view --save
`
Work with angular platform-browser
`bash
npm i @angular/platform-browser@11.2.3 --save
`

You need to import in your index.html:

`html



`

Usage

Finally import the calendar module into your apps module:

`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
[themecolor]="themecolor"
[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 description
`html


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 {}
``

Inputs

| Input | description |
| ------ | ------ |
| themecolor | By default is #ff0000 |
| events | Events List |
| viewDate | It take the current date by default |
| nothingToshowText |By default => There are no events scheduled that day. |
| popoverEnabled | true by default |
| customTemplate | You can pass your temlate to popover |

Outputs

| Output | description |
| ------ | ------ |
| eventClicked | When event was clicked |
| actionClicked | When action was clicked |
| dayClicked | When day was clicked |

License

MIT