Home Angular 7.2.4 Full Calendar Integration in Angular Latest Versions

Full Calendar Integration in Angular Latest Versions

by therichpost
Published: Last Updated on 35 comments
angular7

Hello to all, welcome to therichpost.com. In this post, I came with easy solution for Full Calendar Integration in Angular Latest Versions.

If you are new in Angular 7 then you can check my old posts related to Angular 7.

In this post, I will make Full Calendar Integration in Angular Latest Version(Angular 7.2.6) seems very easy with the help of jQuery(My Love).



Here are the complete code snippet you need to follow carefully:

1. Here are some basics commands to add new Angular setup and other libraries:

npm install -g @angular/cli

ng new easyfullcalendar

cd easyfullcalenar

npm install jquery --save

npm i fullcalendar

npm i moment

 

2. Here is code, you need to add your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js",
            "node_modules/moment/min/moment.min.js",
            "node_modules/fullcalendar/dist/fullcalendar.min.js"]
...

3. Here is the code, you need to add app.component.ts file:

import { Component } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'easyfullcalendar';

ngOnInit(){
       setTimeout(() => {
        $("#calendar").fullCalendar({  
                        header: {
                            left   : 'prev,next today',
                            center : 'title',
                            right  : 'month,agendaWeek,agendaDay'
                        },
                        navLinks   : true,
                        editable   : true,
                        eventLimit : true,
                        events: [
                            {
                                title : 'This is your',
                                start : '2019-03-03T12:30:00',
                                color : '#f9c66a' // override!
                            },
                            {
                                title : 'Your meeting with john',
                                start : '2019-03-07T12:30:00',
                                end   : '2019-03-09',
                                color : "#019efb"
                            },
                            {
                                title  : 'This is Today',
                                start  : '2019-03-12T12:30:00',
                                allDay : false, // will make the time show,
                                color  : "#57cd5f"
                            }
                        ],  // request to load current events
                    });

     }, 100);
   }
}

4. Here is the code, you need to add app.component.html file:

<div id="calendar"></div>

 

This is it and you have any query or you need to ask something then please comment below.

Harjas,

Thank you.

Note: if you will get below error:

“node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected”

The do below steps:

Step 1 : Go to package.json and modify “rxjs”: “^6.0.0” to “rxjs”: “6.0.0” Step 2 Run npm update in your project.Step 1 : Go to package.json and modify “rxjs”: “^6.0.0” to “rxjs”: “6.0.0”

Step 2 Run npm update in your project.

You may also like

35 comments

Subhi March 30, 2019 - 5:04 pm

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(…).fullCalendar is not a function
at my-calendar.component.ts:46

Reply
Ajay Malhotra March 31, 2019 - 1:31 pm

Did you include jquery? this is jquery error.

Reply
raul April 2, 2019 - 9:32 pm

A mí también me da error:
ERROR in C:/trja451/jhipster/telefonia/src/main/webapp/app/entities/calendario/calendario.component.ts(345,38):
TS2339: Property ‘modal’ does not exist on type ‘JQuery’.

Instalé todo como dijiste. También instale:
npm i @types/jquery

Reply
Ajay Malhotra April 3, 2019 - 3:56 pm

You are doing this in Angular 7?

Reply
Zaben April 3, 2019 - 8:18 pm

when I follow this, none of the calendar elements show up. Just the title.

Reply
Sam April 4, 2019 - 5:16 am

Thank you for this post.

Reply
Ajay Malhotra April 4, 2019 - 3:23 pm

Your welcome

Reply
jasmeen April 4, 2019 - 5:17 am

it is working nice.

Reply
Ajay Malhotra April 4, 2019 - 3:22 pm

Yeah and thanks

Reply
Sayed Hassan April 14, 2019 - 7:46 am

great, it worked for me perfectly in Angular 7.
Cheers

Reply
Ajay Malhotra April 14, 2019 - 7:47 am

Thank you Sayed 🙂

Reply
daniel June 5, 2019 - 3:49 pm

how do I know that your code works?? where did you put your repository???

Reply
Ajay Malhotra June 5, 2019 - 4:01 pm

You can check above code and it works fine.

Reply
Naresh June 26, 2019 - 12:06 pm

Hi, how to assign dynamic data, (fetching from database) to events

Reply
naresh June 28, 2019 - 5:30 am

hi, thank you for great post, it is working fine using angular 7, i had a question: how to assign dynamic data to events from database.

Reply
Ajay Malhotra June 28, 2019 - 5:41 pm

Hi Naresh, first tell me, for dynamic data, which backend you are using?

Reply
naresh July 1, 2019 - 9:03 am

Hi Ajay, i am using mssql as a backend and i am able to fetch the data using webapi.

Reply
Ajay Malhotra July 2, 2019 - 7:02 am

great and any other help you want?

Reply
naresh July 2, 2019 - 8:32 am

Hi Ajay, i am able to fetch the dynamic data, but unable to bind it to events

naresh July 2, 2019 - 8:34 am

Hi Ajay, i am able to fetch the dynamic data, but unable to bind it to events, can you please help me out

Ajay Malhotra July 2, 2019 - 4:59 pm

Yes sure and can you please show me, How are you binding the events?

Naresh July 3, 2019 - 5:20 am

Hi Ajay,

Please find the details below:
dashboard.component.html:

calendar.service.ts
import { Injectable,Inject } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable, of } from ‘rxjs’;
import { } from ‘rxjs’;

@Injectable()
export class CalendarService {
constructor(private _httpclient: HttpClient) { }
readonly BaseURI = ‘http://localhost:54277/’;

getcalendar() {
return this._httpclient.get(this.BaseURI + ‘api/calendar/Index’);
}
}

dashboard.component.ts:
declare var $: any;
import { CalendarService } from ‘./../../shared/calendar.service’;

constructor(public http: HttpClient,private fb: FormBuilder,
private router: Router,
private route: ActivatedRoute,
private _calendarservice:CalendarService ) { }

ngOnInit() {
this._calendarservice.getcalendar().subscribe(data => {
this.events = data;
console.log(this.events);
});

setTimeout(() => {
$(“#calendar”).fullCalendar({
header: {
left : ‘prev,next today’,
center : ‘title’,
right : ‘month,agendaWeek,agendaDay’
},
navLinks : true,
editable : true,
eventLimit : true,
// events: this.events,
events:[],
});
}, 100);
}

Reply
naresh July 3, 2019 - 5:23 am

Hi Ajay,

In dashboard.component.html, i have called

Reply
Ajay Malhotra July 3, 2019 - 4:54 pm

You did not declare “events ” variable?

Reply
Julien Pitt August 28, 2019 - 7:11 am

Great Post.

Reply
Ajay Malhotra August 28, 2019 - 4:07 pm

Thank you

Reply
Nitheesh May 15, 2020 - 7:58 am

Could someone help me in adding events from a external JSON file to this full-calendar in “angular”?

Reply
Nandom June 6, 2020 - 3:49 am

This is a wonderful tutorial… Thank you so much for sharing… It really helped me

Reply
Ajay Malhotra June 6, 2020 - 3:50 am

Thank you

Reply
Juan March 27, 2021 - 1:10 pm

Buenos días, consulta mi calendario funciona muy bien todo solo que no encuentro la manera de colocarlo todo en español sabes como gracias

Reply
Kanhaiya April 5, 2021 - 1:50 pm

Hii,how can we add start and end time as well as start and end date in our events array?

Reply
Ajay Malhotra April 6, 2021 - 4:04 pm

Yes

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.