Angular 8Bootstrap 4FullCalendarJquery

Angular 8 fullcalendar event tooltip

Angular 8 fullcalendar event tooltip
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 fullcalendar event tooltip.

angular 8 bootstrap tooltip on fullcalendar event hover
angular 8 bootstrap tooltip on fullcalendar event hover

In Angular, I will show, bootstrap tooltip on fullcalendar event hover with the help of jquery.

Here are the complete steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set bootstrap, fullcalendar, jquery environment into your angular 8 application:

npm install --save bootstrap

npm i fullcalendar //Add fullcalendar module

npm i moment //Add momentjs library

npm install jquery --save

npm install --save @types/jquery

npm install popper.js --save

3. Now you need to add below code into your angular.json file:

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

4. Now you need to add below code into your src/app/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,
                        eventRender: function(event, element, view) {
                          element.find('span.fc-title').attr('data-toggle', 'tooltip');  
                          element.find('span.fc-title').attr('title', event.title);   
                       },
                        events: [
                          {
                            title: 'All Day Event',
                            description: 'description for All Day Event',
                            start: '2019-12-01'
                          },
                          {
                            title: 'Long Event',
                            description: 'description for Long Event',
                            start: '2019-12-07',
                            end: '2019-12-10'
                          },
                          {
                            groupId: '999',
                            title: 'Repeating Event',
                            description: 'description for Repeating Event',
                            start: '2019-12-09T16:00:00'
                          },
                          {
                            groupId: '999',
                            title: 'Repeating Event',
                            description: 'description for Repeating Event',
                            start: '2019-12-16T16:00:00'
                          },
                          {
                            title: 'Conference',
                            description: 'description for Conference',
                            start: '2019-12-11',
                            end: '2019-12-13'
                          },
                          {
                            title: 'Meeting',
                            description: 'description for Meeting',
                            start: '2019-12-12T10:30:00',
                            end: '2019-12-12T12:30:00'
                          },
                          {
                            title: 'Lunch',
                            description: 'description for Lunch',
                            start: '2019-12-12T12:00:00'
                          },
                          {
                            title: 'Meeting',
                            description: 'description for Meeting',
                            start: '2019-12-12T14:30:00'
                          },
                          {
                            title: 'Birthday Party',
                            description: 'description for Birthday Party',
                            start: '2019-12-13T07:00:00'
                          },
                          {
                            title: 'Click for Google',
                            description: 'description for Click for Google',
                            url: 'http://google.com/',
                            start: '2019-12-28'
                          }
                        ]  // request to load current events
                    }).on('click', '.fc-agendaWeek-button, .fc-month-button, .fc-agendaDay-button, .fc-prev-button, .fc-next-button', function() {
   $('[data-toggle="tooltip"]').tooltip();
});
                    $('[data-toggle="tooltip"]').tooltip();
     }, 100);
   }
}

5. Now you need to add below code into src/app/app.component.html file:

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

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Jassa

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

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

Positive SSL