How to create ICS/Calendar File | Helps you to download the calendar invites

 

Want to know how to create ICS(Internet Calendar Scheduling) file for Business purpose....👀

  ICS (Internet Calendar Scheduling) file is a calendar file saved in a universal calendar format used by several email and calendar programs, including Microsoft Outlook, Google Calendar, Notes and Apple Calendar. It enables users to publish and share calendar information on the web and over email.

Lets see the code. The code is written in lwc(Lightning web component).

HTML:

  <template>
    <div class="login-container">
        <h1 style="size: 14px;"><b>Create ICS File</b></h1>
        <div class="form-group">
            <lightning-input type="datetime" name="input1" value={EventEndValue} onchange={startDate} label="Enter Start date/time value" ></lightning-input>
        </div>
        <div class="form-group">
            <lightning-input type="datetime" name="input1" value={EventEndValue} onchange={endDate} label="Enter End date/time value" ></lightning-input>
        </div>
        <div class="form-group">
            <lightning-input type="Text" class="Title" label="Title" id="title" value={titleValue} onchange={titleValue} name="password"></lightning-input>
        </div>
        <div class="form-group">
            <lightning-input type="Text" class="summary" label="Summary" id="summary" value={summaryValue} onchange={summaryy} name="password"></lightning-input>
        </div>
        <lightning-button onclick={generateICSFile} label="Export ICS File"></lightning-button>
    </div>
</template>

Css:

  .login-container {
    max-width: 400px;
    margin: auto;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 2em;
    border: 1px solid;
    box-shadow: 0 1em 3em -1.25em #0a3153;
    padding: 1em 2em;
}

.form-group {
    margin: 20px 0;
}

label {
    display: block;
}

input {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}


button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    background-color: lightskyblue;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

JavaScript:

    import { LightningElement,track,api } from 'lwc';

export default class IcsExport extends LightningElement {
     eventName;
     eventDescription;
     eventLocation = 'Nagpur';
     eventStartDate ;
     eventEndDate;

     startDate(event){
        this.eventStartDate = event.target.value;
     }
     endDate(event){
        this.eventEndDate = event.target.value;
     }
     summaryy(event){
        this.eventDescription = event.target.value;
     }
     titleValue(event){
        this.eventName = event.target.value;
     }
    generateICSFile() {
        let startDate = new Date(this.eventStartDate).toISOString().replace(/-|:|\.\d+/g, '');
        let endDate = new Date(this.eventEndDate).toISOString().replace(/-|:|\.\d+/g, '');
        const newLine = '\r\n';
        let content = 'BEGIN:VCALENDAR'+ newLine
    + 'VERSION:2.0' + newLine
    +'BEGIN:VEVENT' + newLine
    + 'SUMMARY:'+ this.eventName + newLine
    +'DESCRIPTION:' +this.eventDescription + newLine
    +'DTSTART:' + startDate + newLine
    +'DTEND:' + endDate + newLine
    +'LOCATION:'+this.eventLocation + newLine
    +'END:VEVENT' + newLine
    + 'END:VCALENDAR';
        let uri = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(content);
        let downloadLink = document.createElement('a');
        downloadLink.href = uri;
        downloadLink.download = `${this.eventName}.ics`;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    }
}

DEMO:

👀👀