현재 삽입 할 수있는 iframe이있는 내 웹 사이트에서 Google 캘린더를 사용하고 있습니다. 나는 Fullcalendar를 테스트했으며, 당신이 그걸로 할 수있는 것을 좋아합니다.개인 Google 캘린더 이벤트가 포함 된 FullCalendar
하지만 임베디드 캘린더와 동일하게하고 싶습니다. 개인 이벤트 (캘린더, 이벤트 아님)를 만들 수 있기를 바랍니다. 캘린더의 공유 설정은 공개되어 있지만 Chrome을 사용하는 경우 Google 계정으로 로그인하고 퍼가기 캘린더를 사용하면 비공개 일정 (캘린더에 액세스 할 수있는 경우)을 볼 수 있습니다.
Fullcalendar로 가능합니까?
OAUTH를 통해 어떻게 연결하고 인증시 비공개 이벤트를 얻는 지 알아냅니다.
버튼을 클릭하면 Google 계정에 연결할 수 있습니다 (이미 브라우저에 연결되어 있으면 버튼이 나타나지 않고 자동으로 로그됩니다).
가 나는
<script type="text/javascript">
\t \t \t var clientId = '<your-client-id>';
\t \t \t var apiKey = '<your-api-key>';
\t \t \t var scopes = 'https://www.googleapis.com/auth/calendar';
\t \t \t function handleClientLoad() {
\t \t \t \t gapi.client.setApiKey(apiKey);
\t \t \t \t window.setTimeout(checkAuth,1);
\t \t \t }
\t \t \t function checkAuth() {
\t \t \t \t gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
\t \t \t }
\t \t \t function handleAuthResult(authResult) {
\t \t \t \t var authorizeButton = document.getElementById('authorize-button');
\t \t \t \t
\t \t \t \t if (authResult && !authResult.error) {
\t \t \t \t \t authorizeButton.style.visibility = 'hidden'; \t \t
\t \t \t \t \t makeApiCall();
\t \t \t \t } else {
\t \t \t \t \t authorizeButton.style.visibility = '';
\t \t \t \t \t authorizeButton.onclick = handleAuthClick;
\t \t \t \t \t GeneratePublicCalendar();
\t \t \t \t }
\t \t \t }
\t \t \t function handleAuthClick(event) {
\t \t \t \t gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
\t \t \t \t return false;
\t \t \t }
\t \t \t
\t \t \t
\t \t \t // Load the API and make an API call. Display the results on the screen.
\t \t \t function makeApiCall() {
\t \t \t \t // Step 4: Load the Google+ API
\t \t \t \t gapi.client.load('calendar', 'v3').then(function() {
\t \t \t \t // Step 5: Assemble the API request
\t \t \t \t \t var request = gapi.client.calendar.events.list({
\t \t \t \t \t \t \t 'calendarId': '<your-calendar-id(The @gmail.com>'
\t \t \t \t \t \t });
\t \t \t \t
\t \t \t \t \t \t // Step 6: Execute the API request
\t \t \t \t \t \t request.then(function(resp) {
\t \t \t \t \t \t \t var eventsList = [];
\t \t \t \t \t \t \t var successArgs;
\t \t \t \t \t \t \t var successRes;
\t \t \t \t \t \t \t if (resp.result.error) {
\t \t \t \t \t \t \t \t reportError('Google Calendar API: ' + data.error.message, data.error.errors);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t else if (resp.result.items) {
\t \t \t \t \t \t \t \t $.each(resp.result.items, function(i, entry) {
\t \t \t \t \t \t \t \t \t var url = entry.htmlLink;
\t \t \t \t \t \t \t \t \t // make the URLs for each event show times in the correct timezone
\t \t \t \t \t \t \t \t \t //if (timezoneArg) {
\t \t \t \t \t \t \t \t \t // url = injectQsComponent(url, 'ctz=' + timezoneArg);
\t \t \t \t \t \t \t \t \t //}
\t \t \t \t \t \t \t \t \t eventsList.push({
\t \t \t \t \t \t \t \t \t \t id: entry.id,
\t \t \t \t \t \t \t \t \t \t title: entry.summary,
\t \t \t \t \t \t \t \t \t \t start: entry.start.dateTime || entry.start.date, // try timed. will fall back to all-day
\t \t \t \t \t \t \t \t \t \t end: entry.end.dateTime || entry.end.date, // same
\t \t \t \t \t \t \t \t \t \t url: url,
\t \t \t \t \t \t \t \t \t \t location: entry.location,
\t \t \t \t \t \t \t \t \t \t description: entry.description
\t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t // call the success handler(s) and allow it to return a new events array
\t \t \t \t \t \t \t \t successArgs = [ eventsList ].concat(Array.prototype.slice.call(arguments, 1)); // forward other jq args
\t \t \t \t \t \t \t \t successRes = $.fullCalendar.applyAll(true, this, successArgs);
\t \t \t \t \t \t \t \t if ($.isArray(successRes)) {
\t \t \t \t \t \t \t \t \t return successRes;
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t if(eventsList.length > 0)
\t \t \t \t \t \t \t {
// Here create your calendar but the events options is :
//fullcalendar.events: eventsList (Still looking for a methode that remove current event and fill with those news event without recreating the calendar.
}
return eventsList;
\t \t \t \t \t \t \t
\t \t \t \t \t }, function(reason) {
\t \t \t \t \t \t console.log('Error: ' + reason.result.error.message);
\t \t \t \t \t });
\t \t \t \t });
\t \t \t }
function GeneratePublicCalendar(){
// You need a normal fullcalendar with googleApi when user isn't logged
$('#calendar').fullCalendar({
googleCalendarApiKey: '<your-key>',
...
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>그리고 당신이 구글 API를 콘솔에서 this google example
는, API에 확인에 따라 & 인증 -> ID
OAuth는 자바 스크립트 원점이 제대로 설정 (처럼 http://localhost 로컬 웹 사이트에서 작업하는 경우 https://localhost
리디렉션과 API 참조 대상을 비워 둡니다.
Fullcalendar는 프런트 엔드 솔루션입니다. Google 계정 및 기타 인증에 로그인하는 것은 해당 계정의 일부가 아닙니다.
즉, 공개 Google 캘린더 인 경우에만 connected to a google calendar이 될 수 있습니다. 비공개 Google 캘린더에 연결하려면 해당 기능을 구축해야합니다.
JS로 gcal 이벤트를 가져와 인증을 처리 할 수 있다면 FullCalendar로 가져 오는 것이 쉽습니다. 그러나 그 첫 번째 부분은 몇 걸음 씩 걸립니다. Google 캘린더 API 문서를 살펴 보시기 바랍니다.
예, 저는 Fullcalendar를 만들었고 쉽고 멋졌습니다. 하지만 내가 찾고있는 것은 gcal.js에서 인증을 처리하고 가능한 경우 개인 이벤트를 수집 할 수 있도록 수정 한 것입니다. 당신이 이벤트가 비공개이고 당신의 감정이 바쁠 경우, Fullcalendar는 이벤트를 정의되지 않은 이벤트로로드합니다. 로그인 한 경우이 정의되지 않은 이벤트를 변경하고 싶습니다. – Vuwox
@AlexandreBizeau http://stackoverflow.com/questions/10946993/parse-private-gcal-json-object-with-fullcalendar에 따라 캘린더의 비공개 피드를 사용할 수 있습니다. 비록 인증을 할 때 어떻게 작동하는지 모르겠습니다. 어쩌면 개인 피드를 사용해 보지만 실패하면 대체 할 수 있습니다. – slicedtoad
그리고 그게 작동하지 않으면, 알려 주시기 바랍니다 그리고 나는 아마도 내 대답을 삭제할 것입니다. – slicedtoad