Time grid mobile styling

[MaCleodWalker]

Is it possible to make the the column a set width and the left time bar sticky in the resourceTimeGridDay and resourceTimeGridWeek views for better mobile experience? Similar to Google calendar's 3 day mobile view.

[vkurko]

Can you provide a screenshot, please? I looked at the web version of Google Calendar on my mobile device, but didn't see anything similar there.

[MaCleodWalker]

[vkurko]

Thank you. So the left time bar does not scroll, but always remains in the visibility area.

I don't currently have a ready solution, but it might be possible to do it in CSS. I'll try later.

[mrweiner]

One solution to this is e.g.

    .ec-time-grid.ec-week-view {
      .ec-day {
        min-width: 300px;
      }

      .ec-days {
        overflow: auto;
      }
    }

// From https://stackoverflow.com/a/31084338
<script>

    var scrollers = document.querySelectorAll('.ec-time-grid.ec-week-view .ec-days');

    var scrollerDivs = Array.prototype.filter.call(scrollers, function (testElement) {
      return testElement.nodeName === 'DIV';
    });

    function scrollAll(scrollLeft) {
      scrollerDivs.forEach(function (element, index, array) {
        element.scrollLeft = scrollLeft;
      });
    }

    scrollerDivs.forEach(function (element, index, array) {
      element.addEventListener('scroll', function (e) {
        scrollAll(e.target.scrollLeft);
      });
    });

</script>

Don't even need to use display: sticky on the sidebar elements. Slight limitations are that scrollbars are exposed, and moving to the next/previous week does not scroll back the left. Can probably be handled with a handler somewhere but haven't tried yet.

[mrweiner]

Looks like scrollbars can be hidden with like:

.ec-days {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

[MaCleodWalker]

How are you adding these classes to the component?