Export to Calendar using Aura Components

My project had a requirement to download a calendar file (ICS File) from a list of training records in data table

The idea is to create an ics file and download it, similar to how we download csv file. Once this file is downloaded, it can be saved in any calendar used by the user.

Component Code

  <lightning:datatable
                  class="client-table-text_wrap"
                  keyField="tkeyField"
                  data="{! v.programDetails.hhProgramData.upcomingPrograms }"
                  columns="{! v.upcomingProgramColumns }"
                  hideCheckboxColumn="true"
                  onrowaction="{!c.handleRowUpcomingCancel}"
                  showRowNumberColumn="false"
                />

Controller JS Code

 handleRowUpcomingCancel: function (component, event, helper) {
      var action = event.getParam('action');
      var row = event.getParam('row');
      switch (action.name) {
          case 'cancelProduct':
              helper.cancelProductAction(component,event);
              break;
          case 'exportProduct':
            helper.exportProductAction(component,event);
            break;              
 
      }
    },

Helper JS Code

 exportProductAction: function(component,event) {
        var action = component.get("c.getExportToCalendar");
        var row = event.getParam('row');
        action.setParams({
            'recordId' : row.recordId
        });
        action.setCallback(this, function(response) {
            var status = response.getState();
            if (status === "SUCCESS") {
                var vCal = response.getReturnValue();
                var hiddenElement = document.createElement('a');
                hiddenElement.href = 'data:text/calendar;charset=utf-8,' + encodeURI(vCal);
                hiddenElement.target = '_self'; // 
                hiddenElement.download = row.programName+'.ics'; 
                document.body.appendChild(hiddenElement);
                hiddenElement.click();
                this.showToast("Success", "Success!", 'Export completed successfully');                
            }
            else {
                var errors = response.getError();
                this.handleError(errors);
            }
        });    
        $A.enqueueAction(action);
     },

Apex Class

@AuraEnabled
public Static String getExportToCalendar(String recordId){
        String vCal='';
        //TODO - query from an object which has data for event date, time,
  // Location etc
   // Assuming it comes from Event_Record__c

 Event_Record__c evt = [actual SOQL ];
            vCal += 'BEGIN:VCALENDAR\n'+'VERSION:2.0 \n'+ 'PRODID:-//salesforce.com//Calendar//EN \n';
            vCal += 'BEGIN:VEVENT\n';
            vCal += 'UID:'+recordId+'\n';
            vCal += 'DTSTAMP;TZID=America/New_York:'+System.now().format('yyyyMMdd\'T\'HHmmss\'Z\'','America/New_York')+'\n';
            vCal += 'SUMMARY:'+evt.Product_Name__c+'\n';
            vCal += 'DESCRIPTION:'+evt.Product_Name__c+'\n';
            vCal += 'CATEGORIES:salesforce.com'+'\n';
            vCal += 'CREATED;TZID=America/New_York:'+System.now().format('yyyyMMdd\'T\'HHmmss\'Z\'','America/New_York')+'\n';
            vCal += 'LAST-MODIFIED;TZID=America/New_York:'+System.now().format('yyyyMMdd\'T\'HHmmss\'Z\'','America/New_York')+'\n';
            vCal += 'STATUS:CONFIRMED'+'\n';
            vCal += 'LOCATION:'+evt.Facility__r.Name+'\n';            
            vCal += 'DTSTART;TZID=America/New_York:'+evt.startDate.format('yyyyMMdd\'T\'HHmmss\'Z\'','America/New_York')+'\n';
            vCal += 'DTEND;TZID=America/New_York:'+evt.endDate.format('yyyyMMdd\'T\'HHmmss\'Z\'','America/New_York')+'\n';
            vCal += 'END:VEVENT \n'+'END:VCALENDAR\n';  
        }else{
            throw new AuraHandledException('Error in exporting to Calendar');
        }


        return vCal;
     }

when you open this ics file, you get a prompt like shown below

you can save in any calendar you follow like outlook or gmail or any other

Permanent link to this article: https://salesforcebuddy.com/2020/07/export-to-calendar-using-aura-components/

2 comments

    • kaur on July 16, 2021 at 3:56 am
    • Reply

    Hi,

    Is there a way to send the calendar invite with “No response requested” as we do on the regular outlook invite?

    Thank you!

      • Dave on August 28, 2021 at 12:14 am
        Author
      • Reply

      Thanks for your comment, This example is only for information, it does not expect a response, it will just save an entry in your calendar so you are aware of an upcoming appointment or meeting.

Leave a Reply

Your email address will not be published.