MiniCalendar.js

const MiniCalendar = ({ date }) => {
  const days = getSessionDaysOfWeek(date)
  return (
    <div css={{ display: "flex" }}>
      {["S", "M", "T", "W", "Th", "F", "S"].map((dayText, day) => {
        const isActive = day >= days.start && day <= days.end
        return (
          <div
            key={day}
            css={{
              textAlign: "center",
              marginTop: "0.25em",
              marginRight: "0.5em",
              opacity: isActive ? 1 : 0.25,
              fontSize: "75%",
              fontWeight: "bold"
            }}
          >
            {dayText}
          </div>
        )
      })}
    </div>
  )
}

// Usage
<MiniCalendar data="2019-05-01"/>