Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Include Full calendar in Angular 6?
Angular 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 .
Here are the following steps to include fullcalendar in angular6:
1. First you need to run below command into your terminal:
npm install ng-fullcalendar --save
2. After that, 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 { }
3. After that, add below code 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'
}
};
}
}
4. After that, 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>
And you are done, if you have any query related to this post, then you can ask question or comment below.
Comments
18 responses to “How to Include Full calendar in Angular 6?”
I want to open a modal when user clicks on a time slot of ‘AgendaDay’ view of FullCalendar using angular6.
In that modal I will create new appointment belonging to the slot clicked.
Thanks.
Hi Mohammad Shad, you want to open bootstrap modal popup? if yes then you need to add bootstrap in angular 6 and I have that in my blog post.
After done above, tell me, I will assist you.
Thank you
Thank you very much..
Your welcome jasmeen
Thanks for your post. I have implemented a slight different variation, using ViewChild and extracting the events in the AfterViewInit life cycle hook (by subscribing to the store, given I am using ngrx) in order to be able to access the CalendarComponent properties and call rerenderEvents when a new event is created .
import { Component, OnInit, AfterViewInit, ViewChild, } from ‘@angular/core’;
// FullCalendar
import { CalendarComponent } from ‘ng-fullcalendar’;
import { Options } from ‘fullcalendar’;
… other imports …
declare const $: any;
declare const moment: any;
@Component({
selector: ‘app-tasks’,
templateUrl: ‘./tasks.component.html’,
styleUrls: [‘./tasks.component.css’]
})
export class TasksComponent implements OnInit, AfterViewInit {
…
@ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
…
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: { left: ‘prev,next today’, center: ‘title’, right: ‘month,agendaWeek,agendaDay,listMonth’},
buttonText: { today: ‘Hoy’, month: ‘Mes’, week: ‘Semana’, day: ‘Día’ },
monthNames: [‘Enero’,’Febrero’,’Marzo’,’Abril’,’Mayo’,’Junio’,’Julio’,’Agosto’,’Septiembre’,’Octubre’,’Noviembre’,’Diciembre’],
monthNamesShort: [‘Ene’,’Feb’,’Mar’,’Abr’,’May’,’Jun’,’Jul’,’Ago’,’Sep’,’Oct’,’Nov’,’Dic’],
dayNames: [‘Domingo’,’Lunes’,’Martes’,’Miércoles’,’Jueves’,’Viernes’,’Sábado’],
dayNamesShort: [‘Dom’,’Lun’,’Mar’,’Mié’,’Jue’,’Vie’,’Sáb’],
firstDay: 1,
events:[]
};
//This gets the events:
this.store.dispatch( new rtasksActions.actions.LoadRTasksAction() );
}
ngAfterViewInit () {
this.store.select(‘rtasks’).subscribe( rtasks => {
if( !isNullOrUndefined(rtasks.data) ){
const newArray = rtasks.data.map( tarea => {
return {
… tarea,
start : tarea.date,
backgroundColor : ( new Date() > new Date(tarea.date) )
? ‘#dd4b39’ : ‘#00a65a’, //Red or Green
title: ( tarea.manual_entry == 1 )
? tarea.description
: `\n\r${tarea.client_name} ${tarea.client_last_name} \n\r ${tarea.product}`
}
})
this.calendarOptions = { … this.calendarOptions, events: newArray };
this.ucCalendar.fullCalendar(‘rerenderEvents’);
/*This aborve line throws error (without it, no errors and I get events, but no inmediate rerender):
core.js:1673 ERROR ReferenceError: FC is not defined
at HTMLElement. (ng-fullcalendar.es5.js:28)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at jQuery.fn.init.push../node_modules/ng-fullcalendar/ng-fullcalendar.es5.js.jquery__WEBPACK_IMPORTED_MODULE_1___default.a.fn.fullCalendar (ng-fullcalendar.es5.js:8)
at CalendarComponent.push../node_modules/ng-fullcalendar/ng-fullcalendar.es5.js.CalendarComponent.fullCalendar (ng-fullcalendar.es5.js:483)
at SafeSubscriber._next (tasks.component.ts:116) … */
}
});
}
…
// What can I be missing ? Thanks in advance.
Hi hector check this working link:
https://therichpost.com/how-to-include-full-calendar-in-angular-7
Thank you for this..Really helpful 🙂
Thank you david
Hi, Can we use this in Angular 4?
Yes, you can use this.
Hi Ajay,
i have followed the above steps and installed the ng fullcalendar, but running out with error “Failed to load resource: the server responded with a status of 404 ()”. can you please help me in resolving this.
Thanks,
Naresh
Hi Naresh, I think, you have path issue and you can my post related to to Angular 7 full calendar.
I am not able include Full calendar in angular 6 application using visual studio 2017 .net core, when i run the application i am getting “Cannot Get/”. can you please assist.
You can try it with the help for jquery also or you can show ne your code and email me your code.
Thank you
Ajay,
I am working with Angular 6, but when I compile my project for production with aot option, the fullcalendar loses some of the functionality, none of the scheduler features work. I think the compiler is removing some of the necessary classes, have you seen that before?
I appreciate any assistance you could provide.
Thanks,
Duffy
Okay then you can full calendar direct with libraries.
How to goto custom date on ngoninit?
You want to add custom date?