0

I am using angular2 with angular2-fullcalendar. In my project i am taking data from the backend. Now my question is ,when i add an event using selecting the dates,i want it to display on the calendar successful submission of the data without reloading the page.Previously i was using $('#myCalendar').fullCalendar('renderEvents', newEvents, true); To get the work done.But i dont want to use jquery in the angular project .So is there any other alternatives for this other than using jquery.Please help.

Vikhyath Maiya
  • 3,122
  • 3
  • 34
  • 68
  • fullCalendar requires jQuery. So if you remove jQuery you can't use fullCalendar. – ADyson Jun 29 '17 at 08:25
  • then is there any alternative for angular ? Or is it advisable to use jquery with angular – Vikhyath Maiya Jun 29 '17 at 08:27
  • not if you want to use fullCalendar. There may be other calendar products you can use, I don't know, you can google that yourself. What's your problem with jQuery? It's quite useful. – ADyson Jun 29 '17 at 08:28

1 Answers1

0

Yes, the ViewChild along with ElementRef

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

@ViewChild('calendar') myCalendar: ElementRef;
myHtmlElement: HTMLElement;

ngOnInit() {
    this.myHtmlElement = this.myCalendar.nativeElement;
}

In your HTML : 

<!-- Where you actual calendar is, add #calendar to your tag -->
<div id="myCalendar" #calendar></div>
  • Same as JQuery : when you use `$('#myCalendar')` it fetches an HTML element. Here, you have access to it through `this.myHtmlElement`. All you need to do is `this.myHtmlElement['fullCalendar']('renderEvents', newEvents, true)` –  Jun 29 '17 at 08:30
  • @trichetriche _when you use `$('#myCalendar')` it fetches an HTML element_. No it doesn't. The return value from that statement is a **jQuery object**. The HTML element is just one property within that object. You can't call "fullCalendar()" on a HTML element, because "fullCalendar()" is a jQuery extension method. fullCalendar is implemented as a jQuery extension and therefore requires jQuery in order to work. It's impossible to use the calendar without it. – ADyson Jun 29 '17 at 08:46
  • Thank you for clearing that up; I di'nt know that. But still, you can at least do `$(this.myHtmlElement)` with that. –  Jun 29 '17 at 08:47
  • @trichetriche yes but then that uses jQuery, which kind of defeats the point of your workaround. – ADyson Jun 29 '17 at 09:14
  • Clearly. But it's a bit simpler since you don't have to make the id and the jquery selector match. And if you mismatch the #calendar with the ViewChild, you instantly get an error. –  Jun 29 '17 at 09:16
  • so the conclusion is using jquery cannot be skipped...right ? – Vikhyath Maiya Jun 29 '17 at 10:35
  • Looks like it ... Unless they have made a typescript index for it ? –  Jun 29 '17 at 10:37