https://github.com/fullcalendar/fullcalendar-angular

The official Angular component for FullCalendar
https://github.com/fullcalendar/fullcalendar-angular

angular calendar event full-sized fullcalendar

Last synced: 19 days ago
JSON representation

The official Angular component for FullCalendar

• Host: GitHub
• URL: https://github.com/fullcalendar/fullcalendar-angular
• Owner: fullcalendar
• License: mit
• Created: 2017-10-15T16:54:51.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T15:28:12.000Z (6 months ago)
• Last Synced: 2024-05-23T00:52:57.839Z (5 months ago)
• Topics: angular, calendar, event, full-sized, fullcalendar
• Language: TypeScript
• Homepage: https://fullcalendar.io/docs/angular
• Size: 1.43 MB
• Stars: 1,049
• Watchers: 32
• Forks: 172
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-angular - fullcalendar-angular - The official Angular component for FullCalendar. (Table of contents / Third Party Components)
• fucking-awesome-angular - fullcalendar-angular - The official Angular component for FullCalendar. (Table of contents / Third Party Components)

README

        

# FullCalendar Angular Component

The official [Angular](https://angular.io/) Component for [FullCalendar](https://fullcalendar.io)

## Installation

Install the Angular connector, the core package, and any plugins (like [daygrid](https://fullcalendar.io/docs/month-view)):

```sh

npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

```

## Usage

First, connect `FullCalendarModule` to your app module:

```js

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FullCalendarModule } from '@fullcalendar/angular';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FullCalendarModule // register FullCalendar with your app

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Then, use the `full-calendar` component, supplying an [options](https://fullcalendar.io/docs#toc) object:

```js

import { Component } from '@angular/core';

import { CalendarOptions } from '@fullcalendar/core';

import dayGridPlugin from '@fullcalendar/daygrid';

@Component({

  selector: 'app-root',

  templateUrl: `

    


      
Demo App

      

    

  `,

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  calendarOptions: CalendarOptions = {

    plugins: [dayGridPlugin],

    initialView: 'dayGridMonth',

    weekends: false,

    events: [

      { title: 'Meeting', start: new Date() }

    ]

  };

}

```


You can even supply nested templates:

```html

  

    {{arg.timeText}}

    {{arg.event.title}}

  

```

## Supported Angular Versions

`@fullcalendar/angular` version 6 supports Angular 12 - 18

## Links

- [Documentation](https://fullcalendar.io/docs/angular)

- [Example Project](https://github.com/fullcalendar/fullcalendar-examples/tree/main/angular15)

## History

This project is built and maintained by [irustm](https://github.com/irustm) in partnership with the maintainers of FullCalendar. The project was originally called `ng-fullcalendar` which can still be [found on NPM](https://www.npmjs.com/package/ng-fullcalendar).

## Development

You must install this repo with [PNPM](https://pnpm.io/):

```

pnpm install

```

Available scripts (via `pnpm run `):

- `build` - build production-ready dist files

- `watch` - build & watch development dist files

- `start` - run a simple example application

- `test` - test headlessly

- `test:dev` - test interactively

- `clean`