Application event lightning undefined when called within dayclick event of fullcalendar

Question

I want to fire an application event(lightning) on day click event of full calendar.However $A.get("e.c:CalendarEvent") is always coming as undefined within day click event.How can I fire the event?

Controller code

loadDataToCalendar :function(data,component,param1,event){ 
    debugger;

    //alert('Data-->'+data.title);
    var paramvalueget=param1;
    component.set("v.parameter",paramvalueget);

    var d = new Date();
    d.setTime(d.getTime() + (365*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = 'Testing' + "=" + param1 + ";" + expires + ";path=/";
    //document.cookie = 'Testing' + "=" + param1 + ";" + ";path=/";



    //alert('Test--->'+component.get("v.parameter"));
    var userlang = $A.get("$Locale.language");
    console.log('Test--->'+userlang);

    $('#calendar').fullCalendar({
        //alert('Data aaya-->'+component.get("v.parameter"));
        locale: userlang,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },

        //alert('Data aaya-->'+component.get("v.parameter"));
         dayClick: function(date, jsEvent, view) {
            debugger;
            var name = 'Testing' + "=";
            var ca = document.cookie.split(';');
            for(var i = 0; i < ca.length; i++) {
                 var c = ca[i];
                 while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                 }
                if (c.indexOf(name) == 0) {
                    alert('Cookie--->'+c.substring(name.length, c.length));
                    var selectedtype=c.substring(name.length, c.length);
                }
            }
             //alert('Event-->'+event.title);
           //console.log('event starttime:'+jsEvent.StartDateTime);
            alert('Clicked on: ' + date.format());
             //alert('Let see-->'+component.get("v.parameter"));
             if(selectedtype=='Titration Check')
             {

            component.set('v.selecteddate', date.toISOString());
             var evt = $A.get("e.c:CalendarEvent");
        evt.setParams({ "Titration": component.get("v.selecteddate"),"NJ":component.get("v.selecteddate1"),"NJPEGJ":component.get("v.selecteddate2")});
           evt.fire();
                //addEvent(date);
                 //this.eventhandlercall(component,event);
                 //$(this).addClass('selectedDayTitration');
             $(this).css('background-color', 'red');
                 component.set("v.Visible1",false);
                 //component.set("v.ErrorMessage",'Please select the respective checkbox before selecting');

             component.set("v.TitrationButton",false);
       component.set("v.NJPEGButton",false);
       component.set("v.NJButton",true);

             }
             else if(selectedtype=='NJ Check')
             {
              component.set('v.selecteddate1', date.toISOString());
                 //addEvent(date);
                 //test();
                    // var evt = $A.get("e.c:CalendarEvent");
                    //evt.setParams({ "NJ": component.get("v.selecteddate1")});
                    //evt.fire();
               $(this).css('background-color', 'yellow');
                 //$(this).addClass('selectedDayNJ');

                 component.set("v.Visible1",false);

                 component.set("v.TitrationButton",false);
       component.set("v.NJPEGButton",true);
       component.set("v.NJButton",false);
             }
             else if(selectedtype=='NJ+PEGJ Check')
             {
                 component.set('v.selecteddate2', date.toISOString());
                     //var evt = $A.get("e.c:CalendarEvent");
                    //evt.setParams({ "NJPEGJ": component.get("v.selecteddate2")});
                    //evt.fire();
             $(this).css('background-color', 'green');
                 //$(this).addClass('selectedDayNJPEG');
                 component.set("v.Visible1",false);

                   component.set("v.TitrationButton",true);
       component.set("v.NJPEGButton",false);
       component.set("v.NJButton",false);
             }
             else
             {

                 component.set("v.Visible1",true);
                 component.set("v.ErrorMessage",'Please select the respective checkbox before selecting the respective dates');

             }
             //console.log('selected val--->'+component.get("v.selecteddate"));

    //alert('Current view: ' + view.name);


    // change the day's background color just for fun

      //alert('Hello test'+paramvalueget);
       },

        editable: true,

         events:data,

           eventClick: function(event,jsEvent, view) {
               debugger;
               //alert(event.url);
               console.log('event url:'+event.url);
               console.log('event starttime:'+event.StartDateTime);
               //component.find("expdate1").set("v.selecteddate",event.StartDateTime);
                alert('test'+view.name);
               //component.set()
                },
            eventMouseover: function(event, jsEvent, view) {

                             $(jsEvent.target).attr('title', event.title+' '+'Hora de inicio:'+new Date(event.start).toDateString()+' Hora de finalización: '+new Date(event.end).toDateString());

                      }
          //alert('Hello'+paramvalueget);
        //this.eventhandlercall(component,event); 
    });


     //var evt = $A.get("e.c:CalendarEvent");
    //evt.setParams({ "Titration": component.get("v.selecteddate"),"NJ":component.get("v.selecteddate1"),"NJPEGJ":component.get("v.selecteddate2")});
      //evt.fire();
   // $('.fc-today-button').text('hoy');
    $('.fc-today-button').hide();
    $('.fc-month-button').hide();
    $('.fc-basicWeek-button').hide();
      $('.fc-basicDay-button').hide();

    //alert('Hello-->'+component.get("v.param1"));
    //this.eventhandlercall(component,event);

Event

<aura:event type="APPLICATION" description="Event template">
   <aura:attribute name="Titration" type="DateTime"/>
    <aura:attribute name="NJ" type="DateTime"/>
    <aura:attribute name="NJPEGJ" type="DateTime"/>
</aura:event>

The function loadDataToCalendar is written in helper.

Answer 1

You are inside a jQuery function, using a jQuery event handler - you are going to need to use $A.getCallback()

Note, that even this can fail, especially this deep inside a jQuery function.

Anyway,

Try something like this:

dayClick: function(date, jsEvent, view) {

        $A.getCallback(function() { 
          var name = 'Testing' + "=";
          var ca = document.cookie.split(';');
          for(var i = 0; i < ca.length; i++) {
          //... everything that involves component or $A...
          // ...
          var evt = $A.get("e.c:CalendarEvent");
          evt.setParams({ "Titration": selecteddate, 
                          "NJ": selecteddate1,
                          "NJPEGJ":selecteddate2 });
          evt.fire();
          //....etc
        })

Docs here.