How do I set the text colour for schedule events?

Event calendars & schedulers
1

I see in the documentation (https://docs.mobiscroll.com/jquery/eventcalendar#opt-data) that I can set the following properties using json for a schedule event:

  • d Date, String, Object - Defines the date of the event.
  • start Date, String, Object - Specifies the start of the event.
  • end Date, String, Object - Specifies the end of the event.
  • text String - The title of the event.
  • color String - The color of the event.
  • allDay Boolean - Specifies if the event is all day or not.

But it doesn’t say anything about setting the text colour, yet in your demo (https://demo.mobiscroll.com/jquery/eventcalendar/switching-day-week-month-view#themeVariant=light&theme=material) the text colour is coming back white. How can I do that?

2

Hello @Vincent_Wansink :wave:

If you want to set the text color for schedule events, you need to use css styling. You can check the text class of the events as shown in the attached image.

For the modification you need to override this CSS rule:

.mbsc-event-txt {
    color: yellow;
}

event-text-color
event-text-color1915×879 91.8 KB

3

Hm… that’s unfortunate as the users will have the ability to choose their own event colours so depending on what colour they choose I will need the text colour to be either black or white. I can calculate it on a per event basis on the server side but if I have to set it via css then I don’t see how I’m going to do that.

4

You can do this by giving the text not only a title, but also an element that you can customize. Similar to this code:

events: [{
	start: '2020-09-22',
	end: '2020-09-23',
	color: 'red',
	text: '<span style="color:white">Title</span>'
}]
5

Brilliant! Thank you!