Question

我搜索过FullCalendar文档并搜索过，但我无法找到如何使用FullCalendar将事件添加到Google日历。我曾尝试将js Google API用于Google日历，但我对js很新，我还没有解决。所以我的问题是：我有一个网站，其中我使用FullCalendar来管理Google日历，但我无法向其添加事件。是否有人可以帮助我，也许有一个完整的工作示例？非常感谢您的precoius帮助！

Answer 1

我遇到了同样的问题。我阅读了很多文档，最后我得到了一个有效的代码。我在这里与你分享：

这是如何从Fullcalendar（我非常喜欢）在Google Cal中实际添加事件的方式：

第一：从FullCalendar获取自定义表格

 $('#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中。

第二：创建表格

1 /我创建表单

（在模态窗口中）。它将包含Google日历的所有信息。

<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的新页面

这样页面就不会重新加载......

<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);
    });
}   

});

最后，此处将此事件推入GOOGLE CAL

此PHP代码将写入文件calendrier_add.php：（当然，首先你必须在这里下载API：https://github.com/google/google-api-php-client：注意：autoload.php在src / Google中，root中的那个是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);

?>

我花了一些时间，但它对我来说很好。在我的脚本中，我可以通过更改calendarID来编写多个日历。它应该现在添加到Fullcalendar，但我没有GIT帐户，Node或NPM。

最后一件事

这可能很奇怪，但是我做这项工作的最佳方式也是将我的API控制台电子邮件帐户添加到日历的共享用户中！（在我获得10个声誉之前无法发布图像。） ..）

Answer 2

很好地记录了添加事件，请阅读：http://fullcalendar.io/docs/google_calendar/

我认为由于API更改而无法添加事件：

2014年11月17日，谷歌关闭了他们的日历API的V1和V2，FullCalendar依赖这些API。请升级到最新版本的FullCalendar或者至少用这个文件替换gcal.js（可以使用FullCalendar v2.0.0）。此外，现在还需要您自己的Google Calendar API密钥。

您使用的是最新版本吗？

Answer 3

我试图使用＆＃34; renderEvent＆＃34;事件，新事件在日历中创建，但它不是固定的（即下次刷新页面时事件不在那里）。这是我的代码：

<HTML>
    <HEAD>
        <link href="fullcalendar.css" rel="stylesheet" type="text/css"/>
        <script src="lib/jquery-ui.custom.min.js" type="text/javascript"></script>
        <script src="lib/jquery.min.js" type="text/javascript"></script>
        <script src="lib/moment.min.js" type="text/javascript"></script>
        <script src="fullcalendar.js" type="text/javascript"></script>
        <script src='lang/it.js' type='text/javascript'></script>
        <script src="gcal.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(document).ready
            (
                function()
                {
                    $('#calendar').fullCalendar
                    (
                        {
                            googleCalendarApiKey: '<MY GOOGLE CALENDAR API KEY>',
                            header: { 
                                        left: 'title',
                                        center: '',     
                                        right: 'month,agendaWeek,agendaDay,today,prev,next'
                                    },  
                            events: {
                                        googleCalendarId: '<MY GOOGLE CALENDAR ID>',
                                        className: 'gcal-event' 
                                    },
                            selectable:     true,
                            selectHelper:   true,
                            editable:       true,
                            dayClick: function()
                            {
                                var eventTitle = prompt('Event Title:');
                                if (title)
                                {
                                    var newEvent =  {
                                                        title:  eventTitle,
                                                        start:  '2015-01-01',
                                                    };
                                    $('#calendar').fullCalendar
                                    (
                                        'renderEvent',
                                        newEvent,
                                        true
                                    );
                                }
                                $('#calendar').fullCalendar('unselect');
                            }
                        }
                    );
                }
            );
        </script>
        <TITLE>Calendario</TITLE>
    </HEAD>
    <BODY>
        <div id='calendar'></div>
    </BODY>
<HTML>

如何使用FullCalendar将事件添加到Google日历

3 个答案:

第一：从FullCalendar获取自定义表格

第二：创建表格

最后，此处将此事件推入GOOGLE CAL

最后一件事