如何使用FullCalendar将事件添加到Google日历 [英] How to add events to Google Calendar using FullCalendar
问题描述
我已经通过FullCalendar文档进行了搜索，然后进行了搜索，但是我无法找到如何使用FullCalendar将事件添加到Google日历。
我已经尝试使用js Google API为Google日历，但我是新的js，我还没有解决。
所以我的问题是：我有一个网站，我使用FullCalendar来管理Google日历，但是我无法添加事件。有人可以帮助我，也许有充分的工作实例吗？
非常感谢您的precoius帮助！
I have searched through FullCalendar documentation and googled around but I haven't been able to find how to add events to Google Calendar using FullCalendar. I have tried using js Google APIs for Google Calendar but I am quite new to js and I have not resolved. So my question is: I have a website in which I used FullCalendar to manage a Google Calendar but I am not able to add events to it. Is there someone who can help me, maybe with a full working example? Many thanks for your precoius help!
推荐答案
我也有同样的问题。
我读了很多文档，最后我得到了一个工作的代码。我在这里分享：
I had the same problem. I read many documentation, and at last I got a working Code. I share it here whith you:
这是如何从Fullcalendar（我非常喜欢）在Google Cal中实际添加一个事件：
This is how to actually add an event in Google Cal from Fullcalendar (which I like very much) :
$('#calendar').fullCalendar({
set all options : options,
selectable: true,
selectHelper: true,
// here is the part :
select: function(start, end) {
modalbox(start.format(),end.format());
},
editable: true
});
所以，当我选择一个时间范围（使我可以管理输入我）。
我在这里使用start.format（），以便DateTime已经在GoogleFormat中。
So, I make a modal Box when I select a time range (so that I can manage the inputs myself). I use here start.format() so that the DateTime is already in a GoogleFormat.
1 /我创建表单
（在模态窗口中）。它将包含Google日历的所有信息。
(in modal window). It will contain all the info for Google Calendar.
<script type='text/javascript'>
$(function() {
function modalbox(start,end) {
ID = "popup";
// Title
var pop_content = '<h2>New event:</h2>
<form><div style="float:left;width:70%;text-align:right"><INPUT TYPE="TEXT" ID="title" style="width:200px;height:30px;line-height:30px;margin:5px;background-color:#EEF4F7" NAME="title" ><br>';
// Place
pop_content += '<div style="font-size:11px;color:gray;margin-top:10px">Place: <INPUT TYPE="TEXT" ID="where_event" style="width:200px;height:20px;line-height:20px;margin:3px;vertical-align:middle" NAME="where_event"><br>';
// Description
pop_content += 'Content : <TEXTAREA ID="content_event" style="width:200px;height:60px;margin:3px;font-family:sans-serif;font-size:13px;vertical-align:middle" NAME="content_event"></TEXTAREA></div> </div>';
// Submit
pop_content += '<INPUT type="submit" style="height:40px;width:90px" value="OK">';
// Start and End of the event
pop_content += '<INPUT TYPE="HIDDEN" ID="start" NAME="start" value="'+start+'"><INPUT type="HIDDEN" ID="end" NAME="end" value="'+end+'"></form>';
/****** Some CSS effect *****************/
$('#'+ID).fadeIn().css({'width': 500})
.empty()
.prepend('<a href="#" class="close"><img src="images/close.png" border="0" class="btn_close" title="Fermer" alt="Fermer" /></a>')
.append(pop_content);
// Some CSS Adjust for centering the box
var popMargTop = ($('#' + ID).height() + 80) / 2;
var popMargLeft = ($('#' + ID).width() + 80) / 2;
$('#' + ID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Effet fade-in du fond opaque
$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
//Fade in the Popup and add close button
}
/********** end of CSS effects *************/
});
</script>
<div id="popup" class="popup_block"></div>
。
2 /我收到的数据并将其推送到AJAX的新页面
，以便该页面不会重新加载...
so that the page does not reload...
<script type='text/javascript'>
$(function() {
/*********** We get the form data ****************/
$('#popup').submit(function(event) {
event.preventDefault(); // on stop le submit
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
var where_event = $('#where_event').val();
var content_event = $('#content_event').val();
// because we want immediate reaction of FullCalendar, we render the created event on the FullCalendar, even if it's only temporarily
if (title) {
$('#calendar').fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
true // make the event "stick"
);
// Now we push it to Google also :
add_event_gcal(title,start,end,where_event,content_event);
}
// Wether we had the form fulfilled or not, we clean FullCalendar and close the popup
$('#calendar').fullCalendar('unselect');
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').hide("normal");
});
});
/****** NOW WE ASK THE EVENT TO BE PUSHED TO GOOGLE **************/
function add_event_gcal(title,start,end,where_event,content_event) {
// I will create the eventInsert script in a new page, and I name it here :
var url = "calendrier_add.php";
var data = {'titre_event' :title, 'start' : start, 'end' :end, 'where_event' : where_event, 'content_event' : content_event};
// I want to check in the page the result of what happened
$('#gcal_loader').load(url,data,function(responseTxt,statusTxt,xhr){
if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText);
});
}
});
。
这个PHP代码将被写入calendrier_add.php文件：
（当然，首先你必须下载API在这里： https://github.com/google/google-api-php-client ： BEWARE：autoload.php在src / Google中，root中是rooten ...）
This PHP code is to be written in the file calendrier_add.php : (of course, first you had to download the API here : https://github.com/google/google-api-php-client : BEWARE : the autoload.php is in src/Google, the one in root is rooten...)
<?php
// variables can only be got with $_REQUEST ?
$titre_event = $_REQUEST['titre_event'];
$start = $_REQUEST['start'];
$end = $_REQUEST['end'];
$allday = $_REQUEST['allday'];
$where_event = $_REQUEST['where_event'];
$content_event = $_REQUEST['content_event'];
/********************************************
GOOGLE API CONNECTION
********************************************/
/************************************************
Make an API request authenticated with a service account.
************************************************/
require_once 'fullcalendar/google-api-php-client-master/src/Google/autoload.php'; // or wherever autoload.php is located
/************************************************
The name is the email address value provided as part of the service account (not your address!)
cf. : https://console.developers.google.com/project/<your account>
************************************************/
$client_id = '12345467-123azer123aze123aze.apps.googleusercontent.com'; // YOUR Client ID
$service_account_name = '12345467-123azer123aze123aze@developer.gserviceaccount.com'; // Email Address in the console account
$key_file_location = 'fullcalendar/google-api-php-client-master/API_Project-35c93db58757.p12'; // key.p12 to create in the Google API console
if (strpos($client_id, "googleusercontent") == false || !strlen($service_account_name) || !strlen($key_file_location)) {
echo "no credentials were set.";
exit;
}
/** We create service access ***/
$client = new Google_Client();
/************************************************
If we have an access token, we can carry on. (Otherwise, we'll get one with the help of an assertion credential.)
Here we have to list the scopes manually. We also supply the service account
************************************************/
if (isset($_SESSION['service_token'])) {
$client->setAccessToken($_SESSION['service_token']);
}
$key = file_get_contents($key_file_location);
$cred = new Google_Auth_AssertionCredentials(
$service_account_name,
array('https://www.googleapis.com/auth/calendar'), // ou calendar_readonly
$key
);
$client->setAssertionCredentials($cred);
if ($client->getAuth()->isAccessTokenExpired()) {
$client->getAuth()->refreshTokenWithAssertion($cred);
}
$_SESSION['service_token'] = $client->getAccessToken();
/********************************************
END OF GOOGLE API CONNECTION
********************************************/
/*********** AT LAAAAST, WE PUSH THE EVENT IN GOOGLE CALENDAR ***************/
// Get the API client and construct the service object.
$service = new Google_Service_Calendar($client);
// We get the calendar
$calendarId = 'Google_login@gmail.com'; // or whatever calendar you like where you have editable rights
/************* INSERT ****************/
$event = new Google_Service_Calendar_Event(array(
'summary' => $titre_event,
'location' => $where_event,
'description' => $content_event,
'start' => array(
'dateTime' => $start, //'2015-06-08T15:00:00Z'
'timeZone' => 'Europe/Paris',
),
'end' => array(
'dateTime' => $end,
'timeZone' => 'Europe/Paris',
),
/* in case you need that :
'attendees' => array(
array('email' => 'lpage@example.com'),
array('email' => 'sbrin@example.com'),
),*/
'reminders' => array(
'useDefault' => FALSE,
'overrides' => array(
array('method' => 'email', 'minutes' => 20)
),
),
));
$event = $service->events->insert($calendarId, $event);
printf('Event created: %s', $event->htmlLink);
?>
我花了一段时间，但对我来说很好。
在我的脚本中，我可以通过更改日历ID来编写多个日历。
现在应该添加到Fullcalendar，但是我没有GIT帐户Node或NPM。
I spent some time, but it works fine for me. In my script, I can write on multiple calendars just by changing calendarID. It should be added to Fullcalendar now, but I have no GIT account, Node or NPM.
这可能很奇怪，但我做这项工作的最好办法也是将我的API控制台电子邮件帐户添加到日历的共享用户全功能！（无法发布图像，直到我有10个声望...）
It may be strange, but the best way for me to make this work was also to ADD my API Console email account to the shared users of the calendar with full power!(can't post image until I got 10 reputations...)
这篇关于如何使用FullCalendar将事件添加到Google日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
