[英]Return array of dates and times from Calendar API
There is no clear, concise, and easy-to-follow example for setting up a JavaScript google calendar API call.没有用于设置 JavaScript google 日历 API 调用的清晰、简洁且易于遵循的示例。
I found an example that I tried to use plugged my OAuth key into and it does not work.我发现了一个示例,我尝试使用将我的 OAuth 密钥插入但它不起作用。 To see the specific errors please visit Staging Website and open the console.要查看具体错误,请访问Staging 网站并打开控制台。
<script type="text/javascript">
// Enter an API key from the Google API Console:
// https://console.developers.google.com/apis/credentials
var apiKey = 'mXMq9NAQ9EOzdgleTTy4wobx';
// Enter the API Discovery Docs that describes the APIs you want to
// access. In this example, we are accessing the People API, so we load
// Discovery Doc found here: https://developers.google.com/people/api/rest/
var discoveryDocs = ["https://www.googleapis.com/calendar/v3/calendars/torontohomecleaning12@gmail.com/events"];
// Enter a client ID for a web application from the Google API Console:
// https://console.developers.google.com/apis/credentials?project=_
// In your API Console project, add a JavaScript origin that corresponds
// to the domain where you will be running the script.
var clientId = '646125501608-jtauc86qulpebg2oh49k4qglfjui82gc.apps.googleusercontent.com';
// Enter one or more authorization scopes. Refer to the documentation for
// the API or https://developers.google.com/people/v1/how-tos/authorizing
// for details.
var scopes = 'events';
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
// Load the API client and auth2 library
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
apiKey: apiKey,
discoveryDocs: discoveryDocs,
clientId: clientId,
scope: scopes
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
makeApiCall();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.people.people.get({
'resourceName': 'people/me',
'requestMask.includeField': 'person.names'
}).then(function(resp) {
var p = document.createElement('p');
var name = resp.result.names[0].givenName;
p.appendChild(document.createTextNode('Hello, '+name+'!'));
document.getElementById('content').appendChild(p);
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
The problem: I can't find a copy and paste example, where, all I have to do swap out is the OAuthkey and clientID so that I can return an array of dates and times currently on my Google Calendar that I am the owner of.问题:我找不到复制和粘贴示例,我所要做的只是换掉 OAuthkey 和 clientID,这样我就可以返回我拥有的 Google 日历上当前的日期和时间数组.
The end goal: To be able to filter a jQuery date-picker blackout dates based on the array of dates returned.最终目标:能够根据返回的日期数组过滤 jQuery 日期选择器中断日期。 Then, filter a drop-down menu of time slots based on what has already been booked for the day (if any times slots are available).然后,根据当天已预订的内容(如果有可用的时间段)过滤时间段下拉菜单。
I can't get past this first step of getting everything talking to each other.我无法超越让一切都互相交谈的第一步。
I see that you are using the Google People API.我看到您使用的是 Google People API。 For the call you requested (Getting an array of dates & times currently on your google calendar) I suggest you use the Google Calendar API (instead of the People API).对于您请求的呼叫(获取当前在您的 google 日历上的日期和时间数组),我建议您使用 Google Calendar API(而不是 People API)。 You can follow this comprehensive quickstart.您可以按照这个全面的快速入门。 For your specific needs, you can also head over to the list events API page, where you can use the API call builder to generate the necessary Javascript code to make it work.对于您的特定需求,您还可以前往 列表事件API 页面,您可以使用 API 调用生成器生成必要的 Javascript 代码以使其工作。
This is the code that it generated for the request you need to make:这是它为您需要发出的请求生成的代码:
<script src="https://apis.google.com/js/api.js"></script>
<script>
/**
* Sample JavaScript code for calendar.events.list
* See instructions for running APIs Explorer code samples locally:
* https://developers.google.com/explorer-help/guides/code_samples#javascript
*/
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.events.readonly https://www.googleapis.com/auth/calendar.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
gapi.client.setApiKey("YOUR_API_KEY");
return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.calendar.events.list({
"calendarId": "YOUR_CALENDAR_ID"
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
});
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
You only need to set your API key, client ID and calendar ID to make it work.您只需要设置您的 API 密钥、客户端 ID 和日历 ID 即可使其工作。 If you have any other question, please do not hesitate to reach back.如果您有任何其他问题,请随时回复。
Regards.问候。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.