# ngyear-calender

> Year Calender For Angular 2+

Latest version **0.1.0** (published 2019-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngyear-calender
pnpm add ngyear-calender
yarn add ngyear-calender
bun add ngyear-calender
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-05-24 |
| First published | 2019-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 288.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Kalana Mahaarachchi |
| Maintainers | madhawa |
| Keywords | node, angular, calender, year calender, year view, angular year calender, angular calender |

## Links

- npm: https://www.npmjs.com/package/ngyear-calender
- Repository: https://github.com/kalana25/angular-calendar-year-view
- Homepage: https://github.com/kalana25/angular-calendar-year-view#readme
- Issues: https://github.com/kalana25/angular-calendar-year-view/issues
- npm.io page: https://npm.io/package/ngyear-calender

## Dependencies (1)

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

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-05-24
- 0.0.16 — 2019-05-23
- 0.0.15 — 2019-05-23
- 0.0.14 — 2019-05-23
- 0.0.13 — 2019-05-23
- 0.0.12 — 2019-05-23
- 0.0.10 — 2019-05-23
- 0.0.8 — 2019-05-23
- 0.0.7 — 2019-05-22
- 0.0.6 — 2019-05-22
- 0.0.5 — 2019-05-22
- 0.0.4 — 2019-05-22
- 0.0.3 — 2019-05-22
- 0.0.2 — 2019-05-22
- 0.0.1 — 2019-05-22

## README

# angular 6.0+ calendar year view

## Demo
GitHub: https://github.com/MariemChaabeni/angular-calendar-year-view

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"  
       (eventClicked)="eventClicked($event)" 
       (actionClicked)="actionClicked($event)" >
</angular-calendar-year-view>
```
In your typescript:

```typescript
const colors: any = {
    red: {
      primary: '#ad2121',
      secondary: '#FAE3E3'
    },
    yellow: {
      primary: '#e3bc08',
      secondary: '#FDF1BA'
    }
  };
  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
 actionClicked(event) {
    console.log(event);
  }
  eventClicked(event) {
    console.log(event)
  }
```

## License

MIT

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