+ Start a Discussion
Sainath VenkatSainath Venkat 

lightning calendar component to open record edit page on double click

I am working on one lightning component for a calendar on event object.

On single click in calendar its opening up edit page of event record creation but I just want want to do it on double click instead of single click.
Can anyone help me out in this issue please.
My code is below.
Component:
<aura:component controller="LightningCalender" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
	 <ltng:require styles="{!$Resource.Calender     + '/fullcalendar-3.9.0/fullcalendar.css'}"
                  scripts="{!join(',',
                           $Resource.Calender  + '/fullcalendar-3.9.0/lib/jquery.min.js',
                           $Resource.Calender  + '/fullcalendar-3.9.0/lib/moment.min.js',
                           $Resource.Calender  + '/fullcalendar-3.9.0/fullcalendar.js'
                           )}"
                  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
    
    <ltng:require styles="/resource/calender/fullcalendar-3.9.0/fullcalendar.css"/>
    
    <aura:attribute name='Objectlist' type='Object[]'/>
    <aura:attribute name="buttonstate" type="Boolean" default="false"/>
    
     <lightning:buttonStateful
        labelWhenOff="List View"
        labelWhenOn="Grid View"
        
        state="{!v.buttonstate}" onclick="{!c.handleClick }"/>
     
        <div id="calendar" class="slds-card">
      

    </div>
    <div id="listcalendar" class="slds-card"/>
</aura:component>

.js
({
	 afterScriptsLoaded: function(cmp,evt,helper){
         
         helper.fetchCalenderEvents(cmp);
        
    },
    
     handleClick : function(component, event, helper){ 
      
         var buttonstate = component.get("v.buttonstate");
         component.set("v.buttonstate",!buttonstate);
         if(!buttonstate){
          $("#listcalendar").show();
         $("#calendar").hide();
         $('#listcalendar').fullCalendar({
        	defaultView: 'listWeek',
             listDayFormat : true,
             events : component.get("v.Objectlist")
		});
        
         }
         else{
              $("#calendar").show();
           $("#listcalendar").hide();   
             helper.fetchCalenderEvents(component);
         }
        
    },

})

Helper.js
({
	loadDataToCalendar :function(component,data){  
        //Find Current date for default date
        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var currentDate = d.getFullYear() + '/' +
            (month<10 ? '0' : '') + month + '/' +
            (day<10 ? '0' : '') + day;
         
        var self = this;
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            selectable : true,
            defaultDate: currentDate,
            editable: true,
            eventLimit: true,
            events:data,
            dragScroll : true,
             droppable: true,
            weekNumbers : true,
  eventDrop: function(event, delta, revertFunc) {

    alert(event.title + " was dropped on " + event.start.format());

    if (!confirm("Are you sure about this change?")) {
      revertFunc();
    }
      else{
          var eventid = event.id;
          var eventdate = event.start.format();
          self.editEvent(component,eventid,eventdate);
      }

  },
            eventClick: function(event, jsEvent, view) {
           console.log(event.id);
              var editRecordEvent = $A.get("e.force:editRecord");
              editRecordEvent.setParams({
              "recordId": event.id
           });
           editRecordEvent.fire();
          },
            dayClick :function(date, jsEvent, view) {
              console.log(date.format());
                var datelist = date.format().toString().split('-');
             console.log(datelist[0]);
                console.log(parseInt(datelist[1])-1);
              var datetime = new Date(datelist[0],parseInt(datelist[1])-1,parseInt(datelist[2])+1,0,0,0,0);
            console.log(datetime);
             var createRecordEvent = $A.get("e.force:createRecord");
    createRecordEvent.setParams({
        "entityApiName": "Event",
        "defaultFieldValues": {
        'StartDateTime' :  datetime
        
    }
    });
    createRecordEvent.fire();
          },
            
            eventMouseover : function(event, jsEvent, view) {
            
          }
    });
    },
       
    
    formatFullCalendarData : function(component,events) {
        var josnDataArray = [];
        for(var i = 0;i < events.length;i++){
            var startdate = $A.localizationService.formatDate(events[i].StartDateTime);
            var enddate = $A.localizationService.formatDate(events[i].EndDateTime);
            josnDataArray.push({
                'title':events[i].Subject,
                'start':startdate,
                'end':enddate,
                'id':events[i].Id
            });
        }
      console.log('josnDataArray'+josnDataArray);
        return josnDataArray;
    },
     
    fetchCalenderEvents : function(component) {
         var action=component.get("c.getAllEvents");
       
         action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var data= response.getReturnValue();
               console.log(JSON.stringify(data));
                 var josnArr = this.formatFullCalendarData(component,response.getReturnValue());
                this.loadDataToCalendar(component,josnArr);
                component.set("v.Objectlist",josnArr);
           
            } else if (state === "ERROR") {
                                 
            }
        });
        
        $A.enqueueAction(action);
       
    }, 
    
    editEvent : function(component,eventid,eventdate){
         var action=component.get("c.updateEvent");
console.log(eventdate);
         action.setParams({ eventid : eventid ,
                           eventdate : eventdate});

         action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
            console.log('updated');
           
            } else if (state === "ERROR") {
                                 
            }
        });
        
        $A.enqueueAction(action);

    }
})


 
Meghna Vijay 7Meghna Vijay 7
Hi Sainath,

You can create an attribute name ="count" default="0" , use it in handleClick and increase it's value like count++ and show the calendar only when count =2.
 
handleClick : function(component, event, helper){ 
       var count = component.get('v.count');
        if(count == 2) {

         var buttonstate = component.get("v.buttonstate");
         component.set("v.buttonstate",!buttonstate);
         if(!buttonstate){
          $("#listcalendar").show();
         $("#calendar").hide();
         $('#listcalendar').fullCalendar({
        	defaultView: 'listWeek',
             listDayFormat : true,
             events : component.get("v.Objectlist")
		});
        
         }
         else{
              $("#calendar").show();
           $("#listcalendar").hide();   
             helper.fetchCalenderEvents(component);
         }
}
else {
      count ++;
      component.set("v.count", count);
}

Hope it helps, if it does mark it as solved.

Thanks​​​​​​​
Sainath VenkatSainath Venkat
Hi Meghna Vijay 7,

Thanks a lot for replying, actually on calendar on clicking on day edit page to create event will pop up but now what I ma looking is instead of poping up on single click I want it on double click.
I tried your code but does not work.
Ramakrishna Reddy GouniRamakrishna Reddy Gouni
Just try with ondblclick instead of onclick
User-added image