Portfolio
Google Calendar Integration

Development

Google Calendar Integration

google calendar integration mobile phone mockup

Appointment Builder

Easily add a booking system to your project with tools your already have.

Google Apps Script

Creates the connection to your Google Calendar.

Vanilla JavaScript

Uses a JS class, no external libraries are needed.

PHP

Acts as the middleman for your project and Google Apps Script.
Light Mode
01
Google calendar integration dark and light mode
02
Dark Mode

It's Desktop Friendly

Works for your desktop and mobile developments.
Google calendar integration in dark mode on laptop

Look Under the Hood

The JavaScript class does all the heavy lifting.
<script>
   new GoogleCalendar( {
        calendar: {
            id: "ENTER GOOGLE CALENDAR ID",
            webAppURL: "ENTER WEB APP URL",
            from: 9,
            to: 17,
            duration: 30,
            disableWeekends: true,
            delay: 60
        },
        darkMode: true
    } );
</script>

Google Calendar ID

For the ID property, add your Google Calendar.

Web App URL

The Web App URL is the link to your Google Apps Script.

Event Settings

Edit the remaining settings to best fit your booking needs.

Thank You