Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ng-fullcalendar/ng-fullcalendar
The official Angular component for FullCalendar
https://github.com/ng-fullcalendar/ng-fullcalendar
angular calendar event full-sized fullcalendar
Last synced: 3 months ago
JSON representation
The official Angular component for FullCalendar
- Host: GitHub
- URL: https://github.com/ng-fullcalendar/ng-fullcalendar
- 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 (7 months ago)
- Last Synced: 2024-05-23T00:52:57.839Z (7 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
- fucking-awesome-angular - ng-fullcalendar - Fullcalendar module for Angular. (Table of contents / Third Party Components)
- awesome-angular - ng-fullcalendar - Fullcalendar module for Angular. (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`