Icon Sizes

[achartier]

The new FC uses bootstrap 5 icons with a default size of fs-5, The sizing under BS5 is documented here: https://getbootstrap.com/docs/5.2/utilities/text/#font-size Although the page indicates text, it also applies to icons.

I think the icons size should adjust based on screen size. The current size looks nice on mobile, but on desktop it is quite small.

Any suggestions on how to accomplish this?

I am no css expert and not sure if this can be done with simple css.

Open to suggestions.

 

[wezetel]

Just played a bit around with the navigation settings. The small icons on desktop is not nice, but the real problem is more on the mobile phone (at least on mine).

• If you select icons for navigation and gapped rendering, the icons are on two lines. (not very nice)
• And even worth, if you select buttons as navigation style, you need to scroll horicontal.

The best solution currently seems to be render 'adjacent' and navigation style 'icons' (even this may cause some accessibilty problems and icons seem to be small on desktops).

So basically, if we follow the guidance 'mobile first', buttons never should be selected as navigation style.

I will try to dig a little deeper and search if the icons can be increased on desktop (with adjacent/icon settings)

 

[achartier]

@elmarra and I have been playing with these icons. He suggested some css based on media. Here is a view for desktops, 3 different icons sizes and what it looks like on IPhone SE. My question for you Wolfgang is, is this something that should be configurable?

Another option is to have an textarea as part of the FC options to enter custom CSS. We could include as default the css for these icons and let the user modify as desired.

Interested in your thoughts.

 

[elmarra]

I think 35px is more than enough.
Also we could apply a margin to separate the icons, so that they are separated from each other, like here for example:

In mobile view, slightly smaller month title and space between icons.
While on the desktop:

 

[achartier]

In mobile view with margins they stack per @wezetel post.

 

[elmarra]

This is in the iPhone se view.
In the smartphone view the size of "November 2024" must be reduced. (As you see in my image). I reduced the title font size and they don't have line breaks.

With settings:
- Navigation style: icons
- Render Navigation: adjacent

 

[achartier]

Happy to get your input on how to make it better.

 

[elmarra]

/* Side margin to separate icons */
    .fc-toolbar-chunk .btn-group .btn span {
            margin-left: 5px !important;
        }
    /* Smallest month title */
    @media (max-width: 574px){
    .fc .fc-toolbar-title {
        font-size: 1.30em;
        text-align: center;
    }
    }
    /* Larger desktop icons */
    @media (min-width: 1024px) {
        .fc-toolbar-chunk .btn-group .btn span {
            font-size: 40px !important;
        }
}

 

[elmarra]

If we really want to be more precise.
Since the icons for scrolling between months and years are already quite separate, with this code we only apply a margin:
- today icon (on the left)
- week icon (on the right)

/* Left margin today icon */
    .fc-today-button.btn.btn-primary {
    margin-left: 5px !important;
}
/* Left and right margin for the week icon */
.fc-timeGridWeek-button.btn.btn-primary {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
/* hover effect on icons */
.fc-toolbar-chunk .btn-group .btn span:hover {
color:blue !important;}

    /* Smallest month title */
    @media (max-width: 574px){
    .fc .fc-toolbar-title {
        font-size: 1.30em;
        text-align: center;
    }
    }
    /* Larger desktop icons */
    @media (min-width: 1024px) {
        .fc-toolbar-chunk .btn-group .btn span {
            font-size: 40px !important;
        }
}

 

[elmarra]

Two more suggestions:
1) Red color for Sunday

.fc-day-sun {
    color: red;
   }

2) full view of smartphone calendar.(currently you have to scroll to get a complete monthly view)

.fc-view-harness.fc-view-harness-active {
    min-height: 360px;
}

 

[wezetel]

My question for you Wolfgang is, is this something that should be configurable?

I don't think it is necessary to include this in the options. We should have the media queries included in the fullcalendar.css with some base values (they could be overwritten in the custom.css). And probably some other improvements as @elmarra proposed)

Another option is to have an textarea as part of the FC options to enter custom CSS

A textarea for injecting css-code doesn't seem a good solution in my view (unless the code is saved in a css-file). Injecting css (as fullcalendar.io does) leads to problems adjusting the settings as it is an element inline setting. And whenever you want to change those, you need to use '!important' (which is no good coding practice)

It's great @elmarra found out essential selectors, which can be used and can be documented in the wiki for other users to adjust their custom.css

 

[achartier]

@elmarra If you can consolidate all the css you want and forward to me, I will include it in the fullcalendar css file.

 

[elmarra]

Sent in pm.
I've captured everything we discussed.
if you need other changes elsewhere, hit me up.

I don't think it is necessary to include this in the options. We should have the media queries included in the fullcalendar.css with some base values (they could be overwritten in the custom.css). And probably some other improvements as @elmarra proposed)

A textarea for injecting css-code doesn't seem a good solution in my view (unless the code is saved in a css-file). Injecting css (as fullcalendar.io does) leads to problems adjusting the settings as it is an element inline setting. And whenever you want to change those, you need to use '!important' (which is no good coding practice)

It's great @elmarra found out essential selectors, which can be used and can be documented in the wiki for other users to adjust their custom.css

Yes, perhaps some information could be added to the wiki, to allow easy customization for the user

 

[achartier]

WiKi is on my ToDo list for FC. Want to get it all working first.

 

[achartier]

I applied your css and gave you a link to have a look. I switched the view to mobile and wonder if we need to do something about the titles and such. Have a look at these 2 screen grabs.

 

[elmarra]

I applied your css and gave you a link to have a look. I switched the view to mobile and wonder if we need to do something about the titles and such. Have a look at these 2 screen grabs.

From the photos the styles look applied correctly, I'll take a look on my PC later.
The mobile title also seems to be reduced as expected

 

[wezetel]

For sure there can be something improved for the event title. e.g.

.fc-event-main {
overflow: hidden;
text-overflow: ellipsis;
}

but on small devices this may result in only appearing a small number of letters..

 

[elmarra]

but on small devices this may result in only appearing a small number of letters..

The same principle of media query can be applied to icons.
By inserting the css in that media query the cas will be applied only for that screen size

 

[achartier]

I will let you 2 hash out the appropriate CSS and I will add it to the FC css file when you are ready.