+
{startMoment.format("MMM D").toUpperCase()}
+
+
{endMoment.format("MMM D").toUpperCase()}
+
);
+ }
+}
\ No newline at end of file
diff --git a/samples/react-calendar-feed/src/shared/components/DateBox/DateBox.types.ts b/samples/react-calendar-feed/src/shared/components/DateBox/DateBox.types.ts
new file mode 100644
index 000000000..40234d5d4
--- /dev/null
+++ b/samples/react-calendar-feed/src/shared/components/DateBox/DateBox.types.ts
@@ -0,0 +1,15 @@
+export interface IDateBoxProps {
+ startDate: Date;
+ endDate: Date;
+ className?: string;
+ size: DateBoxSize;
+}
+
+export interface IDateBoxState {
+ // you just proved advertising works!
+}
+
+export enum DateBoxSize {
+ Small,
+ Medium
+}
\ No newline at end of file
diff --git a/samples/react-calendar-feed/src/shared/components/DateBox/index.ts b/samples/react-calendar-feed/src/shared/components/DateBox/index.ts
new file mode 100644
index 000000000..a323aa06c
--- /dev/null
+++ b/samples/react-calendar-feed/src/shared/components/DateBox/index.ts
@@ -0,0 +1,2 @@
+export * from "./DateBox";
+export * from "./DateBox.types";
\ No newline at end of file
diff --git a/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.module.scss b/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.module.scss
new file mode 100644
index 000000000..fc8b97349
--- /dev/null
+++ b/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.module.scss
@@ -0,0 +1,188 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+$neutralLight: '[theme:neutralLight,default:#eaeaea]';
+$neutralSecondary: '[theme:neutralSecondary,default:#666666]';
+$white: '[theme:white,default:#ffffff]';
+$neutralPrimary: '[theme:neutralPrimary,default:#333333]';
+$neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]";
+
+.cardWrapper {
+ border: 1px solid;
+ border-color: transparent;
+ box-sizing: border-box;
+ outline: transparent;
+}
+
+.compactCard {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 2px !important;
+ border: none;
+ height: 68px;
+ margin-bottom: 12px;
+}
+
+.cardWrapper:focus {
+ border-color: $neutralSecondary;
+}
+
+.cardWrapper .dateBox {
+ border-color: $neutralTertiaryAlt;
+}
+
+.normalCard .dateBoxContainer {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.normalCard .category {
+ margin-bottom: 4px;
+}
+
+.compactCard .dateBox {
+ margin: auto 14px auto 0;
+ min-width: 64px;
+}
+
+[dir=rtl] .compactCard .dateBox {
+ margin: auto 0 auto 14px;
+}
+
+[dir=ltr] .compactCard .emptyStatePreviewContainer {
+ margin-right: 14px;
+}
+
+.compactCard .title {
+ font-size: 15px;
+ font-weight: 400;
+ margin: 0 0 3px;
+ max-height: 38px;
+ line-height: 19px;
+}
+
+.category,
+.datetime,
+.location {
+ font-size: 12px;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
+ height: 18px;
+}
+
+.category,
+.location {
+ color: $neutralPrimary;
+}
+
+.datetime {
+ color: $neutralPrimary;
+}
+
+.title {
+ display: block;
+ overflow: hidden;
+}
+
+.addToMyCalendar,
+.title {
+ font-weight: 400;
+ color: $neutralPrimary;
+}
+
+.addToMyCalendar {
+ font-size: 14px;
+ margin-top: 10px;
+}
+
+[dir=ltr] .addToMyCalendar {
+ margin-left: -8px;
+}
+
+[dir=rtl] .addToMyCalendar {
+ margin-right: -8px;
+}
+
+.root {
+ width: 100%;
+ align-items: center;
+ -webkit-font-smoothing: antialiased;
+ background-color: $white;
+ border: 1px solid #eaeaea;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ max-width: 320px;
+ min-width: 206px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
+ }
+
+.rootIsCompact {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ max-width: 480px;
+ height: 68px;
+ border: 1px solid transparent;
+}
+
+.rootIsActionable {
+ color: inherit;
+}
+
+.rootIsActionable:hover {
+ border-color: $neutralLight;
+}
+
+.dateBox {
+ border-color: $neutralTertiaryAlt;
+}
+
+.normalCard .title {
+ font-size: 17px;
+ font-weight: 300;
+ margin-bottom: 20px;
+ height: 44px;
+ line-height: 22px;
+}
+
+.normalCard .detailsContainer {
+ padding: 0 16px 16px;
+ height: 172px;
+ max-width: 320px;
+ min-width: 206px;
+}
+
+.category,
+.location {
+ color:$neutralSecondary;
+}
+
+.category,
+.datetime,
+.location {
+ font-size: 12px;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
+ height: 18px;
+}
+
+:global(.slick-slide) .cardWrapper {
+ padding-left:8px;
+ padding-right:8px;
+}
\ No newline at end of file
diff --git a/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.tsx b/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.tsx
new file mode 100644
index 000000000..47dfee842
--- /dev/null
+++ b/samples/react-calendar-feed/src/shared/components/EventCard/EventCard.tsx
@@ -0,0 +1,177 @@
+import { Guid } from "@microsoft/sp-core-library";
+import * as strings from "CalendarFeedSummaryWebPartStrings";
+import * as ICS from "ics-js";
+import * as moment from "moment";
+import { ActionButton, DocumentCard, DocumentCardType, FocusZone, css } from "office-ui-fabric-react";
+import * as React from "react";
+import { IEventCardProps, IEventCardState } from ".";
+import { DateBox, DateBoxSize } from "../DateBox";
+import styles from "./EventCard.module.scss";
+const AllDayFormat: string = "dddd, MMMM Do YYYY";
+const LocalizedTimeFormat: string = "llll";
+/**
+ * Shows an event in a document card
+ */
+export class EventCard extends React.Component