# angular-calendar-year-view

> angular-calendar-year-view based on angular calendar moduel

Latest version **2.0.2** (published 2019-04-04) · MIT license · 101 weekly downloads

## Install

```sh
npm install angular-calendar-year-view
pnpm add angular-calendar-year-view
yarn add angular-calendar-year-view
bun add angular-calendar-year-view
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2019-04-04 |
| First published | 2019-02-24 |
| Weekly downloads | 101 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 227.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mariemchaabeni |
| Keywords | angular, javascript, typescript, typeahead, directive, angular-material |

## Links

- npm: https://www.npmjs.com/package/angular-calendar-year-view
- npm.io page: https://npm.io/package/angular-calendar-year-view

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2019-04-04
- 2.0.1 — 2019-03-31
- 2.0.0 — 2019-03-30
- 1.0.2 — 2019-03-09
- 1.0.1 — 2019-02-27
- 1.0.0 — 2019-02-26
- 0.0.8 — 2019-02-25
- 0.0.7 — 2019-02-25
- 0.0.6 — 2019-02-25
- 0.0.5 — 2019-02-24
- 0.0.4 — 2019-02-24
- 0.0.3 — 2019-02-24
- 0.0.2 — 2019-02-24
- 0.0.1 — 2019-02-24

## README

# angular 6.0+ calendar year view

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

## How it looks
![Image description](https://i.imgur.com/IafcF0j.png)

 

## Getting started
First install through npm:

```bash
npm i angular-calendar-year-view --save
```

You need to import in your index.html:

```html
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
```

## 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
<angular-calendar-year-view  
       [themecolor]="themecolor" 
       [events]="events"  
       [viewDate]="viewDate"  
       [nothingToshowText]="nothingToshowText"
       (eventClicked)="eventClicked($event)" 
       (actionClicked)="actionClicked($event)" >
</angular-calendar-year-view>
```
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: '<i class="fa fa-fw fa-times"></i>',
      name: 'delete'
    },
    {
      label: '<i class="fa fa-fw fa-pencil"></i>',
      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](https://i.imgur.com/qFxZnIX.png)
```html
<angular-calendar-year-view  [events]="events"  [viewDate]="viewDate" [customTemplate]="Customtemplate" ></angular-calendar-year-view>
<ng-template #Customtemplate>
        My custom template
</ng-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

---
_Source: https://npm.io/package/angular-calendar-year-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._