Hide empty days/dates on mobile view

Created on 10 July 2023, 12 months ago
Updated 12 May 2024, about 2 months ago

Is there a way to hide the days/dates that are empty/no events when the calendar View stacks for mobile? For example, if the only even in August is on August 31, then I would only want August 31 to appear in the stacked mobile View (instead of needing to scroll past the empty August 1 - 30 to get to the only day in August that has an event).

I was thinking that a simply way to accomplish this would be to add a class to the < td > that would be "noevent" if there is no event, or "hasevent" if there is an event on that day. Then, I could use CSS to hide the days without events. Would this be feasible? If so, how/where would I make that change?

πŸ’¬ Support request
Status

Fixed

Version

2.1

Component

Miscellaneous

Created by

πŸ‡ΊπŸ‡ΈUnited States hockey2112

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

Comments & Activities

  • Issue created by @hockey2112
  • πŸ‡ΊπŸ‡ΈUnited States hockey2112

    I figured out a "hacky" solution for this, but it involves modifying the module's files. I have not been able to create a successful theme override for this yet. Any ideas?

        // Render row and insert content in cell.
        // @see template_preprocess_calendar_view_day()
        $renderable_row = $this->view->rowPlugin->render($result);
        foreach ($this->view->calendars ?? [] as $t => $table) {
          foreach ($table['#rows'] as $r => $rows) {
            foreach (array_keys($rows['data']) as $timestamp) {
              if (in_array($timestamp, $timestamps)) {
                $today = new \DateTime();
                $today->setTimestamp($timestamp);
                $today->setTime(0, 0, 0);
                $interval = $start_day->diff($today);
                $values['instance'] = $interval->format('%a');
                $renderable_row['#values'] = $values;
    
                $cell = &$this->view->calendars[$t]['#rows'][$r]['data'][$timestamp];
                $cell['data']['#children'][$start] = $renderable_row;
    			$cell['class'][] = 'hasevent';
              }
            }
          }
        }
      }

    I added "$cell['class'][] = 'hasevent';", which adds a class of "hasevent" to the

  • First commit to issue fork.
  • Status changed to Needs review 11 months ago
  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    I patched the preprocess for calendar_view_day, adding a check for empty children in the day, and adding a class to the template wrapper.

    I'm a little tripped up on 'attributes' vs '#attributes'. Here's what I have:

        $variables['attributes'] = new \Drupal\Core\Template\Attribute();
        $variables['attributes']->addClass('calendar-view-day--empty');
    

    This also works:

        $variables['#attributes']['class'][] = 'calendar-view-day--empty'
    

    Seems like the render process will convert #attributes into an Attributes object if it's not already defined. Is this more a matter of style, or any benefits to doing it one way or the other?

  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    I realized we may want to have the classes on the container, so I patched the preprocess for views_view_calendar.

    The calendar style parses all the items into $view->calendar. So I had to loop through the items in there, check for empty #children and add the class.

    Any thoughts on the class names?

  • πŸ‡ΊπŸ‡ΈUnited States hockey2112

    How about "hasevent" and "noevent" as the class names?

  • πŸ‡ΊπŸ‡ΈUnited States hockey2112
  • πŸ‡ΊπŸ‡ΈUnited States hockey2112

    Hi, was this feature added?

  • It was possible to acheive everything with a preprocess function but it is a nice addition to the module codebase anyway.

    So it is fixed on the dev branch 2.1.x.

    Could you please try and confirm that you can now hide empty cells with CSS as you wanted to?

  • Status changed to Fixed 2 months ago
  • Marking as fixed.

    Please comment and/or reopen as appropriate.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024