Following code implementation is used for the below use case.
1. Search the users.
2. Select Date-time range.
3. Click Search button to view the Event records that were created during the date-time range selected and belongs to the users selected.
Sample Code:
Apex Class:
public with sharing class CalendarController {
@AuraEnabled
public static List < OptionWrapper > findUsers( String strName ) {
List < OptionWrapper > options = new List < OptionWrapper >();
String strNameFilter = strName + '%';
system.debug( 'Filter is ' + strNameFilter );
for ( User objUser : [ SELECT Id, Name FROM User WHERE IsActive = true AND Name LIKE: strNameFilter ] ) {
OptionWrapper objWrap = new OptionWrapper();
objWrap.label = objUser.Name;
objWrap.value = objUser.Id;
options.add( objWrap );
}
return options;
}
@AuraEnabled
public static List< EventWrapper > findEvents( List < String > userIds, DateTime startDT, DateTime endDT ) {
system.debug( 'User Ids are ' + userIds );
system.debug( 'Dates are ' + startDT + ' - ' + endDT );
List< EventWrapper > eventWraps = new List< EventWrapper >();
for ( Event objEvent : [ SELECT Id, StartDateTime, EndDateTime, Owner.Name, Subject
FROM Event
WHERE OwnerId IN: userIds AND ( StartDateTime >=: startDT OR StartDateTime <=: endDT ) AND ( EndDateTime <=: endDT OR EndDateTime >=: startDT ) ] ) {
EventWrapper objWrap = new EventWrapper();
objWrap.Id = objEvent.Id;
objWrap.StartDateTime = objEvent.StartDateTime.format();
objWrap.EndDateTime = objEvent.EndDateTime.format();
objWrap.OwnerName = objEvent.Owner.Name;
objWrap.Subject = objEvent.Subject;
eventWraps.add( objWrap );
}
return eventWraps;
}
public class OptionWrapper {
@AuraEnabled
public String label;
@AuraEnabled
public String value;
}
public class EventWrapper {
@AuraEnabled
public String Id;
@AuraEnabled
public String StartDateTime;
@AuraEnabled
public String EndDateTime;
@AuraEnabled
public String OwnerName;
@AuraEnabled
public String Subject;
}
}
Apex Class:
public with sharing class CalendarController {
@AuraEnabled
public static List < OptionWrapper > findUsers( String strName ) {
List < OptionWrapper > options = new List < OptionWrapper >();
String strNameFilter = strName + '%';
system.debug( 'Filter is ' + strNameFilter );
for ( User objUser : [ SELECT Id, Name FROM User WHERE IsActive = true AND Name LIKE: strNameFilter ] ) {
OptionWrapper objWrap = new OptionWrapper();
objWrap.label = objUser.Name;
objWrap.value = objUser.Id;
options.add( objWrap );
}
return options;
}
@AuraEnabled
public static List< EventWrapper > findEvents( List < String > userIds, DateTime startDT, DateTime endDT ) {
system.debug( 'User Ids are ' + userIds );
system.debug( 'Dates are ' + startDT + ' - ' + endDT );
List< EventWrapper > eventWraps = new List< EventWrapper >();
for ( Event objEvent : [ SELECT Id, StartDateTime, EndDateTime, Owner.Name, Subject
FROM Event
WHERE OwnerId IN: userIds AND ( StartDateTime >=: startDT OR StartDateTime <=: endDT ) AND ( EndDateTime <=: endDT OR EndDateTime >=: startDT ) ] ) {
EventWrapper objWrap = new EventWrapper();
objWrap.Id = objEvent.Id;
objWrap.StartDateTime = objEvent.StartDateTime.format();
objWrap.EndDateTime = objEvent.EndDateTime.format();
objWrap.OwnerName = objEvent.Owner.Name;
objWrap.Subject = objEvent.Subject;
eventWraps.add( objWrap );
}
return eventWraps;
}
public class OptionWrapper {
@AuraEnabled
public String label;
@AuraEnabled
public String value;
}
public class EventWrapper {
@AuraEnabled
public String Id;
@AuraEnabled
public String StartDateTime;
@AuraEnabled
public String EndDateTime;
@AuraEnabled
public String OwnerName;
@AuraEnabled
public String Subject;
}
}
Lightning Web Component:
HTML:
<template>
<div class="slds-box slds-theme_default">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2">
<lightning-input type="text" label="Enter the Name to search" name="username" onchange={handleInputChange}></lightning-input>
<div class="slds-p-top_small slds-p-bottom_small">
<lightning-button onclick={findUsers} label="Find Users" variant="brand"></lightning-button>
</div>
<lightning-dual-listbox options={options}
label="Select Users"
source-label="Available"
selected-label="Selected"
onchange={handleChange}></lightning-dual-listbox>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input type="datetime" label="Start Date/Time" name="stdt" onchange={handleInputChange}></lightning-input>
<lightning-input type="datetime" label="End Date/Time" name="enddt" onchange={handleInputChange}></lightning-input>
</div>
</div>
<div class="slds-p-top_small slds-p-bottom_small">
<lightning-button onclick={findEvents} label="Find Events" variant="brand"></lightning-button>
</div>
<div>
<lightning-datatable key-field="Id"
data={events}
columns={columns}
hide-checkbox-column="true"
show-row-number-column="false"></lightning-datatable>
</div>
</div>
</template>
JavaScript:
import { LightningElement, track } from 'lwc';
import fetchUsers from '@salesforce/apex/CalendarController.findUsers';
import findEvents from '@salesforce/apex/CalendarController.findEvents';
const columns = [
{ label: 'Subject', fieldName: 'Subject' },
{ label: 'Start', fieldName: 'StartDateTime' },
{ label: 'End', fieldName: 'EndDateTime' },
{ label: 'Owner', fieldName: 'OwnerName' },
];
export default class Calendar extends LightningElement {
@track options = [];
@track valuesCheck = [];
@track values = [];
@track events;
@track columns = columns;
@track strName;
@track startDT;
@track endDT;
findUsers( event ) {
var strSearchKey = this.strName;
console.log( 'Search Key is ' + strSearchKey );
fetchUsers( { strName:strSearchKey } )
.then(result => {
console.log( 'Result is ' + JSON.stringify( result ) );
this.options = [];
if ( this.values ) {
console.log( 'Values are ' + this.values );
for ( var j = 0; j < this.values.length; j++ )
this.options.push( this.values[ j ] );
}
for ( var i = 0; i < result.length; i++ ) {
if ( !this.valuesCheck.includes( result[ i ].value ) ) {
this.options.push( result[ i ] );
}
}
})
.catch(error => {
console.log( 'Error is ' + JSON.stringify( error ) );
});
}
handleChange( event ) {
this.valuesCheck = [];
this.values = [];
const selectedOptionsList = event.detail.value;
console.log( 'Selected Options are ' + JSON.stringify( selectedOptionsList ) );
for ( var i = 0; i < selectedOptionsList.length; i++ ) {
this.valuesCheck.push( selectedOptionsList[ i ] );
for ( var j = 0; j < this.options.length; j++ ) {
if ( this.options[ j ].value == selectedOptionsList[ i ] )
this.values.push( this.options[ j ] );
}
}
}
findEvents() {
var userIds = [];
for ( var i = 0; i < this.values.length; i++ )
userIds.push( this.values[ i ].value );
console.log( 'User Ids are ' + userIds );
var varST = this.startDT;
var varET = this.endDT;
findEvents( { userIds:userIds, startDT:varST, endDT:varET } )
.then(result => {
console.log( 'Event Result is ' + JSON.stringify( result ) );
/*for ( var i = 0; i < result.length; i++ ) {
if ( result[ i ].Owner )
result[ i ].OwnerName = result[ i ].Owner.Name;
}*/
this.events = result;
})
.catch(error => {
console.log( 'Error is ' + JSON.stringify( error ) );
});
}
handleInputChange( event ) {
if ( event.target.name == 'username' )
this.strName = event.target.value;
else if ( event.target.name == 'stdt' )
this.startDT = event.target.value;
else if ( event.target.name == 'enddt' )
this.endDT = event.target.value;
}
}
JavaScript-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Output: