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.
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?