Creating a HTML link to Google Calendar with specific color
Question
I would like to create an HTML link in a user's Google Calendar whenever they click on a button on my website, and I would like to set a specific event color while doing so.
I've already found these answers below which are great and describing the link parameters, however none of them mention the event color parameter . Does anyone know a way to set the color of the event as well?
I have tried parameters: color , eventcolor , event_color , colorID , but none of them seems to work...
Thank you!
Link to add to google calendar
http://useroffline.blogspot.in/2009/06/making-google-calendar-link.html
Parameter descriptions in the second link:
anchor address
http://www .google.com/calendar/event?
This is the base of the address before the parameters below.
action
action=TEMPLATE
A default required parameter.
src
Example: src=default%40gmail.com
Format: src=text
This is not covered by Google help but is an optional parameter in order to add an event to a shared calendar rather than a user's default.
text
Example: text=Garden%20Waste%20Collection
Format: text=text
This is a required parameter giving the event title.
dates
Example: dates=20090621T063000Z/20090621T080000Z (i.e. an event on 21 June 2009 from 7.30am to 9.0am British Summer Time (=GMT+1)).
Format: dates=YYYYMMDDToHHMMSSZ/YYYYMMDDToHHMMSSZ
This required parameter gives the start and end dates and times (in Greenwich Mean Time) for the event.
location
Example: location=Home
Format: location=text
The obvious location field.
trp
Example: trp=false
Format: trp=true/false
Show event as busy (true) or available (false)
sprop
Example: sprop=http%3A%2F%2Fwww.me.org
Example: sprop=name:Home%20Page
Format: sprop=website and/or sprop=name:website_name
1 answers
solution1
1 2016-03-18 06:54:10
I guess I've found a way using the Google Calendar API. Not a matter of finding a parameter name, but not "that" complex either :).
Here you can start to read the whole story: https://developers.google.com/google-apps/calendar/quickstart/js
... or just get the code at the bottom :). It's pretty much just the Javascript quicstart example from the above link, but I have replaced the listing of the actual user's calendar events to what I needed: adding a new event with a particular color.
What you will need to get however is a Cliend ID if you don't have one already. The above site describes that process too.
The below snippet is what it's all about. Here you can see the colorId parameter. Also mind the date params, they are for all day events. If you need date and time use the dateTime one. (more about that here: https://developers.google.com/google-apps/calendar/create-events#add_an_event )
function listUpcomingEvents() {
var event = {
'summary': 'Test Event',
'description': 'Let's go somewhere fun',
'start': {
'date': '2016-03-17'
},
'end': {
'date': '2016-03-18'
},
'colorId': '5'
};
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': event
});
request.execute(function(event) {
appendPre('Event created: ' + event.htmlLink );
});
}
Full code:
<html>
<head>
<script type="text/javascript">
// Your Client ID can be retrieved from your project in the Google
// Developer Console, https://console.developers.google.com
var CLIENT_ID = '<CLIENT ID GOES HERE!!>';
var SCOPES = ["https://www.googleapis.com/auth/calendar"];
/**
* Check if current user has authorized this application.
*/
function checkAuth() {
gapi.auth.authorize(
{
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': true
}, handleAuthResult);
}
/**
* Handle response from authorization server.
*
* @param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
authorizeDiv.style.display = 'none';
loadCalendarApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
authorizeDiv.style.display = 'inline';
}
}
/**
* Initiate auth flow in response to user clicking authorize button.
*
* @param {Event} event Button click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: CLIENT_ID, scope: SCOPES, immediate: false},
handleAuthResult);
return false;
}
/**
* Load Google Calendar client library. List upcoming events
* once client library is loaded.
*/
function loadCalendarApi() {
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
/**
* Print the summary and start datetime/date of the next ten events in
* the authorized user's calendar. If no events are found an
* appropriate message is printed.
*/
function listUpcomingEvents() {
var event = {
'summary': 'Test Event',
'description': 'Let's go somewhere fun',
'start': {
'date': '2016-03-17'
},
'end': {
'date': '2016-03-18'
},
'colorId': '5'
};
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': event
});
request.execute(function(event) {
appendPre('Event created: ' + event.htmlLink );
});
}
/**
* Append a pre element to the body containing the given message
* as its text node.
*
* @param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('output');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=checkAuth">
</script>
</head>
<body>
<div id="authorize-div" style="display: none">
<span>Authorize access to Google Calendar API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button" onclick="handleAuthClick(event)">
Authorize
</button>
</div>
<pre id="output"></pre>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.