Google Calendar integration with Asp.net using iFrame

It's very easy to integrate Google Calendar to asp.net

      After a long research I have find the solution for Iframe problem with google Calender API.When you directly use the following code in ASP.Net

 <iframe src="http://www.google.com/calendar/"" width="2000" height="2000"></iframe>

      It will not render the Google page it shows empty page the reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

See: Mozilla Developer Network - The X-Frame-Options response header google page will not allow you to render the website in IFrame they enabled X-Frame.

 Solution 

      Please follow the steps to create a iFrame inside the google calendar application

• Go to the google calander then expand my calander from left tab.                                                                                                       
• Then click on the calendar name and  go to the calendar settings page.                                                  
• Then copy the iFrame link from embed this calander and use it in your Asp.Net application,here u can customize your google calendar by clicking Customize the color, size, and other.                                                                                                                                                                                                                                                                           
• My sample project output :                                                                                                                                                                                                                                                    

How To Add,update,Delete Events in google calendar using ASP.Net Refer this link 

Google Calendar (v3) Integration in ASP.NET: Create / edit / delete events

Have any queries comment here :)

Google Calendar Integration in ASP.NET

Google Calendar (v3) Integration in ASP.NET: Create / edit / delete events

How to programmatically create / edit / delete events in the Google calendar (v3) of a Gmail user.

Click the link to Download GoogleCalendarTest

Introduction

This article describes how to programmatically create / edit / delete events in the Google calendar (v3) of a Gmail user. The developer needs to create a project on Google API Console and use the credentials (ClientID, ClientSecret, and Redirect URL) to sync events on any Gmail user registered with the project.

Click the link to   Download GoogleCalendarTest

Using the Code

My intention is to let the user walk through the code so that he may be able to sync events of a web application (event management system, reservation system, etc.) with a user's Google Calendar.

IDE

• Visual Studio (I have used 2013)

Description of Files

First, I will give a brief description of the files used in this project.

App_Code

• GoogleCalendarAppointmentModel.cs - This file is used to keep the contents that need to be sent on Google Calendar
• GoogleCalendarManager.cs - This file contains all the functions to interact with Google Calendar i.e., read / write events, access the calendar, etc.
• GoogleTokenModel.cs - This file's contents are used to get the response from the Google Calendar API, i.e., the AccessToken (will be required for identification, will expire after a certain period of time), Refresh Token (will not expire and is used to get a new AccessToken).

Default.aspx -The main page where you can register, revoke, create / edit / delete events from Google Calendar

Click the link to   Download GoogleCalendarTest

Creating Project on Google API Console

• Goto https://console.developers.google.com and create a new project or click API Manager
• Click the Gmail API under Google Apps APIs and click on the calendar API under Click Enable API
• Click the Credentials under API & Auth 
  • Click Add Credentials and click oAuth 2.0 clientID 
  • select Configure consent screen
  • Provide product name, logo (optional) and Home page URL (optional). and click save.
  • Choose web application as Application type and provide the URL of your project (e.g. http://localhost:58392/GoogleCalandarDemo/Default.aspx this is the page where google will send the token and other credentials to access google calendar) and click create
  • Click on your project name under OAuth 2.0 client ID (web client 1 is the default name
  • Click Download JSON and save the file (I have added MyGoogleStorage folder in App_Data and placed this file inside. It contains the credentials for the project).
  • The MyGoogleStorage folder will be used for creating a temporary and a permanent file having Access token credential 
    • A temporary file will be created when redirected to google calendar
    • A new file Google.Apis.Auth.OAuth2.Responses.TokenResponse-m will be created upon successful registration

View the images below if you find anything confusing with the text.

Before running the code, make sure that

1. You have downloaded JSON client_secrets from https://console.developers.google.com and included it in MyGoogleStorage folder 
2. You have added calendar v3 from package manage console by writing Install-Package Google.Apis.Calendar.v3

Walkthrough the code (you will have to follow the sequence as this code was moved from calendar v2 to v3)

1. You need to type the address (in my case http://localhost:26033/default.aspx) again to get to the screen to register (just a glitch left)
2. Click the Register with google calendar button and allow the manage calendar rights
3. You have successfully registered the application with you google calendar but you need to get to the create event screen now. You need to click the button again to do that
4. Put the values on the create event screen and click Create / Update event
5. You will see the Event Created successfully message. You need to click the Google Calendar button to view the event on your google calendar

You need to follow the above sequence for 1st time registration. For next time after login, you will be redirected to create /  update event screen and things will go smooth

Click the link to  Download GoogleCalendarTest

To start over

If you ever want to check the code from start (when the user is not registered), you need to revoke the rights from https://security.google.com/settings/security/permissions and remove the newly created file (Google.Apis.Auth.OAuth2.Responses.TokenResponse-) from your MyGoogleStorage folder

The XML file only serves the purpose to mimic the behavior of db. You need to pay attention to how to register a client with google calendar and after that how to upload the event on the registered client's calendar

Hope this is all. I'll revise the code and remove the minor issues (for which you need to follow the sequence)

Click the link to  Download GoogleCalendarTest

Reference : https://www.codeproject.com/Articles/565032/Google-Calendar-Integration-in-ASP-NET-Create-ed

Have any queries comment here :)