Hey there,

I actually have a nasty problem with application events in my lightning component:

I build a react app that uses the FullCalendar plugin (it's locker service save!) to display a nice customizeable calendar.
In my header I want to use the default salesforce datepicker plugin to select the date which should be displayed by the calenendar.

Unfortunately the number of available application events is really rare!
After I debugged the inputDate component and read the Aura docs, I saw that there is an application event called ui:showDatePicker.

http://documentation.auraframework.org/auradocs#reference?descriptor=ui:showDatePicker&defType=event

This event is being fired every time the user clicks on the datepicker icon in the input field and the datepicker ui is shown.

Due this is an application event, it should be fireable by my component to display a datepicker inside my component.

So far....

I implemented the fire mechanism in my react app but every time I call
 

var event = $A.get('e.ui:showDatePicker');

event.setParams({
    element: targetElementPlaceholder
});

event.fire()

$A.get(.....) returns undefined.

Other events like force:showToast work as expected.

To go some bit deeper into this behaviour, I built an test component.
This component looks like:
 

<aura:component controller="ContactController" implements="flexipage:availableForAllPageTypes">
    <!-- onload handler -->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <span onclick="{!c.datepicker}">Test</span>

</aura:component>

JS controller:
 

({
	init : function(component, event, helper) {
        
        window.ReactComponent = {
            component : component
        }
       
        console.log('Datepicker 2');

        setTimeout(function(){


            console.log($A.get('e.ui:showDatePicker'));

        }, 4000);
        
    },

    datepicker : function(c,e,h){
        console.log($A.get('e.ui:showDatePicker'));

        var evt = $A.get('e.ui:showDatePicker');

        evt.setParams({
            element : c.getElement()
        });

        evt.fire();
    }
})

As you can see, there is an init handler and a click handler for the span element.
If everything should be ok, the console.log($A.get('e.ui:showDatePicker')) inside the init method should output the same object like the log in the datepicker method.

But it doesn't.

I used the timeout to ensue that there is no conflict of availability of $A registered events.
Removing the timeout would result in the same output.

The interesting thing now is, that when I click on the span element, the event gets fired correctly and the datepicker appears right after the span element.

Does anyone have an idea why $A returns undefined when calling it in the init method or from anywhere else but not a controller function?

Thanks in advance!

Cheers
Flo