I need to display a modal popup when i click on event in my calendar with editing details of that event, Please any one suggest me the right way to display popup, i would like to call a "Event Click" function of full calendar to display popup.


<aura:component controller="CalendarCtrl" implements="force:appHostable">
    <ltng:require scripts="/resource/Bootstrap_ltng/js/jquery-2.1.4.min.js,/resource/FullCalendar/fullcalendar.min.js,/resource/FullCalendar/fullcalendar.js, /resource/FullCalendar/lib/js/moment.min.js, /resource/FullCalendar/lib/js/jquery-ui.min.js,/resource/FullCalendar/lib/js/multiSelect/jquery.multiselect.js,/resource/FullCalendar/lib/js/multiSelect/jquery.multiselect.filter.js" styles="/resource/BootStrap1/css/bootstrap.min.css,/resource/FullCalendar/fullcalendar.min.css,/resource/FullCalendar/lib/css/multiselect/jquery.multiselect.css,/resource/FullCalendar/lib/css/multiselect/jquery.multiselect.filter.css,/resource/FullCalendar/lib/themes/smoothness/jquery-ui.css" afterScriptsLoaded="{!c.init}" />
    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:registerEvent name="btnClick" type="c:ButtonClicked" />
    <aura:handler name="btnClick" event="c:ButtonClicked" action="{!c.openNewEventDialog}" />
    <aura:attribute name="startDateTime" type="DateTime" />
    <aura:attribute name="endDateTime" type="DateTime" />
    <aura:attribute name="dueDateTime" type="DateTime" />
    <aura:attribute name="subject" type="String" />
    <aura:attribute name="view" type="String" description="Use this variable to fetch my records or team records " default="My View" />
    <aura:attribute name="EventTypes" type="Calendar_Settings__c[]" description="Event types" default="" />
    <aura:attribute name="settings" type="Calendar_Settings__c[]" description="calendar settings" />
    <div class="container-fluid">
        <div class="row">
            <div aura:id="calendar-filter" class="filters col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding:0px;">
            <div class="row">
                <div class="col-md-4 col-sm-4 colxs-12">
                <div id="viewAs" class="left-radio-filter panel panel-primary">
                    <div class="filter-view-header panel-heading"><span id="view-header">View As</span></div>
                    <div id="My_view" class="viewAs">
                        <ui:inputRadio aura:id="myview" value="" label="My View" name="view" click="{!c.setViewType}" labelClass="left-filter-label" />
                    <div id="Team_view" class="viewAs">
                        <ui:inputRadio aura:id="teamview" value="" label="Team View" name="view" click="{!c.setViewType}" labelClass="left-filter-label" />

             <div class="col-md-8 col-sm-8 col-xs-12" style="padding-left:0px;">   
                <div id="filter-multiselect" class="left-multi-filter panel panel-primary">
                    <div class="panel-heading">
                    <aura:iteration items="{!v.EventTypes}" var="filter">
                        <div aura:id="inputcheckbox" class="inputcheckbox">
                            <ui:inputCheckbox click="{!c.filterEvents}" label="{!filter.Name}" text="{!filter.RecordTypeName__c}" aura:id="filteroption" labelClass="left-filter-label"> </ui:inputCheckbox>
            <div class="calendar col-md-12 " style="padding:0px">
                <div id="calendar" style="margin:0px;">
            <div aura:id="newEvent-dialog-form" title="New Event header" class="dialogform">
                <form class="container">
                    <div class="row">
                        <fieldSet class="form-group col-md-4">
                            <label for="eSubject">Subject</label>
                            <ui:inputText aura:id="eSubject" value="{!v.subject}" class="form-control" />
                        <fieldSet class="form-group col-md-4">
                            <!-- <label for="eSubject">Event Type</label> -->
                            <ui:inputSelect label="Event Type" class="form-control" aura:id="eventType">
                                <aura:iteration items="{!v.EventTypes}" var="filter">
                                    <ui:inputSelectOption text="{!filter.Id}" label="{!filter.RecordTypeName__c}" />
                    <div class="row">
                        <fieldSet class="form-group col-md-4">
                            <label for="eDuteDate">Due Date</label>
                            <ui:inputDateTime aura:id="eDueDate" value="{!v.dueDateTime}" class="form-control" />
                        <fieldSet class="form-group col-md-4">
                            <ui:inputDateTime label="Start Date" aura:id="eStart" value="{!v.startDateTime}" class="form-control" />
                    <div class="row">
                        <fieldSet class="form-group col-md-4">
                            <ui:inputDateTime label="End Date" aura:id="eEndDate" value="{!v.endDateTime}" class="form-control" />
                    <ui:button label="Save" press="{!c.newEvent}" class="btn btn-primary" />

Client side Controller

    init : function(cmp, event, helper) {

        var eventSelect ="<div></div>"



        // put your options and callbacks here
        customButtons: {
        /*     newEventButton: {
                text: 'New Event',
                click: function(){

                var btnClick = cmp.getEvent("btnClick");




             } */

        aspectRatio: 2,
        height: 600,
        header: {
              left: 'prev,next today,newEventButton',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
        editable: true,
        events: $A.getCallback(function(start, end, timezone, callback){

            var cSettings = cmp.get("v.settings");     
            var action = cmp.get("c.getEvents");
            var viewType = cmp.get("v.view");
            var cEvents = {};
            var Events = [];

            console.log('####settings: '+  cSettings);
            console.log('####timeZone: '+ timezone);
           // console.log('end: '+  end);

                "StartDate": start,
                "EndDate" : end,
                "settings": cSettings,
                "viewType": viewType

               var state = r.getState();

              // console.log('State: '+ state);

               if(state =='SUCCESS'){    

                cEvents = JSON.parse(r.getReturnValue());

              /*  console.log('jSon String is : ')
                console.log('cEventsources are: ')
                console.log(cEvents); */





        }  //events function 

        eventClick: function(calEvent, jsEvent, view) {

          // window.open(calEvent.url, '_blank');
           //$.popupWindow(calEvent.url, { height: 500, width: 1000 });
            //console.log('----Hi-- '+calEvent.url);
            //return false;
            return false;




    newEvent : function(cmp,event,helper){

        var v_event = {};
        v_event.StartDateTime= cmp.get("v.startDateTime");
        v_event.EndDateTime= cmp.get("v.endDateTime");
         v_event.ActivityDate= cmp.get("v.dueDateTime");
        v_event.Subject= cmp.get("v.subject");
        var setting_mdt={};

        var eventType = cmp.get("v.EventTypes");

        var settingId =  cmp.find("eventType").get("v.value");

        for(i in eventType){


                setting_mdt = eventType[i]; 

                console.log('EventType is');




            var state = r.getState(); 

            var toastEvent = $A.get("e.force:showToast");



                    "title": "Success !",
                    "message": "Event has been successfully created."


                console.log('Event creation Status is: '+state);





       // console.log('closing the dialog');

    updateEvent : function(cEvent,helper){

        console.log('Event in update method');


    openNewEventDialog : function(cmp,event,helper){

        console.log('New Event dialog');

        var eventDialog = cmp.find('newEvent-dialog-form'); 

        dialog = $( "[data-aura-rendered-by=\'"+eventDialog.getGlobalId()+"\']" ).dialog({

            autoOpen: false,
            modal: true,
            draggable: true,
            height: 600,
            width: 900,
            resizable: true,
            position: { my:'center', at:'center'},

             buttons: {

            Cancel: function () {
            close: function() {


          dialog.dialog( "open" );



This is my VF page using lightning component

enter image description here

And I would like to display popup like this,

enter image description here

Please any one suggest me the better idea,

1 Answer 1


I had a similar challenge to build, but with a button. I managed to succesfully build a popup like you want, but I'm not 100% sure if it works in your code, but it's definitely worth a try.


In your component you need two extra div's:

<div class="slds">
    <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
        <div class="slds-modal__container">
            <div class="slds-modal__header slds-theme--info">
                <button class="slds-button slds-button--icon-inverse slds-notify__close" onclick="{!c.hidePopup}">
                    <c:svg aria-hidden="false" class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS105/assets/icons/action-sprite/svg/symbols.svg#close">
                    <span class="slds-assistive-text">Close</span>
                <h2 class="slds-text-heading--medium">Your Title</h2>
            <div class="slds-modal__content slds-p-around--medium">

This div is a hidden div (slds-fade-in-hide does that for you) which will display your form. The second div will display a dark background:

<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">


I assume that you have a controller to render your form, and that this form is a different component. If not, you should consider building it, as it's really easy.

Your helper class should look like this:

function_name :  function(component, event, helper){
//called on clicking your button
//run your form render code after that, run the following lines
helper.showPopupHelper(component, 'modaldialog', 'slds-fade-in-');

You'll also need a function to drop the screen (on cancel for example) as you can see in my component example, I called it hidePopup, this is what's in it:

helper.hidePopupHelper(component, 'modaldialog', 'slds-fade-in-');
helper.hidePopupHelper(component, 'backdrop', 'slds-backdrop--');


You'll need a couple of methods here:

  1. The method to call the form component, I assume you know how to do this. The only thing you have to do here is put that component in v.body like this component.set("{!v.body}", component);
  2. the showPopupHelper shows the correct popup

        showPopupHelper: function(component, componentId, className){
            var modal = component.find(componentId);
            $A.util.removeClass(modal, className + 'hide');
            $A.util.addClass(modal, className + 'open');
  3. the hidePopupHelper hides it when done and, because I use this popup for multiple components, it empties the body, so that next time you'll click it, you don't get the old body first.

        hidePopupHelper: function(component, componentId, className){
            var modal = component.find(componentId);
            $A.util.addClass(modal, className+'hide');
            $A.util.removeClass(modal, className+'open');
            component.set("v.body", "");

I hope it's a bit clear for you, good luck!

  • Thanks for the solution.. Exactly what i am looking for. And i have changed my existing component into your aproach and worked like a charm. thank you so much!
    – SFDC_Igle
    Jun 5, 2016 at 7:59
  • Nice! I'm glad it worked :) Jun 6, 2016 at 8:12
  • What's the key to show that modal. I am open document page lightningdesignsystem.com/components/modals/#overview, copy code to my file, and don't know how to make it work. I just want to see a working example.
    – Stiger
    Sep 26, 2016 at 11:31
  • Hey @Stiger, you can do that via a button which calls some javascript in your helper class, which assigns your component to v.body, and then call the helper.showPopupHelper, which I showed in my answer. Good luck! Sep 27, 2016 at 5:46
  • Thanks @Bagpiper001, I found it, it have to put inside .slds class. I miss that piece. Thanks
    – Stiger
    Sep 27, 2016 at 17:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .