API V-Calendar 自定义数据属性中的响应
API response in V-Calendar customData attribute
我正在尝试在 Vue 组件中使用 V-calendar 库 linked here。但是，我似乎在思考如何正确执行此操作时遇到了问题。我正在使用 Google 日历 API 从特定日历获取事件，但是 API returns 对象数组，其对象包含自己的对象并且它会下降更进一步。我已经能够访问我的事件并深入了解我需要的内容，但现在我需要弄清楚如何获取每个事件的日期跨度。
总体思路是基本上复制原始 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)
我终于在日历上看到了一些东西，但现在所有日期都突出显示了。我认为问题可能是假期函数返回了一个承诺，而不是值
图片：
我最终将库切换到 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>
我正在尝试在 Vue 组件中使用 V-calendar 库 linked here。但是，我似乎在思考如何正确执行此操作时遇到了问题。我正在使用 Google 日历 API 从特定日历获取事件，但是 API returns 对象数组，其对象包含自己的对象并且它会下降更进一步。我已经能够访问我的事件并深入了解我需要的内容，但现在我需要弄清楚如何获取每个事件的日期跨度。
总体思路是基本上复制原始 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)
我终于在日历上看到了一些东西，但现在所有日期都突出显示了。我认为问题可能是假期函数返回了一个承诺，而不是值
图片：
我最终将库切换到 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>