The Calendar Connect component provides a seamless way for users to connect their external calendars to meetergo.
Why Calendar Connection?
Connected calendars enable:
- Conflict detection - Automatically block times when users have other events
- Event creation - Create calendar events when bookings are made
- Two-way sync - Keep meetergo and external calendars in sync
Supported Providers
| Provider | Features |
|---|
| Google Calendar | Full read/write, multiple calendars |
| Microsoft 365 | Outlook calendar, Teams integration |
| CalDAV | Self-hosted calendars (via API only) |
Component Usage (Coming Soon)
Basic Embed
<div id="calendar-connect"></div>
<script src="https://cdn.meetergo.com/components.js"></script>
<script>
Meetergo.CalendarConnect({
container: '#calendar-connect',
userId: 'user-uuid',
onConnect: (connection) => {
console.log('Connected:', connection);
}
});
</script>
React Component
import { CalendarConnect } from '@meetergo/react';
function Settings() {
return (
<CalendarConnect
userId={userId}
providers={['google', 'microsoft']}
showStatus={true}
onConnect={(connection) => {
toast.success(`Connected ${connection.provider}!`);
}}
onDisconnect={(provider) => {
toast.info(`Disconnected ${provider}`);
}}
onError={(error) => {
toast.error(error.message);
}}
/>
);
}
Configuration Options
Meetergo.CalendarConnect({
// Required
container: '#calendar-connect',
userId: 'user-uuid',
// Optional
providers: ['google', 'microsoft'], // Which providers to show
showStatus: true, // Show connection status
allowDisconnect: true, // Show disconnect button
allowMultiple: true, // Allow multiple calendars per provider
// Styling
theme: {
primaryColor: '#2563eb',
borderRadius: '8px'
},
// Labels (for i18n)
labels: {
title: 'Connect your calendar',
google: 'Google Calendar',
microsoft: 'Microsoft 365',
connect: 'Connect',
disconnect: 'Disconnect',
connected: 'Connected'
},
// Callbacks
onConnect: (connection) => {},
onDisconnect: (provider) => {},
onError: (error) => {}
});
Current API Implementation
While the component is in development, use the API directly:
Get OAuth URL
// Redirect user to connect their calendar
async function connectCalendar(userId, provider) {
const response = await fetch(
`https://api.meetergo.com/v4/calendar-auth/url?provider=${provider}&redirectUrl=${encodeURIComponent(window.location.href)}`,
{
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'x-meetergo-api-user-id': userId
}
}
);
const { authUrl } = await response.json();
// Redirect user to OAuth flow
window.location.href = authUrl;
}
// Usage
connectCalendar('user-uuid', 'google');
Handle OAuth Callback
// On your redirect page
async function handleCallback() {
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const state = params.get('state');
if (code) {
// The OAuth flow is complete
// meetergo handles the token exchange automatically
console.log('Calendar connected successfully!');
// Redirect to success page
window.location.href = '/settings?calendar=connected';
}
}
Check Connection Status
async function getCalendarConnections(userId) {
const response = await fetch(
`https://api.meetergo.com/v4/calendar-connections`,
{
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'x-meetergo-api-user-id': userId
}
}
);
return response.json();
}
// Usage
const connections = await getCalendarConnections('user-uuid');
// Returns: [{ provider: 'google', email: '[email protected]', connected: true }]
Disconnect Calendar
async function disconnectCalendar(userId, connectionId) {
await fetch(
`https://api.meetergo.com/v4/calendar-connections/${connectionId}`,
{
method: 'DELETE',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'x-meetergo-api-user-id': userId
}
}
);
}
Building Your Own UI
Example React implementation using the API:
import { useState, useEffect } from 'react';
function CalendarConnectCustom({ userId }) {
const [connections, setConnections] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
loadConnections();
}, [userId]);
async function loadConnections() {
const response = await fetch('/api/calendar-connections', {
headers: { 'x-user-id': userId }
});
setConnections(await response.json());
setLoading(false);
}
async function connect(provider) {
const response = await fetch(`/api/calendar-auth/url?provider=${provider}`, {
headers: { 'x-user-id': userId }
});
const { authUrl } = await response.json();
window.location.href = authUrl;
}
async function disconnect(connectionId) {
await fetch(`/api/calendar-connections/${connectionId}`, {
method: 'DELETE',
headers: { 'x-user-id': userId }
});
loadConnections();
}
if (loading) return <div>Loading...</div>;
const providers = [
{ id: 'google', name: 'Google Calendar', icon: '📅' },
{ id: 'microsoft', name: 'Microsoft 365', icon: '📆' }
];
return (
<div className="calendar-connect">
<h3>Calendar Connections</h3>
{providers.map(provider => {
const connection = connections.find(c => c.provider === provider.id);
return (
<div key={provider.id} className="provider-row">
<span>{provider.icon} {provider.name}</span>
{connection ? (
<div>
<span className="connected">✓ {connection.email}</span>
<button onClick={() => disconnect(connection.id)}>
Disconnect
</button>
</div>
) : (
<button onClick={() => connect(provider.id)}>
Connect
</button>
)}
</div>
);
})}
</div>
);
}
Best Practices
Explain the benefits - Tell users why connecting their calendar helps
Handle errors gracefully - OAuth can fail; show helpful messages
Show connection status - Let users see which calendars are connected
Provide disconnect option - Users should be able to remove connections
Secure your redirect URL - Only allow redirects to your own domain
Next Steps
