Calendar component not displaying correctly in mobile view

💬 App Building
, , ,
1

Hello,
I created a web app with desktop and mobile view, I am using the calendar component but in mobile view some of the elements of the calendar get cramped and some are displayed out of the component. See image attached.

I think this could be fixed if there were a option to hide some elements of the component in mobile view, or the other option of course is to modify de component to display better in mobile view.

I hope someone can help me with this.

Thanks.

Screenshot_20250620-124315
Screenshot_20250620-1243151080×2424 121 KB

2

Hi @lcverduzco,

You are on the right track here. In most components there is the option to show/hide on desktop and mobile.

chrome_fnZzKE48wt
chrome_fnZzKE48wt612×254 13.9 KB

3

Hi @Shawn_Optipath ,
I don't want to hide the whole component on mobile.

I think the first solution is for the Retool team to see if they can "fix" rearranging the top elements of the calendar in a way that displays better on mobile view.

Or the second option is to have a way to hide/show specific elements like Month, Week, Day, List. Something like Hide on Mobile= 'Week','Day' in order to have less elements on the top and they can display better on mobile.

Thanks.

4

Go into your custom CSS for the app and add something like this:

  @media (max-width: 600px) {
    /* FullCalendar buttons usually have these classes */
    .fc-dayGridMonth-button,  /* "Month" */
    .fc-timeGridWeek-button,  /* "Week" */
    .fc-timeGridDay-button,   /* "Day" */
    .fc-listMonth-button {    /* "List" */
      display: none !important;
    }
  }

chrome_InJd06OJ9s
chrome_InJd06OJ9s712×481 29 KB

You can find more information in the documentation or here.

I just tried it and everything fits on my test mobile version now. It's not super pretty but could be nice with a little more work.

Hope this helps!

1 Like
5

Thank you @Shawn_Optipath that is exactly what I needed. :clap:

1 Like