2

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.

2

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.

  • it worked like a charm.I had to wrap it up within $A.getcallback() – Debarun Sengupta Jul 17 '17 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.