Integrating calendars (Outlook/Google)

Integrating Google and Outlook calendars can streamline workflows, support booking systems, sync events, and provide a unified experience. We’ll explore:

• OAuth authentication
• Accessing calendar data
• Adding/viewing/updating events
• Best practices and security

We’ll break it into two parts:

1. Google Calendar Integration
2. Outlook (Microsoft) Calendar Integration

---

Part 1: Google Calendar Integration

---

Step 1: Set Up Google Cloud Project

1. Visit https://console.cloud.google.com/
2. Create a new project (e.g., Calendar Integration)
3. Navigate to APIs & Services > Library
4. Search for Google Calendar API, enable it
5. Go to Credentials > Create Credentials > OAuth 2.0 Client ID
6. Choose:
   • Web application as application type
   • Add your domain to Authorized JavaScript origins
   • Add callback URL to Authorized redirect URIs
7. Save and copy the Client ID

---

Step 2: Include Google API Script

Add this in your HTML file:

<script src="https://accounts.google.com/gsi/client" async defer></script>

---

Step 3: Authenticate the User with Google

You can use Google Identity Services:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-callback="handleCredentialResponse">
</div>

<script>
  function handleCredentialResponse(response) {
    const token = response.credential;
    // You can now use this token to call the Calendar API via server
  }
</script>

For full calendar access, you’ll need OAuth with scopes:

gapi.load('client:auth2', () => {
  gapi.client.init({
    apiKey: 'YOUR_API_KEY',
    clientId: 'YOUR_CLIENT_ID',
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
    scope: 'https://www.googleapis.com/auth/calendar.events'
  }).then(() => {
    gapi.auth2.getAuthInstance().signIn().then(() => {
      // Ready to use Calendar API
    });
  });
});

---

Step 4: List Upcoming Events

gapi.client.calendar.events.list({
  'calendarId': 'primary',
  'timeMin': (new Date()).toISOString(),
  'showDeleted': false,
  'singleEvents': true,
  'maxResults': 5,
  'orderBy': 'startTime'
}).then(response => {
  const events = response.result.items;
  events.forEach(event => {
    console.log(`${event.summary} at ${event.start.dateTime || event.start.date}`);
  });
});

---

Step 5: Create a New Event

const event = {
  'summary': 'Test Event',
  'location': 'Online',
  'description': 'Calendar API event test',
  'start': {
    'dateTime': '2025-04-26T10:00:00-07:00',
    'timeZone': 'America/Los_Angeles',
  },
  'end': {
    'dateTime': '2025-04-26T11:00:00-07:00',
    'timeZone': 'America/Los_Angeles',
  }
};

gapi.client.calendar.events.insert({
  'calendarId': 'primary',
  'resource': event
}).then(event => {
  console.log('Event created: ', event.htmlLink);
});

---

Step 6: Show Calendar in iFrame (View-only)

<iframe src="https://calendar.google.com/calendar/embed?src=your_email@gmail.com&ctz=Asia/Kolkata"
  style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

---

Part 2: Outlook Calendar Integration

---

Step 1: Register App on Azure

1. Go to https://portal.azure.com
2. Navigate to Azure Active Directory > App registrations
3. Click New registration
4. Enter:
   • Name: Outlook Calendar Integration
   • Redirect URI: your site URL (e.g., https://yourdomain.com/callback)
5. Save and note the Application (client) ID

---

Step 2: Configure Permissions

Go to API permissions, click Add a permission, choose:

• Microsoft Graph
• Delegated permissions:
  • Calendars.Read
  • Calendars.ReadWrite
  • User.Read

---

Step 3: OAuth Flow

Redirect users to:

https://login.microsoftonline.com/common/oauth2/v2.0/authorize?
client_id=YOUR_CLIENT_ID
&response_type=code
&redirect_uri=YOUR_REDIRECT_URI
&response_mode=query
&scope=offline_access user.read calendars.read calendars.readwrite
&state=12345

Once the user logs in, you get a code in the query string. Exchange it for a token on your server:

bashCopyEditPOST https://login.microsoftonline.com/common/oauth2/v2.0/token

With body parameters:

• client_id
• scope
• code
• redirect_uri
• grant_type: authorization_code
• client_secret

---

Step 4: Call Microsoft Graph to Read Events

GET https://graph.microsoft.com/v1.0/me/events
Authorization: Bearer ACCESS_TOKEN

Example Response:

{
  "value": [
    {
      "subject": "Team Meeting",
      "start": { "dateTime": "2025-04-26T14:00:00", "timeZone": "UTC" },
      "end": { "dateTime": "2025-04-26T15:00:00", "timeZone": "UTC" }
    }
  ]
}

---

Step 5: Add New Event

POST https://graph.microsoft.com/v1.0/me/events
Authorization: Bearer ACCESS_TOKEN
Content-Type: application/json

{
  "subject": "Project Discussion",
  "start": {
    "dateTime": "2025-04-27T10:00:00",
    "timeZone": "UTC"
  },
  "end": {
    "dateTime": "2025-04-27T11:00:00",
    "timeZone": "UTC"
  },
  "location": {
    "displayName": "Teams Meeting"
  }
}

---

Step 6: Embed Outlook Calendar (View-only)

Outlook doesn’t support an iframe by default. However, you can share your calendar publicly from Outlook > Settings > Calendar > Shared Calendars, and generate a URL to embed in your site.

---

Step 7: Best Practices

• Always store tokens securely (server-side)
• Use refresh tokens for long-term access
• Request only necessary scopes
• Handle token expiration gracefully
• Use HTTPS for all redirects and APIs