Full Calendar Integration in Angular Latest Versions

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.

Comments

35 responses to “Full Calendar Integration in Angular Latest Versions”

  1. Subhi Avatar
    Subhi

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

  2. Ajay Malhotra Avatar

    Did you include jquery? this is jquery error.

  3. raul Avatar
    raul

    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

  4. Ajay Malhotra Avatar

    You are doing this in Angular 7?

  5. Zaben Avatar
    Zaben

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

  6. Sam Avatar
    Sam

    Thank you for this post.

  7. jasmeen Avatar
    jasmeen

    it is working nice.

  8. Ajay Malhotra Avatar

    Yeah and thanks

  9. Sayed Hassan Avatar
    Sayed Hassan

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

  10. Ajay Malhotra Avatar

    Thank you Sayed 🙂

  11. daniel Avatar
    daniel

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

  12. Ajay Malhotra Avatar

    You can check above code and it works fine.

  13. Naresh Avatar
    Naresh

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

  14. naresh Avatar
    naresh

    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.

  15. Ajay Malhotra Avatar

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

  16. naresh Avatar
    naresh

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

  17. Ajay Malhotra Avatar
    Ajay Malhotra

    great and any other help you want?

  18. naresh Avatar
    naresh

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

  19. naresh Avatar
    naresh

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

  20. Ajay Malhotra Avatar

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

  21. Naresh Avatar
    Naresh

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

  22. naresh Avatar
    naresh

    Hi Ajay,

    In dashboard.component.html, i have called

  23. Ajay Malhotra Avatar

    You did not declare “events ” variable?

  24. Julien Pitt Avatar
    Julien Pitt

    Great Post.

  25. Nitheesh Avatar
    Nitheesh

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

  26. Nandom Avatar
    Nandom

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

  27. Juan Avatar
    Juan

    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

  28. Kanhaiya Avatar
    Kanhaiya

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