Feature Requests
Share ideas, discuss and vote on requests from other users in community
 

Calendar CSS tweak to allow overflow-wrap of text (e.g. domain names)

host1164 shared this idea 3 years ago
Already Possible

Currently, assets/css/fullcalendar.css (and assets/css/fullcalendar.min.css) forces one-line tall events:


~Line 481:

  1. .fc-day-grid-event > .fc-content { /* force events to be one-line tall */
  2. white-space: nowrap;
  3. overflow: hidden;
  4. }



This ends up making the calendar unreadable when viewing anything with a domain name:
1d42b280b3d0c18274c9300edba3f840


By removing the "white-space: nowrap;", we can return to a readable layout:


1777f5c7c77fdccd0be4098083b68e6d


If there's a good reason/use-case for keeping nowrap on this, please let me know.

Best Answer
photo

We tend not to change the css values when provided in minified files from third parties, in this case http://arshaw.com/fullcalendar/

However, you are able to override this yourself using the style.css file included in your admin template.

For example, I have found the following will work as you wish:

  1. .fc-day-grid-event > .fc-content {

    white-space: unset !important;

    }

As for why this has been implemented, you would need to contact the calendar developer for an exact reason. However, as an educated guess, multiple events will show in a line, and if you wish to see full detail, you can click on the "Day" view and events will expand as appropriate.

Comments (1)

photo
5

We tend not to change the css values when provided in minified files from third parties, in this case http://arshaw.com/fullcalendar/

However, you are able to override this yourself using the style.css file included in your admin template.

For example, I have found the following will work as you wish:

  1. .fc-day-grid-event > .fc-content {

    white-space: unset !important;

    }

As for why this has been implemented, you would need to contact the calendar developer for an exact reason. However, as an educated guess, multiple events will show in a line, and if you wish to see full detail, you can click on the "Day" view and events will expand as appropriate.