Блог

Я пытаюсь использовать V-calendar библиотеку , связанную здесь, в компоненте Vue. Однако, похоже, у меня возникла проблема с обдумыванием того, как это сделать правильно. Я использую Google Calendar API для получения событий из определенного календаря, но 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") amp;amp; !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") 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) => {
               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)
  

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

Изображение:

В итоге я переключил библиотеки на vue-fullcalendar и немного изменил код. Я думаю, проблема заключалась в том, что я пытался ввести обещание в Date значение ‘s . Потребовалось много времени, чтобы понять это, и я сделал это только с помощью 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") 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) => {
            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>