Simple Scheduler API & WebComponent with Deno Deploy

listopad 30, 2024 worotyns

calendar deno deploy dev scheduler side-project tools

I’m excited to introduce a simple, yet effective Scheduler application built using Deno Deploy. It provides both an API and a WebComponent that lets you easily create and manage scheduling time slots. This could be useful for managing hours of availability or appointments.

How it Works

The scheduler application allows you to create a calendar bucket, configure available time slots, and provide a straightforward interface for both clients and admins.

1. Create Your Calendar Bucket

To begin, you’ll need to create a calendar bucket via a simple POST request. This will return a unique calendar ID and an authorization key.

curl -X POST https://schedule-calendar.deno.dev -H "Content-type: application/json" -d "{}"

Response:

{
  "calendarId": "dc60c534-5f49-4a02-ba18-e1a3dd0f8e36",
  "authorizationKey": "YOUR_KEY_HERE"
}

2. Embed the Scheduler in Your Website

Now, you can integrate the calendar scheduler into your website by adding a script to the head section of your HTML:

<script src="https://schedule-calendar.deno.dev/calendar.js"></script>

Once the script is included, you will be able to use the <calendar-appointment-scheduler> WebComponent.

3. Client View

The client view is a simple, interactive calendar that shows available time slots. Here’s an example of how you would embed it in your HTML:

<calendar-appointment-scheduler
  id="client"
  start="14"
  end="22"
  calendar-id="dc60c534-5f49-4a02-ba18-e1a3dd0f8e36"
></calendar-appointment-scheduler>

4. Demo

Here’s a demo page that includes both the client and admin views. You can see them interact in real-time.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendar Grid</title>
  </head>
  <body>
    <calendar-appointment-scheduler
      id="client"
      start="14"
      end="22"
      calendar-id="dc60c534-5f49-4a02-ba18-e1a3dd0f8e36"
    ></calendar-appointment-scheduler>
    <calendar-appointment-scheduler
      id="admin"
      start="14"
      end="22"
      calendar-id="dc60c534-5f49-4a02-ba18-e1a3dd0f8e36"
    ></calendar-appointment-scheduler>
    <script src="https://schedule-calendar.deno.dev/calendar.js"></script>
    <script>
      // Sync client and admin views by setting the "key" attribute
      const client = document.getElementById("client");
      const admin = document.getElementById("admin");
      admin.setAttribute("key", "YOUR_KEY_HERE");
      
      // Sync states between admin and client
      const adminRefresh = admin.refresh.bind(admin);
      const clientRefresh = client.refresh.bind(client);

      const refresh = async () => {
        await adminRefresh();
        await clientRefresh();
      }

      admin.refresh = async () => {
        await refresh();
      };

      client.refresh = async () => {
        await refresh();
      };
    </script>
  </body>
</html>

Key Features:

API: Easily create and configure calendars with a simple API endpoint.
WebComponent: Integrates seamlessly with your website, providing an interactive calendar view for both clients and admins.
Synchronization: The admin and client views stay in sync, so any changes made by the admin will be reflected in real-time for the client.

Conclusion

This Scheduler application is a simple, flexible tool for managing time slots. It allows you to integrate a scheduling feature into your website quickly with minimal setup. You can start using it today by simply creating a calendar bucket and embedding the WebComponent on your site. Enjoy hassle-free scheduling!

Source

If you want to get source of this service or deploy in your way in your deno deploy account feel free to contact.