Adding class to event

[anlek]

Hey, I am trying to create a series of different events (with different colours) and I'd love to be able to set something like this:

events = [
  {
    title     :  'event1',
    start     : '2016-07-01'，
    class     : 'birthday'
    YOUR_DATA : {}
  },
  {
    title     : 'event2',
    start     : '2016-07-02',
    end       : '2016-07-03',
    class     : 'vacation away'
    YOUR_DATA : {}
  }
]         

Now each event would get a class name where in vuejs I could add CSS to that specific class name. Thoughts?

Thanks for all your hard work! Andrew

[anlek]

Another idea is that class could take an array class: ['vacation', 'away']

[Wanderxx]

Actually you can define as many arguments as you want in each event object including class, that is so called YOUR_DATA

[anlek]

It's not about defining it, it's about adding a CSS class onto the event label in the calendar. Right now it's defaulted to be a blue label that says the event, I want to be able to make it multicoloured.

[Wanderxx]

Hi Anlek,

I just added, it's called cssClass instead, taking both String and Array

[anlek]

Wow, thank you so much Wanderxx! Amazing work sir!

[georaldc]

The CSS class value doesn't get used on the Show More popup. They all end up using the default style

[pulangkalabaw]

The CSS class value doesn't get used on the Show More popup. They all end up using the default style

hey have u find the solution yet?

[vunguyen105]

<!-- full events when click show more -->
      <div class="more-events" v-show="showMore"
        :style="{left: morePos.left + 'px', top: morePos.top + 'px'}">
        <div class="more-header">
          <span class="title">{{moreTitle(selectDay.date)}}</span>
          <span class="close" @click.stop="showMore = false">x</span>
        </div>
        <div class="more-body">
          <ul class="body-list">
            <li v-for="event in selectDay.events"
              v-show="event.isShow" class="body-item"
              @click="eventClick(event,$event)">
              {{event.title}}
            </li>
          </ul>
        </div>
      </div>

@pulangkalabaw it is in body.vue I think I can customize the event color when click show more