React-My-Events: Fixed date issue as start and end date is rendering incorrect in event card

samples/react-my-events/src/shared/components/DateBox/DateBox.tsx

@@ -55,9 +55,9 @@ export default class DateBox extends React.Component<IDateBoxProps, {}>{
           (this.props.size === IDateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), this.props.className
         )}
         data-automation-id="multipleDayBox">
-        <div className={styles.date} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM D").toUpperCase()}</div>
+        <div className={styles.month} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM").toUpperCase()}</div>
-        <hr className={styles.separator} />
+        <div className={styles.day}
-        <div className={styles.date} data-automation-id="multipleDayEndDateContainer">{endEvent.format("MMM D").toUpperCase()}</div>
+          data-automation-id="singleDayDayContainer">{startEvent.format("D") + "-" + endEvent.format("D")}</div>
       </div>);
   }
 }

samples/react-my-events/src/shared/components/EventCard/EventCard.tsx

@@ -66,8 +66,8 @@ export const EventCard = (props: IEventCardProps) => {
                         <div>
                             <DateBox
                                 className={styles.dateBox}
-                                startDate={start}
+                                startDate={eventDate}
-                                endDate={end}
+                                endDate={endDate}
                                 size={IDateBoxSize.Small}
                                 themeVariant={themeVariant}
                             />
@@ -102,8 +102,8 @@ export const EventCard = (props: IEventCardProps) => {
                             <div className={styles.dateBoxContainer} style={{ height: 120, borderBottom: '1px solid rgb(237, 235, 233)' }}>
                                 <DateBox
                                     className={styles.dateBox}
-                                    startDate={start}
+                                    startDate={eventDate}
-                                    endDate={end}
+                                    endDate={endDate}
                                     size={IDateBoxSize.Medium}
                                     themeVariant={themeVariant}
                                 />

samples/react-my-events/src/shared/services/CalendarService.ts

@@ -27,7 +27,5 @@ export class CalendarService {
             Promise.reject(err);
         }
     }    
-
-    
 }
 

samples/react-my-events/src/webparts/reactMyEvents/components/ReactMyEvents.tsx

@@ -47,23 +47,18 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
   public getStartEndDate() {
     switch (this.props.dateRange) {
       case DateRange.AllUpcoming:
-        //this.endDate = moment().add(1, "years").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, 'years').format('YYYY-MM-DD');
         break;
       case DateRange.ThisWeek:
         this.endDate = moment().endOf('week').day('Friday').format('YYYY-MM-DD');
-        //this.endDate = moment().add(1, "weeks").format('YYYY-MM-DD');
         break;
       case DateRange.NextTwoWeeks:
-        //this.endDate = moment().add(3, "weeks").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(2, 'week').format('YYYY-MM-DD');
         break;
       case DateRange.Month:
-        //this.endDate = moment().add(1, "months").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, "months").format('YYYY-MM-DD');
         break;
       case DateRange.Quarter:
-        //this.endDate = moment().add(1, "quarters").format('YYYY-MM-DD');
         this.endDate = moment().endOf('week').day('Friday').add(1, "quarters").format('YYYY-MM-DD');
         break;
     }
@@ -105,6 +100,33 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
       });
   }
 
+
+  private _onPageUpdate = (pageNumber: number): void => {
+    this.setState({
+      currentPage: pageNumber
+    });
+  }
+
+  private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
+    return <div
+      data-is-focusable={true}
+      data-is-focus-item={true}
+      role="listitem"
+      aria-label={item.subject}
+    >
+      <EventCard
+        key={`eventCard${_index}`}
+        event={item}
+        isCompact={Layouts.compact}
+        layout={this.props.layout}
+        themeVariant={this.props.themeVariant} />
+    </div>;
+  }
+
+  private _onConfigure = () => {
+    this.props.context.propertyPane.open();
+  }
+
   private _renderFilmstripList(): JSX.Element {
     const {
       events } = this.state;
@@ -139,12 +161,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     } = this.state;
 
     const { maxEvents } = this.props;
-
-
-    let pagedItems: any[] = this.state.events;
-    const totalItems: number = pagedItems.length;
-    let showPages: boolean = false;
-
     let pagedEvents: ICalendarEvent[] = events;
     let usePaging: boolean = false;
 
@@ -158,7 +174,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     }
 
     return (
-
       <div className={styles.compact}>
         <CompactLayout
           items={pagedEvents}
@@ -177,32 +192,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     );
   }
 
-  private _onPageUpdate = (pageNumber: number): void => {
-    this.setState({
-      currentPage: pageNumber
-    });
-  }
-
-  private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
-    return <div
-      data-is-focusable={true}
-      data-is-focus-item={true}
-      role="listitem"
-      aria-label={item.subject}
-    >
-      <EventCard
-        key={`eventCard${_index}`}
-        event={item}
-        isCompact={Layouts.compact}
-        layout={this.props.layout}
-        themeVariant={this.props.themeVariant} />
-    </div>;
-  }
-
-  private _onConfigure = () => {
-    this.props.context.propertyPane.open();
-  }
-
   private _renderContent(): JSX.Element {
     const isCompact = this.props.layout;
     const { errorMessage, events, loading } = this.state;
@@ -224,11 +213,9 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
     }
 
     else if (events.length === 0) {
-      // we're done loading, no errors, but have no events
       return (<MessageBar
         messageBarType={MessageBarType.error}>{this.state.noEventsFoundMessage}</MessageBar>);
     }
-
   }
 
   public render(): React.ReactElement<IReactMyEventsProps> {