Render Date Range on node template
Here is the full solution that allowed me to separate the content into a traditional calendar mock-up on a node--events--html.twig:

&lt;div class="cal-wrapper"&gt;

{% if node.field_date_range.value %}
  &lt;div class="cal-day"&gt;
  {{ node.field_date_range.value|date(format='l')  ~ ' thru ' ~ node.field_date_end_range_value|date(format='l') }}
{% else %}
  {{ node.field_date.value|date(format='l') }}
  &lt;/div&gt;
{% endif %}

{% if node.field_date_range.value %}
  &lt;div class="cal-month"&gt;
  {{ node.field_date_range.value|date(format='M')  ~ ' thru ' ~ node.field_date_end_range_value|date(format='M') }}
 {% else %}
  {{ node.field_date.value|date(format='M') }}
 &lt;/div&gt;
 {% endif %}

 {% if node.field_date_range.value %}
   &lt;div class="cal-main-date"&gt;
   {{ node.field_date_range.value|date(format='j')  ~ ' thru ' ~ node.field_date_end_range_value|date(format='j') }}
 {% else %}
   {{ node.field_date.value|date(format='j') }}
   &lt;/div&gt;
 {% endif %}

 &lt;/div&gt;