Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Include Full calendar in Angular 7?
Angular 7 is just released and it is growing day by day very fastly and famous as single page application. I have also shared so many posts regarding fullcalendar and today I will implement fullcalendar in Angular 7.
Here is the working image:
Here are the working steps you need to follow:
1. Very first, here are the some basics commons commands to include Angular 7 Application on your machine:
$ npm install -g @angular/cli $ ng new angularfullcalendar // Set Angular7 Application on your pc $ cd angularfullcalendar // Go inside project folder $ ng serve // Run project http://localhost:4200/ //Check working Local server
2. Now, run below command into your terminal, to include fullcalendar module into your Angular 7 app:
npm install ng-fullcalendar --save
3. Now run below command into your terminal to update your update your types/jquery:
npm update @types/jquery
4. Now add below code into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FullCalendarModule } from 'ng-fullcalendar';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FullCalendarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5. Now add below command into your app.component.ts file:
import { Component } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-angular-app';
calendarOptions: Options;
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
}
};
}
}
6. Now add below code into your app.component.html file:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<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>
</div>
This is it, if you have any query related to this post, then please do comment below or ask question.
Thank you,
Harjas,
TheRichPost
Leave a Reply
You must be logged in to post a comment.