# calendangular

> Angular 2.x.x , 4.x.x calendangular

Latest version **1.0.4** (published 2019-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install calendangular
pnpm add calendangular
yarn add calendangular
bun add calendangular
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-03-09 |
| First published | 2019-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 6.9.0 |
| Dependencies | 4 |
| Unpacked size | 226.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rodrigo Cardozo |
| Maintainers | cardozorodrigo |
| Keywords | angular, angular5, angular 5, fullcalendar, full calendar, angular calendar |

## Links

- npm: https://www.npmjs.com/package/calendangular
- Repository: https://github.com/cardozo/calendangular
- Issues: https://github.com/cardozo/calendangular/issues
- npm.io page: https://npm.io/package/calendangular

## Dependencies (4)

- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [fullcalendar](https://npm.io/package/fullcalendar.md) 3.6.1
- [@types/jquery](https://npm.io/package/@types/jquery.md) 3.2.17
- [@types/fullcalendar](https://npm.io/package/@types/fullcalendar.md) 3.5.2

## Recent versions

- 1.0.4 (latest) — 2019-03-09
- 1.0.3 — 2019-03-09
- 1.0.1 — 2019-03-09
- 1.0.0 — 2019-03-09

## README

# Angular fullcalendar module
Jquery fullcalendar module [FullCalendar](https://fullcalendar.io) 

This package wraps the fullcalendar module for Angular.

[![latest](https://img.shields.io/npm/v/calendangular/latest.svg)](https://www.npmjs.com/package/calendangular) 
<!-- [![Npm Downloads](https://img.shields.io/npm/dt/ng-fullcalendar.svg?maxAge=2592000)](https://www.npmjs.com/package/ng-fullcalendar) -->


This package support Angular 6, see please demo src.

## TODO

 - Upgrate this package to fullcalendar version 4! Stop Jquery!

## Getting started

Install via [npm](http://npmjs.com) :

```bash
npm install ng-fullcalendar
npm install fullcalendar@3.6.1
```

Then include the `FullCalendarModule` module in your module.

```typescript
import { FullCalendarModule } from 'ng-fullcalendar';

@NgModule({
  imports: [
    BrowserModule,
    FullCalendarModule,
    ...
  ]
  ...
})
export class AppModule {}
```
For index.html style urls

```html
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">
```

Or you can add this in your SCSS pipe 

```scss
@import "~/fullcalendar/dist/fullcalendar.css";
```

Import CalendarComponent in your component :

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  calendarOptions: Options;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  constructor() {}
  ngOnInit() {
     this.calendarOptions = {
        editable: true,
        eventLimit: false,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listMonth'
        },
        events: data
      };
  }

}
```
then your app.component.html

```html
<div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
        (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>
```

## Events binging

From 1.5.0 version new feature `[(eventsModel)]="events"` two events binding

```html
<div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" [(eventsModel)]="events"></ng-fullcalendar>
</div>
```

```ts

ngOnInit() {
  this.eventService.getEvents().subscribe(data => {
    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      selectable: true,
      events: [],
      };
  });
}
clearEvents() {
  this.events = [];
}
loadEvents() {
  this.eventService.getEvents().subscribe(data => {
    this.events = data;
  });
}

```

## Callbacks
Output 27 EventEmitters
```typescript
    eventDrop
    eventResize
    eventResizeStart
    eventResizeStop
    eventClick
    clickButton
    windowResize
    viewRender
    eventAfterRender
    eventAfterAllRender
    viewDestroy
    eventRender
    eventDestroy
    eventMouseOver
    eventMouseOut
    initialized
    select
    unselect
    dayClick
    navLinkDayClick
    navLinkWeekClick
    eventDragStart
    eventDragStop
    drop
    eventReceive
    dayRender
    resourceRender

```
## API

More api docs: [Official fullcalendar docs](https://fullcalendar.io/docs/)

Example render new event
```typescript
 let el = {
   title: 'New event',
   start: '2017-10-07',
   end: '2017-10-10',
   ...
 }
 this.ucCalendar.fullCalendar('renderEvent', el);
 this.ucCalendar.fullCalendar('rerenderEvents');
```


## Thanks

- Aleksandr Sobakar ([@xaosaki](https://github.com/xaosaki))
- Mario Mol ([@mariohmol](https://github.com/mariohmol))
- ([@vz28bh](https://github.com/vz28bh))

## License

MIT

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