Styling of Events via cssClass

[adavie1]

I have set the cssClass for my events, using Chrome Inspector, I can see the styling is set OK.

This is how I'm creating the events:

...
  getCalendar () {
      var url = this.getEndpoint('/view/calendar/now')

      axios.get(url).then(response => {
        this.selEvents = []

        for (let item in response.data) {
          let thing = {
            title: response.data[item].siteId + ' - ' + response.data[item].item,
            start: response.data[item].date,
            cssClass: 'event-' + response.data[item].type.toLowerCase(),
            data: response.data[item]
          }
          this.selEvents.push(thing)
        }
      })
      .catch(e => {
        this.selEvents = loadIssuesEvents
      })
    }
  },
...

My data displays fine.

However, it doesn't show in the calendar with styling I want, I've tried different approaches, none work:

First Try:

<style>
 .event-complaint {background-color: gold;}
</style>

Second Try:

<style>
 .event-item .event-complaint {background-color: gold;}
</style>

What I am doing wroing?

As a suggestion, more examples of how to use this component, e.g. doing event popups, calling remotedatasources etc. it would help a lot.

Thanks for creating a great component.

[onamfc]

Have you found a way to fix this? I don't have a lot of time to figure out how to fix the problem, but here is a quick workaround I found. It's definitely not ideal. Also, this is just a fix if you're sending one class name, not an array. (which works in my situation)

in vue-fullcalendar.js, change the class array on line 1104 to class: [_vm.classNames(event.cssClass), { 'is-start': _vm.isStart(event.start, day.date), 'is-end': _vm.isEnd(event.end, day.date), 'is-opacity': !event.isShow, '': event.cssClass }],

I'm using scoped styles in my vue component, so the class must be declared at a higher level. In my case, I declare the class that I am sending inside the head.

I know it's dirty, but maybe it'll hold you over until you get a response from the author.

I'd love to hear if you found a better solution.

[adavie1]

@onamfc sadly no I didn't. In the end I stopped using the component a changed over to this calendar. It's not ideal, because of adding jQuery etc. but in terms of features etc. it's fantatistc.

[ChrisDSky]

Hello,

I found out how to do it. No need to do any dirty trick.

In your main css file, just do the following:

Let's say you want to change the background colour of the class event-label:

.event-label { background-color: #00a3d8 !important; }

It works fine. So in Vue, put it in your main .styl if you're using stylus.

Hope it will help some people. Don't forget the !important, that's what will enforce your css.