How to: Share your Google Calendar

How to: Share Calendars

Complete Guide: Embedding Multiple Google Calendars with Toggle Controls

Overview

This comprehensive guide will show you how to create a custom webpage that displays multiple Google Calendars in a single frame with toggle controls. Visitors to your website will be able to view all your calendars together and selectively show or hide individual calendars, just like in the Google Calendar interface. This is perfect for sports clubs, organizations, or any group that manages multiple schedules.

Prerequisites

What You'll Need:

Public Google Calendars (set to "Anyone with the link" can view)
Basic HTML/JavaScript knowledge (or willingness to copy/paste code)
A website or web hosting service to publish your calendar page
Web browser for testing

Part 1: Preparing Your Google Calendars

1 Make Your Calendars Public

For each calendar you want to embed, ensure it's set to public:

Open Google Calendar
Find your calendar in the left sidebar
Click the three dots next to the calendar name
Select "Settings and sharing"
Scroll to "Access permissions for events"
Check "Make available to public"
Choose "See all event details"

2 Get the Calendar Embed Code

For each calendar, get the embed code:

In calendar settings, scroll to "Integrate calendar"
Copy the "Embed code" (it will look like an iframe)
Save this code - you'll need it for the next steps

Example embed code:

3 Extract Calendar IDs and Colors

From each embed code, you need to extract:

Calendar ID: The long string before "@group.calendar.google.com"
Color: Choose a color for each calendar (we'll set these manually)
Display Name: A friendly name for each calendar

Example Calendar ID:
From: src=MTk0NzM5ZWMyMjI3Y2U2NTNlOTQ0NDY5MDI5N2EwZDkyNTA2M2FmODRiZTlkNGI2MmRjNGM1ZDA4ZTBkNWZlM0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t
Calendar ID: MTk0NzM5ZWMyMjI3Y2U2NTNlOTQ0NDY5MDI5N2EwZDkyNTA2M2FmODRiZTlkNGI2MmRjNGM1ZDA4ZTBkNWZlM0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t

4 Choose Calendar Colors

Select distinct colors for each calendar. Here are some good options:

Red: %23d50000
Pink: %23d81b60
Orange: %23f6bf26
Blue: %23039be5
Green: %2333b679
Purple: %23673ab7

Note: Colors must be URL-encoded (% instead of #). The % symbol represents the # character in URLs.

Part 2: Extracting Calendar Information

5 Create the HTML Structure

Create a new HTML file and copy the following complete code. Click Here for an example. Replace the calendar information with your own:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Calendar View</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Bitter', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            font-size: 14px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #8b2233;
            text-align: center;
            border-bottom: 0px solid #8b2233;
            padding-bottom: 0px;
            margin-bottom: 30px;
            font-size: 2em;
        }
        
        h2 {
            color: #8b2233;
            margin-top: 30px;
            margin-bottom: 15px;
            border-left: 4px solid #e47522;
            padding-left: 15px;
            font-size: 1.4em;
        }
        
        h3 {
            color: #666;
            margin-top: 25px;
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        
        .controls {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            border-left: 4px solid #407ac0;
            margin: 20px 0;
        }
        
        .controls h3 {
            margin: 0 0 15px 0;
            color: #8b2233;
        }
        
        .calendar-controls {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px 20px;
            margin-top: 10px;
        }
        
        .calendar-toggle {
            display: flex;
            align-items: center;
        }
        
        .toggle-checkbox {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .toggle-label {
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            user-select: none;
        }
        
        .toggle-label:hover {
            color: #8b2233;
        }
        
        /* Calendar 1 - Red */
        #cal1:checked + .toggle-label {
            color: #d50000;
            font-weight: 600;
        }
        
        /* Calendar 2 - Pink */
        #cal2:checked + .toggle-label {
            color: #d81b60;
            font-weight: 600;
        }
        
        /* Calendar 3 - Orange */
        #cal3:checked + .toggle-label {
            color: #f6bf26;
            font-weight: 600;
        }
        
        /* Calendar 4 - Blue */
        #cal4:checked + .toggle-label {
            color: #039be5;
            font-weight: 600;
        }
        
        /* Calendar 5 - Green */
        #cal5:checked + .toggle-label {
            color: #33b679;
            font-weight: 600;
        }
        
        /* Calendar 6 - Purple */
        #cal6:checked + .toggle-label {
            color: #673ab7;
            font-weight: 600;
        }
        
        .calendar-container {
            padding: 20px;
            text-align: center;
        }
        
        .calendar-frame {
            border: 1px solid #ddd;
            border-radius: 8px;
            width: 100%;
            max-width: 100%;
            height: 600px;
        }
        
        .loading {
            padding: 40px;
            text-align: center;
            color: #666;
            font-style: italic;
        }
        
        .important-note {
            background-color: #fff8f0;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #e47522;
            margin: 15px 0;
        }
        
        .warning {
            background-color: #fdf2f2;
            padding: 15px 0px 5px 15px;
            border-radius: 5px;
            border-left: 3px solid #8b2233;
            margin: 15px 0;
        }
        
        .code {
            background: #f1f3f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 12px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            margin: 10px 0;
            word-break: break-all;
        }
        
        strong {
            color: #8b2233;
        }
        
        a {
            color: #8b2233;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .calendar-frame {
                height: 500px;
            }
            
            .container {
                padding: 20px;
            }
            
            .calendar-controls {
                gap: 10px;
            }
            
            .toggle-label {
                font-size: 13px;
            }
        }
        
        @media (max-width: 480px) {
            .calendar-controls {
                gap: 8px;
            }
            
            .toggle-label {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Football Fixtures Calendar</h1>
            <p>Select which leagues you want to view</p>
        </div>
        
        <div class="controls">
            <h3>Calendar Selection:</h3>
            
            <div class="calendar-controls">
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal1" class="toggle-checkbox" checked>
                    <label for="cal1" class="toggle-label">FQPL 3 W South Coast Fixtures</label>
                </div>
                
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal2" class="toggle-checkbox" checked>
                    <label for="cal2" class="toggle-label">2025 NPL Men Fixtures</label>
                </div>
                
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal3" class="toggle-checkbox" checked>
                    <label for="cal3" class="toggle-label">2025 NPL Women Fixtures</label>
                </div>
                
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal4" class="toggle-checkbox" checked>
                    <label for="cal4" class="toggle-label">2025 FQPL 3 South Coast Men</label>
                </div>
                
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal5" class="toggle-checkbox" checked>
                    <label for="cal5" class="toggle-label">2025 FQPL 4 South Coast Men</label>
                </div>
                
                <div class="calendar-toggle">
                    <input type="checkbox" id="cal6" class="toggle-checkbox" checked>
                    <label for="cal6" class="toggle-label">Example League</label>
                </div>
            </div>
        </div>
        
        <div class="calendar-container">
            <iframe id="calendarFrame" class="calendar-frame" 
                    src="" 
                    frameborder="0" 
                    scrolling="no">
                <div class="loading">Loading calendar...</div>
            </iframe>
        </div>
    </div>

    <script>
        // Calendar configuration - REPLACE WITH YOUR CALENDAR DETAILS
        const calendars = {
            cal1: {
                id: 'MTk0NzM5ZWMyMjI3Y2U2NTNlOTQ0NDY5MDI5N2EwZDkyNTA2M2FmODRiZTlkNGI2MmRjNGM1ZDA4ZTBkNWZlM0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t',
                color: '%23d50000', // Red
                name: 'FQPL 3 W South Coast Fixtures'
            },
            cal2: {
                id: 'YjUyNzI1ZWQwMTBjZGNkODU1NDY1Y2I0ZThkODI0OTEyMjRhYjlhMWJmZTI1OTZjZDZiNjg0MmU0YzA5OWExN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t',
                color: '%23d81b60', // Pink
                name: '2025 NPL Men Fixtures'
            },
            cal3: {
                id: 'YzJiNDc1ZDJkYTI5MWU3ZDg2YmVmMzM4OGU5M2NjNDIyM2E0MjRmZjZmOTllMmViMDg2YWJhYWVjMDcwNjQwMkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t',
                color: '%23f6bf26', // Orange
                name: '2025 NPL Women Fixtures'
            },
            cal4: {
                id: '6a2b5c2d081c305bf589d97189fd03161ec8b4459d9248c1b35e82b64603f8a3@group.calendar.google.com',
                color: '%23039be5', // Blue
                name: '2025 FQPL 3 South Coast Men'
            },
            cal5: {
                id: '84717aa1a732986947d6a14a7c9958d6c9110e58aa32c520790a71b8097e940c@group.calendar.google.com',
                color: '%2333b679', // Green
                name: '2025 FQPL 4 South Coast Men'
            },
            cal6: {
                id: 'YOUR_NEW_CALENDAR_ID_HERE@group.calendar.google.com',
                color: '%23673ab7', // Purple
                name: 'Example League'
            }
        };
        
        // Track which calendars are currently active (based on checkboxes)
        function getActiveCalendars() {
            const activeCalendars = [];
            const checkboxes = document.querySelectorAll('.toggle-checkbox');
            
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    activeCalendars.push(checkbox.id);
                }
            });
            
            return activeCalendars;
        }
        
        // Base calendar URL settings
        const baseSettings = {
            height: 600,
            wkst: 1, // Week starts on Monday
            ctz: 'Australia%2FBrisbane', // Timezone
            showPrint: 0, // Hide print button
            showCalendars: 1, // Show calendar list
            showTz: 0, // Hide timezone
            showDate: 1, // Show date navigator
            showNav: 1, // Show navigation buttons
            showTitle: 1, // Show calendar title
            mode: 'MONTH' // Display mode
        };
        
        function updateCalendarView() {
            const frame = document.getElementById('calendarFrame');
            const activeCalendars = getActiveCalendars();
            
            // If no calendars selected, show a message
            if (activeCalendars.length === 0) {
                frame.src = 'about:blank';
                frame.style.display = 'none';
                
                // Show message
                let messageDiv = document.getElementById('no-calendars-message');
                if (!messageDiv) {
                    messageDiv = document.createElement('div');
                    messageDiv.id = 'no-calendars-message';
                    messageDiv.className = 'loading';
                    messageDiv.innerHTML = 'Please select at least one calendar to view.';
                    frame.parentNode.insertBefore(messageDiv, frame);
                }
                messageDiv.style.display = 'block';
                return;
            }
            
            // Hide no-calendars message if it exists
            const messageDiv = document.getElementById('no-calendars-message');
            if (messageDiv) {
                messageDiv.style.display = 'none';
            }
            frame.style.display = 'block';
            
            // Build the calendar URL
            const baseUrl = 'https://calendar.google.com/calendar/embed';
            const settingsParams = Object.keys(baseSettings)
                .map(key => `${key}=${baseSettings[key]}`)
                .join('&');
            
            const srcParams = activeCalendars
                .map(id => `src=${calendars[id].id}`)
                .join('&');
            
            const colorParams = activeCalendars
                .map(id => `color=${calendars[id].color}`)
                .join('&');
            
            const fullUrl = `${baseUrl}?${settingsParams}&${srcParams}&${colorParams}`;
            
            // Update the iframe
            frame.src = fullUrl;
        }
        
        // Initialize calendar view when page loads and add event listeners
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('.toggle-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateCalendarView);
            });
            
            // Initial load
            updateCalendarView();
        });
    </script>
</body>
</html>

6 Customize Your Calendar Information

In the code above, you need to replace the calendar information with your own:

Replace these sections:

Title: Change "Football Fixtures Calendar" to your desired title
Calendar IDs: Replace the long calendar ID strings with your own
Calendar Names: Update the label text and names to match your calendars
Colors: Choose different colors if desired
Timezone: Change 'Australia%2FBrisbane' to your timezone if different

Part 4: Customizing the Calendar Display

7 Adjust Calendar Settings

You can customize various display options by modifying the baseSettings object:

// Calendar display options showPrint: 0, // 0 = hide, 1 = show print button showCalendars: 1, // 0 = hide, 1 = show calendar list on left showTz: 0, // 0 = hide, 1 = show timezone selector showDate: 1, // 0 = hide, 1 = show date navigator showNav: 1, // 0 = hide, 1 = show navigation buttons showTitle: 1, // 0 = hide, 1 = show calendar title mode: 'MONTH' // MONTH, WEEK, AGENDA

8 Add More Calendars

To add additional calendars:

Add a new entry to the calendars object in the JavaScript
Add a corresponding toggle button in the HTML controls section
Make sure the IDs match between the JavaScript and HTML

Example - Adding a 4th calendar:

In JavaScript calendars object:

calendar4: { id: 'YOUR_NEW_CALENDAR_ID_HERE@group.calendar.google.com', color: '%23039be5', // Blue name: 'Junior League' }

In HTML controls section:

<div class="calendar-toggle"> <input type="checkbox" id="calendar4" class="toggle-checkbox" checked> <label for="calendar4" class="toggle-label">Junior League</label> </div>

Part 5: Testing and Publishing

9 Test Your Calendar Page

Before publishing:

Save the HTML code as a file (e.g., "calendar.html")
Open the file in your web browser
Test that all toggle buttons work
Verify that calendars show/hide correctly
Check that colors are displaying as expected
Test on mobile devices for responsiveness

10 Upload to Your Website

To make your calendar page public:

Upload the HTML file to your web hosting service
Name it "calendar.html" or "index.html" (for main page)
Test the live URL to ensure it works
Share the URL with your community

Common hosting options:

GitHub Pages: Free hosting for static websites
Netlify: Easy deployment with drag-and-drop
Your existing website: Upload to your current hosting
Google Sites: Simple website builder with custom HTML support

Part 6: Advanced Customization

11 Customize the Styling

You can modify the CSS to match your organization's branding:

Colors: Change the #8b2233 color to your brand color
Fonts: Update the font-family to match your website
Layout: Adjust spacing, sizes, and positioning
Mobile: Modify the responsive breakpoints

12 Add Additional Features

Consider adding these enhancements:

Save Preferences: Remember user's toggle selections
URL Parameters: Allow direct links to specific calendar combinations
View Mode Switcher: Toggle between Month, Week, and Agenda views
Calendar Groups: Create buttons to show/hide related calendar sets

Troubleshooting

Common Issues and Solutions

Calendar Not Loading:

Ensure your calendars are set to public ("Anyone with the link")
Verify calendar IDs are copied correctly (no extra characters)
Check that colors are URL-encoded (% instead of #)
Make sure JavaScript IDs match HTML input IDs exactly

Toggle Buttons Not Working:

Check browser console for JavaScript errors (F12 key)
Ensure checkbox IDs in HTML match keys in JavaScript calendars object
Verify that the updateCalendar function is being called

Mobile Display Issues:

Test the responsive CSS media queries
Adjust iframe height for smaller screens
Consider using a smaller number of calendars on mobile

Colors Not Displaying:

Ensure colors are URL-encoded (%23 instead of #)
Try standard Google Calendar color codes
Check that each calendar has a unique color assigned

Security and Best Practices

Important Considerations:

Only use public calendars for embedding (private calendars won't work)
Regularly review which calendars are public and what information they contain
Consider the privacy implications of making calendar data publicly accessible
Test your page regularly to ensure calendars remain accessible
Keep backup copies of your HTML code

Summary

Congratulations! You have successfully:

✅ Prepared your Google Calendars for public embedding
✅ Extracted calendar IDs and configured colors
✅ Created a multi-calendar webpage with toggle functionality
✅ Customized the display and styling
✅ Published your calendar page to the web

Your visitors can now view multiple calendars in one convenient location and toggle individual calendars on and off as needed. This provides a professional, user-friendly way to display complex scheduling information.

What You've Created:

A responsive webpage that works on desktop and mobile
Toggle buttons for each calendar with visual feedback
Automatic URL generation based on selected calendars
Professional styling that can be customized to your brand
A shareable URL that your community can bookmark

How to: Share your Google Calendar

How to: Share Calendars

Overview

Prerequisites

Part 1: Preparing Your Google Calendars

Part 2: Extracting Calendar Information

Part 4: Customizing the Calendar Display

Part 5: Testing and Publishing

Part 6: Advanced Customization

Troubleshooting

Common Issues and Solutions

Security and Best Practices

Summary

Pages

Home

About

Pricing

Buy License

Contact Us

Help

Technical Support

Terms & Conditions

Privacy Policy

Refund Policy

Contact Us