title: API response in V-Calendar customData attribute
body: <p>I am trying to use the <code>V-calendar</code> library <a href="https://docs.vcalendar.io/attributes.html#explicit-vs-implicit" rel="nofollow noreferrer">linked here</a> in a Vue component. However, I seem to be having an issue on wrapping my head around how to do this properly. I am using the Google Calendar API to get events from a particular calendar, but the API returns an array of objects, whose objects contain their own objects and it goes down even further. I've been able to access my events and drill down to what I need, but now I need to figure out how to get the date span for each event.</p>
  
  <p>The general idea is to basically duplicate the original Google calendar but only show particular events. </p>
  
  <p>I hope this makes sense, I am happy to answer any additional questions if there are any.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-calendar &gt;
    &lt;/v-calendar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import {calendarAPI} from '../../views/auth/keys/googleCalendar.js';
    import { setupCalendar, Calendar} from 'v-calendar'
    import axios from 'axios';
    import 'v-calendar/lib/v-calendar.min.css';
  
  export default {
   data() {
    return {
      attributes: [
        {
          customData:  axios.get('https://www.googleapis.com/calendar/v3/calendars/' + calendarAPI.CALENDAR_ID+ '/events?key=' + calendarAPI.API_KEY)
          .then(res =&gt; {
              const data = res.data.items;
  
              const filteredResult = data.filter((item, i) =&gt; {
                  if(item.summary.includes("Holiday") &amp;&amp; !item.summary.includes("Student")) {
                      return item
                  }
              });
              console.log(filteredResult)
          })
        }
      ]
    }
  
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is an example of what the API call is returning:</p>
  
  <pre><code>(3) [{…}, {…}, {…}]
  0:
  created: "2019-03-19T19:00:22.000Z"
  creator: 
  end: {date: "2019-04-20"}
  etag: ""3106050066842000""
  htmlLink: 
  iCalUID: "28231"
  id: "_68s34cph"
  kind: "calendar#event"
  organizer: 
  sequence: 0
  start: {date: "2019-04-19"}
  status: "confirmed"
  summary: "Easter Holiday"
  updated: "2019-03-19T19:50:33.421Z"
  visibility: "public"
  __proto__: Object
  1:
  created: "2019-03-19T19:00:22.000Z"
  creator: 
  end:
  date: "2019-04-23"
  __proto__: Object
  etag: ""3106050066842000""
  htmlLink: 
  iCalUID: "28232"
  id: "_68s34cpi"
  kind: "calendar#event"
  organizer: 
  sequence: 0
  start: {date: "2019-04-22"}
  status: "confirmed"
  summary: "Easter Holiday"
  updated: "2019-03-19T19:50:33.421Z"
  visibility: "public"
  __proto__: Object
  2:
  created: "2019-03-19T19:00:22.000Z"
  creator: 
  end: {date: "2019-05-28"}
  etag: ""3106050066842000""
  htmlLink: 
  iCalUID: "28233"
  id: "_68s34cpj"
  kind: "calendar#event"
  organizer:
  sequence: 0
  start: {date: "2019-05-27"}
  status: "confirmed"
  summary: "Memorial Day Holiday"
  updated: "2019-03-19T19:50:33.421Z"
  visibility: "public"
  __proto__: Object
  length: 3
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've worked on some more code to filter out unnecessary results. Here is the updated vue component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-calendar
      :attributes='attributes'
      is-expanded&gt;
      &lt;/v-calendar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {calendarAPI} from '../../views/auth/keys/googleCalendar.js';
  import { setupCalendar, Calendar} from 'v-calendar'
  import axios from 'axios';
  import 'v-calendar/lib/v-calendar.min.css';
  
  export default {
    data() {
          // grabbing data from the api
         const holidays = axios.get('https://www.googleapis.com/calendar/v3/calendars/' + calendarAPI.CALENDAR_ID+ '/events?key=' + calendarAPI.API_KEY)
  
          // getting the response from the api
          .then(res =&gt; {
  
              // filtering the inital object the api returns
              const data = res.data.items;
  
              //conditional filtering to only grab holidays that aren't student
              const filteredResult = data.filter((item, i) =&gt; {
                  if(item.summary.includes("Holiday") &amp;&amp; !item.summary.includes("Student")) {
                      return item
                  }
              });
  
              // getting the values from the api object and mapping through them to get only the values that are needed
              const dates = filteredResult.map((item, i) =&gt; {
                 const timespan = {
  
                     start: new Date(item.start.date),
                     end: new Date(item.end.date)
                 }
                 return timespan
             })
              // should return only the new object
             return dates
          })
  
      return {
        attributes: [
          {
            highlight: {
              backgroundColor: '#ff8080', // Red
              borderColor: '#ff6666',
              borderWidth: '2px',
              borderStyle: 'solid',
            },
            contentStyle: {
              color: 'white',
            },
            dates: holidays.then(data =&gt; {
                  let newdata = data
                  console.log(newdata)
                  return newdata
              })
          },
          {
            highlight: {
              backgroundColor: '#66b3cc', // Turquoise
              borderColor: '#53a9c6',
              borderWidth: '2px',
              borderRadius: '5px',
            },
            contentStyle: {
              color: 'white',
            }
          },
        ],
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And console output:</p>
  
  <pre><code>0: {start: Thu Apr 18 2019 19:00:00 GMT-0500 (Central Daylight Time), end: 
  Fri Apr 19 2019 19:00:00 GMT-0500 (Central Daylight Time)}
  1: {start: Sun Apr 21 2019 19:00:00 GMT-0500 (Central Daylight Time), end: Mon Apr 22 2019 19:00:00 GMT-0500 (Central Daylight Time)}
  2: {start: Sun May 26 2019 19:00:00 GMT-0500 (Central Daylight Time), end: Mon May 27 2019 19:00:00 GMT-0500 (Central Daylight Time)}
  length: 3
  __proto__: Array(0)
  </code></pre>
  
  <p>I am finally seeing something on the calendar, but all of the dates are highlighted now. I think the issue may be that the holiday function is returning a promise, not the values</p>
  
  <p>Image: <a href="https://i.stack.imgur.com/mBsXB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mBsXB.png" alt="image of issue"></a></p>