Ответ API в атрибуте customData V-Calendar - PullRequest
Новая
       22

Ответ API в атрибуте customData V-Calendar

0 голосов
/ 02 апреля 2019

Я пытаюсь использовать библиотеку V-calendar , связанную здесь , в компоненте Vue.Однако у меня, похоже, возникла проблема с тем, как правильно сделать это.Я использую API Календаря Google, чтобы получать события из определенного календаря, но API возвращает массив объектов, чьи объекты содержат свои собственные объекты, и он снижается еще дальше.Я смог получить доступ к своим событиям и перейти к тому, что мне нужно, но теперь мне нужно выяснить, как получить диапазон дат для каждого события.

Основная идея заключается в том, чтобы в основном дублировать исходный Googleкалендарь, но показывают только определенные события.

Надеюсь, в этом есть смысл, я с радостью отвечу на любые дополнительные вопросы, если они есть.

Код: 

<template>
  <v-calendar >
  </v-calendar>
</template>

<script>
  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 => {
            const data = res.data.items;

            const filteredResult = data.filter((item, i) => {
                if(item.summary.includes("Holiday") && !item.summary.includes("Student")) {
                    return item
                }
            });
            console.log(filteredResult)
        })
      }
    ]
  }

    }
}
</script>

А вот пример того, чтоВозвращается вызов API: 

(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

РЕДАКТИРОВАТЬ

Я работал над дополнительным кодом, чтобы отфильтровать ненужные результаты.Вот обновленный компонент vue: 

<template>
    <v-calendar
    :attributes='attributes'
    is-expanded>
    </v-calendar>
</template>

<script>
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 => {

            // 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) => {
                if(item.summary.includes("Holiday") && !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) => {
               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 => {
                let newdata = data
                console.log(newdata)
                return newdata
            })
        },
        {
          highlight: {
            backgroundColor: '#66b3cc', // Turquoise
            borderColor: '#53a9c6',
            borderWidth: '2px',
            borderRadius: '5px',
          },
          contentStyle: {
            color: 'white',
          }
        },
      ],
    };
  },
};
</script>

И вывод на консоль: 

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)

Я наконец что-то вижу в календаре, но все даты теперь выделены.Я думаю, что проблема может заключаться в том, что функция праздника возвращает обещание, а не значения

Изображение: image of issue

1 Ответ

0 голосов
/ 04 апреля 2019

В итоге я переключил библиотеки на vue-fullcalendar и немного изменил код. Я думаю, проблема была в том, что я пытался ввести обещание в значение Date. Чтобы понять это, потребовалось много времени, и я сделал только console.log() переменную, которую я возвращал. Приведенный ниже код дает ожидаемый результат, и, хотя это может быть не самый эффективный ответ, мне удалось выяснить это.

Как уже упоминалось, здесь указан код: 

<template>
  <full-calendar :events="events"></full-calendar>
</template>

<script>
import { calendarAPI } from "../../views/auth/keys/googleCalendar.js";
import axios from "axios";
import { FullCalendar } from "vue-full-calendar";
import "fullcalendar/dist/fullcalendar.css";

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      events: []
    };
  },
  mounted() {
    // grabbing data from the api
    const getHolidays = () =>
      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 => {
          // 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) => {
            if (
              item.summary.includes("Holiday") &&
              !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) => {
            console.log(item);
            const timespan = {
              id: i,
              title: item.summary,
              description: item.summary,
              start: item.start.date,
              end: item.end.date
            };
            return timespan;
          });
          // should return only the new object
          return dates;
        });

    getHolidays().then(data => {
      let events = data;
      this.events = events;
    });

    const holidays = this.events;
  }
};
</script>
...