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.

By therichpost

Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

35 thoughts on “Full Calendar Integration in Angular Latest Versions”
  1. ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(…).fullCalendar is not a function
    at my-calendar.component.ts:46

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

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

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

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

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

  7. 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);
    }

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

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