All Day Events in a lightning component

Question

I'm building an events component that shows events based on a dropdown for Today, Tomorrow, This Week, and Next Week. But, I'm running into an issue with all day events. I'm basing a query off of activity date is between the given set of start date and end date parameters.

@AuraEnabled
    public static List<Event> getEvents(String StringStartDate, String StringEndDate)
    {
        Date startDate;
        Date endDate;
        system.debug('Dates: ' + StringStartDate + ' ' + StringEndDate);
        if(StringStartDate != null && StringStartDate != '')
            startDate = Date.valueOf(StringStartDate);

        if(StringEndDate != null && StringEndDate != '')
            endDate = Date.valueOf(StringEndDate);

        system.debug('Dates: ' + startDate + ' ' + endDate);
        List<Event> events = [SELECT Id, WhoId, Subject, StartDateTime, EndDateTime, WhatId, What.Name, 
                              Sub_Type__c, Type__c, RecordTypeId, ActivityDate
                              FROM Event
                              WHERE OwnerId =: UserInfo.getUserId()
                              AND ActivityDate >= :startDate AND ActivityDate <= :endDate ];

        return events;
    }

Forgive the messy string conversions, thanks lightning components. ;) Anyhow, the query is returning events correctly. I'm running into the issue when displaying the events.

In my lightning component. This is the display I'm getting:

I can't just merely set a timezone offset because it is dependent on the users timezone. And, it is displaying correctly for a timed event. How can I fix the date display for the all day event to correctly reflect the correct timezone without affecting the time events that are working as expected? Does anyone know why it is working for one and not the other?

Theoretically, I don't want to display a time for an all day event anyhow, so it would be easy to display something different in an aura:renderIf, or merely adding an if statement to my format (if that is possible).

Here is my code in the component, trimmed down for readability to the important stuff

<aura:iteration items="{!v.currentList}" var="e" >
    <ul class="slds-wrap">
        <li class="slds-m-right_large">
            <span class="slds-text-title">Start: </span>
            <ui:outputDateTime class="slds-text-body__small" value="{!e.StartDateTime}" format="MMM d, yyyy h:mm a" />
        </li>
        <li class="slds-m-right_large">
            <span class="slds-text-title">End: </span>
            <ui:outputDateTime class="slds-text-body__small" value="{!e.EndDateTime}" format="MMM d, yyyy h:mm a" />
        </li>
    </ul>
</aura:iteration>

Answer 1

I found a solution to my specific problem.

The ui:outputDateTime automagically converts your given date time into the logged in users timezone settings. So, when you have an all day event, it is stored in the data base as: 2017-08-07T00:00:00.000Z. So when that date time gets converted into my local timezone, it equates to 7 PM the day before.

I solved this by using an aura:renderIf and if it was an all day event, I used the ui:outputDate instead of the ui:outputDateTime.

<ul class="slds-wrap">
    <li class="slds-m-right_large">
        <span class="slds-text-title">Start: </span>
        <aura:renderIf isTrue="{!e.IsAllDayEvent}">
            <ui:outputDate class="slds-textbody__small" value="{!e.StartDateTime}" />
            <aura:set attribute="else">
                <ui:outputDateTime class="slds-text-body__small" value="{!e.StartDateTime}" format="MMM d, yyyy h:mm a"/>
            </aura:set>
        </aura:renderIf>
    </li>
    <li class="slds-m-right_large">
        <span class="slds-text-title">End: </span>
        <aura:renderIf isTrue="{!e.IsAllDayEvent}">
            <ui:outputDate class="slds-textbody__small" value="{!e.EndDateTime}" />
            <aura:set attribute="else">
                <ui:outputDateTime class="slds-text-body__small" value="{!e.EndDateTime}" format="MMM d, yyyy h:mm a"/>
            </aura:set>
        </aura:renderIf>
    </li>
</ul>