Contrib.social

Missing markup in some date time span scenarios

Open on Drupal.org →
Created on 8 September 2023, 10 months ago

Background: basic styling of dates (bold) and time (small font size) produces inconsistent results.

Comparing the different possible output, I notized that certain variants do not contain the expected spans:

Markup comparison

First let's have a look at the variant "Day span with times":

<div class="recurring-output--wrapper">
  <div class="next_instance">
    <div>
      <time datetime="2024-09-08T18:00:00+02:00" class="datetime">
        <span class="smart-date--date">08 September 2024</span>
        <span class="smart-date--time">18.00</span>
      </time>
      <span class="time--join">—</span>
      <time datetime="2024-09-09T15:00:00+02:00" class="datetime">
        <span class="smart-date--date">09 September 2024</span> 
        <span class="smart-date--time">15.00</span>
      </time>
      <button type="button" class="button" id="cc">Add to calendar</button>
     </div>
  </div>
</div>

This contains useful span classes "smart-date--date" and "smart-date--time" in both start datetime and end datetime.

Skipping "Single day all day" because start dates are consistent in this aspect in all variants.

Single day with time

Single day with time
<div class="recurring-output--wrapper">
  <div class="next_instance">
    <div>
      <time datetime="2023-09-21T17:00:00+02:00" class="datetime">
        <span class="smart-date--date">21 September 2023</span> 
        <span class="smart-date--time">17.00</span>
      </time>
      <span class="time--join">—</span>
      <time datetime="2023-09-21T18:00:00+02:00" class="datetime">

        18.00
      </time>
      <button type="button" class="button" id="cc">Add to calendar</button>
     </div>
  </div>
</div>

Day span all day

<div class="recurring-output--wrapper">
  <div class="next_instance">
    <div>
      <time datetime="2023-10-17" class="datetime">
        <span class="smart-date--date">17</span>

      </time>
      <span class="time--join">—</span>
      <time datetime="2023-10-20" class="datetime">
        20 October 2023
        <span class="smart-date--time">all day</span>
      </time>
      <button type="button" class="button" id="cc">Add to calendar</button>
     </div>
  </div>
</div>

(Empty lines for better comparison, I copied this from a spreadsheet.)

We notice:

  • No span.smart-date--time for single day's end time
  • No span.smart-date--date for day span's end date

Visualization

While we achieved some reasonable styling in a field-based view ...

... the field formatter options serve nothing better than this:

(Screenshots unrelated to the code above.)

Proposed solution

If there is any possibility, add markup:

  • span.smart-date--time for single day's end time
  • span.smart-date--date for day span's end date

I really tried my best to produce a patch but Smart Date is too advanced for my limited skills.

✨ Feature request
Status

Active

Version

4.0

Component

Code

Created by

🇩🇪Germany hexabinaer Berlin, Germany

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024