CODEWITHSUNDEEP
javascriptangulareventsfullcalendar
karlmnz
karlmnz

Reputation: 138

Callback angular function from jquery event

I am using Angular5 and trying to get the dayClick() event of the fullcalendar.io jquery plugin to callback to the angular component so I can open an angular component dialog populated from the calendar details.

To setup example do this, in console:

ng new pjt
cd pjt
npm install jquery fullcalendar --save

Update to .angular-cli.json to include

[styles]
"../node_modules/fullcalendar/dist/fullcalendar.min.css"

[scripts]
"../node_modules/jquery/dist/jquery.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js"

Add to main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

update the app.component.html

<div id='calendar'></div>
<div id="test" (click)="Clicked()" hidden="true"></div>

Add to app.component.ts

import 'fullcalendar';
declare let $:any;

@Component({...})
export class AppComponent {
...

  ngOnInit(){
    $('#calendar').fullCalendar({

      dayClick: function(date, jsEvent, view) {

          //alert('Clicked on: ' + date.format());
          $(this).css('background-color', 'red');

  ***** WANT A BETTER WAY TO CALL NG CLICKED() FUNCTION HERE TO REPLACE THE FOLLOWING 2 LINES *****
          document.getElementById("test").innerText = date.format();
          document.getElementById("test").click();
      }
    });

    $('#calendar').fullCalendar('changeView', 'agendaDay');
  }

  Clicked() {
    alert("Alert from ng func");
  }
}

Then ng server and click the day schedule part of the calendar.

NOTE this is angular 5 so it doesn't look like ng-controller or scope from ng v1 seems to be the right way to do this. I am looking for a cleaner way to call the function without having to have the 'test' div.

Upvotes: 4

Views: 1881

Answers (2)

Andrew Stalker
Andrew Stalker

Reputation: 757

Based on the fact you want to remove the <div id="test">Replace your function call with an arrow function call:

dayClick: (date, jsEvent, view) => {
    this.clicked(date, jsEvent, view);
}

Modify your clicked event to accept the parameters passed from the full calendar event:

Clicked(date, jsEvent, view) {
// do something with new inputs..
alert("Alert from ng func");
}

Using the arrow function syntax allows this to be bound to your AppComponent. This way you can directly call any function you like defined in the component.

Upvotes: 1

Ulrich Dohou
Ulrich Dohou

Reputation: 1559

Here a way you can do it. It will be better to use arrow function.

HTML code

<div id="test" #clicktag (click)="Clicked()" hidden="true"></div>

JS code

import { ViewChild, Component, ElementRef } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

ngOnInit(){
  $('#calendar').fullCalendar({
    dayClick:(date, jsEvent, view) => {
      $(jsEvent.currentTarget).css('background-color', 'red');
      $(this.clicktag.nativeElement).text(date.format());
      $(this.clicktag.nativeElement).trigger( "click" );
    }
  });
  $('#calendar').fullCalendar('changeView', 'agendaDay');
}

You can still take a look at this answer https://stackoverflow.com/a/36639596/6261137. Here they used only angular to trigger click

import { ViewChild, Component, ElementRef, Renderer } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

constructor(private renderer:Renderer) {}

ngOnInit(){
  let eventClick = new MouseEvent('click', {bubbles: true});
  $('#calendar').fullCalendar({
   dayClick:(date, jsEvent, view) => {
    $(jsEvent.currentTarget).css('background-color', 'red');
    $(this.clicktag.nativeElement).text(date.format());
    this.renderer.invokeElementMethod(this.clicktag.nativeElement, 'dispatchEvent', [eventClick]);
  }
 });
 $('#calendar').fullCalendar('changeView', 'agendaDay');
}

Upvotes: 0

Related Questions