Add custom data in attributes

[francoislevesque]

I need to perform a custom action when an event on the calendar is clicked. It would be far easier to have the event's related data directly in the calendar's attributes array:

attributes: [{
   dot: {
      backgroundColor: '#D52824',
   },
   dates: ['2017-12-25'],
   contentHoverStyle: {
      'cursor': 'pointer',
      'color': '#333'
   },
   // Add this attribute
   customData: {
      'title': 'Christmas Party',
      'url': 'https://events.com/christmas-2017'
   }
}]

[nathanreyes]

It's funny you mention this as I'm currently implementing this feature. I was calling it tag rather than customData as you referenced. I do kind of like customData though, although the exact name doesn't matter as much as long as it is clear what the intention is.

[francoislevesque]

Yeah perfect! :)

[nathanreyes]

In 0.4.0, when day events are triggered (daySelect, dayMouseEnter, dayMouseLeave), you can access the attributes like before, but with a few differences.

• Instead of the attributes being attached to the day info parameter, they are passed in via the 2nd parameter
• The attributes are reduced to an object using the attribute keys.

So your example might look something like this:

data() {
  attributes: [{
    key: 'party', // Use your own key here, or if not a random number will be assigned
    dot: {
      backgroundColor: '#D52824',
    },
    dates: ['2017-12-25'],
    contentHoverStyle: {
      'cursor': 'pointer',
      'color': '#333'
    },
    // Add this attribute
    customData: {
      'title': 'Christmas Party',
      'url': 'https://events.com/christmas-2017'
    }
  }]
},
methods: {
  daySelect(dayInfo, attr) {
    // Get the custom data
    const customData = attr.party.customData; // Uses the key from above
  }
},
...

Let me know if you experience any issues. The documentation still needs to be updated to reflect these changes.