Calendar not responsive


Topic: Calendar not responsive

Odhran pro premium asked 11 months ago

Hi. We purchased the Calendar plugin and are having a few issues with it. Expected:

  1. Left, Right, Month, List, Today buttons resize and align correctly in responsive view or in mobile view.
  2. Month view calendar should expand to be the height of the page that the calendar is on so that you don't have to scroll if there is room.
  3. If there are multiple items on the one calendar day, the text '+2 more' is displayed and is aligned correctly.

Actual:

  1. Buttons are on top of each other and do not resize or align correctly and look messy.
  2. Month view calendar height is shorter than the space available. The reason for this is that your code has a style added (in html which isn't best practice) to the fc-scroller itself so that it's fixed height. "fc-scroller style=overflow: hidden scroll; height: 209px;".
  3. If there are multiple items on the one calendar day, the text '+2 more' is displayed but is not aligned correctly, with half the text missing and looks messy.

Snippet - https://mdbootstrap.com/snippets/jquery/odhran/1638688

You can also see the same behaviour on your own examples on your website if you resize the page https://mdbootstrap.com/plugins/jquery/full-calendar/ or use Chrome Developer tools and select the mobile view.

Calendar


Marta Szymanska staff pro premium answered 10 months ago

Hi,

I apologize for the bugs in the calendar plugin, we will fix this as soon as possible.

Best, Marta


Odhran pro premium commented 10 months ago

Thanks Marta. Any idea when this will be done? Are there any workarounds available for the moment? Thanks.


Marta Szymanska staff pro premium commented 10 months ago

Hi,

add this code below to your style.css file as a temporary workaround:

@media (max-width: 767px) { .fc-toolbar .fc-left { float: none !important; display: flex; justify-content: center; margin-bottom: 1rem; } } @media (max-width: 767px) { .fc-toolbar .fc-right { float: none !important; display: flex; justify-content: center; margin-bottom: 1rem; } } @media (max-width: 767px) { .fc-scroller.fc-day-grid-container { overflow: unset !important; height: 100% !important; } } @media (max-width: 767px) { .fc-view-container { margin-bottom: 2rem; } } @media (max-width: 767px) { .fc-row.fc-rigid .fc-content-skeleton { position: relative !important; } }

Best, Marta


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.8.9
  • Device: Mobile
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes