1

I've got Full Calendar 5 set up and pulling in entries from the CMS I use. All is good.

However I am having trouble with getting the entire day of an even to have a background color. In the attached screen shot there is an event on July 13th. I need the entire day to be highlighted red not just the event.

I tried setting eventDisplay: 'background' but when I do that the event is no longer clickable.

Ideally also text will wrap if it doesn't fit in the calendar - Friday July 3rd is not wrapping.

calendar screenshot

**** edit **** I persuaded my client to accept the way full calendar formats things so I no longer need to pursue this.

CreateSean
  • 1,286
  • 1
  • 21
  • 42
  • "I need the entire day to be highlighted red not just the event."...why? Can't you have more than one event on a single day? And do you _need_ it covering the whole day, or do you just _want_ it like that? – ADyson Jul 15 '20 at 21:40
  • You're right that using Background Events would normally be the approach to use to do that, but you're right it does make them un-clickable. The regular (non-background) event display is designed around the premise that there might be more than one per day, so it leaves some space for that. You could try manually adjusting the height of them using CSS but beware what would happen if you change the aspect ratio of the calendar or anything like that. Also it could have unpleasant effects on views other than the month view. – ADyson Jul 15 '20 at 21:42
  • I need it to cover the whole day because that's how the designer made it. MOre than 1 per day is fine. the event itself could have a transparent background. What's important is that the whole day has a background color. The current day is light yellow why can't a day with events have a background color? – CreateSean Jul 16 '20 at 12:21
  • If more than one per day is fine, how do you propose to represent that if you're covering the entire day with single event / colour? It's not clear how you'd be wanting to visually represent the number of events available on that day? Are you wanting the background to be a different colour than the events themselves? Sorry if I'm misunderstanding. And I don't really see how this helps the user - they can already see there are events on that day because they're there in bright red. Do you really need another colour underneath it as well? It might grate a bit. – ADyson Jul 16 '20 at 12:23
  • 1
    Anyway you certainly could add a background colour without using background events, but it's not something you can do through fullCalendar's API directly, you'd have to write some custom code to loop the visible days, count the number of events which overlap each day and then update the CSS of the relevant HTML element to change its colour. One or two people have asked for it before (although the code examples on here are probably for older versions of fullCalendar so you might have to adapt them a bit), and just to mention it can also look a bit lairy when you change to the non-month views. – ADyson Jul 16 '20 at 12:25
  • 1
    e.g. here's a similar example I built for fullCalendar 3: https://stackoverflow.com/a/57905268/5947043 . And the accompanying JSFiddle: http://jsfiddle.net/9zupvcfo/2/ . Admittedly you could change the colours, but still I don't think the results are all that attractive. This one was done to highlight when there are >3 events per day, so the colouring conveys some extra info which might not be immediately obvious on a smaller screen. Also check what it looks like in the week/day views. I'm still not sure what colouring it when there's >0 events really achieves - that info is already obvious. – ADyson Jul 16 '20 at 12:34

1 Answers1

0

Setting the item to display: "background" shouldn't break your click ability if you are using the eventClick option on your events. However, as an alternative option, you could also just render the event twice: one in the background and one in the foreground so that your existing click functionality will still work. I've got a couple of examples of what this could look like here: https://jsfiddle.net/amamar/r58x0sg7/

Note that I've also overridden some default styles so that you can tweak this to better meet your needs.

Amanda Maring
  • 107
  • 5