Access to a Google Calendar

Elements
1

I have been using Google Calendars in Classic using DateSnap from Yabdab. This works quite well but I want to replicate the functionality in Elements.

I used AI to provide some code which works to a point. It references script.js which I inserted into the Javascript section.

I set up the API in Google and I am using the key.

I get an error ‘Error fetching events: undefined‘.

Has anyone had experience in setting up a calendar in Elements? Ideally I would like to replicate what DateSnap does as it allows for a list view for a month, a day and week view.

You can see what I mean at https://www.volksenthusiasts.org.au

The part of the code that displays the error is:

catch (error) {

    eventsDiv.innerHTML = 'Error fetching events: ' + error.message;

}
2

if you can post the code, or even better the Elements project, we can take a look.

You can share your project with us for free via Elements Cloud :slight_smile:

4

I uploaded the test project. elementsapp://downloadDocument/4Z2XeId9ZNqg

5

theres another post about this have look to see if it helps. Google.com/calendar - #4 by elementsbot

6

Interesting. I was trying it using an API key. I will have a look at that too.

1 Like
7

Just remember scanning your title in the forum

I got a lifetime license of tidy cal for $40

It works great in elements - got it for a lady…

Got an email that it syncs with Google Calendar also…

Don’t know if it would work for you but my client is very happy :smiley:

IMG_5723
IMG_57231320×2868 1.21 MB

IMG_5722
IMG_57221320×2868 1.18 MB

8

Hi @martef86

I found a couple of issues with your Custom Component.

  1. The template is including some HTML elements that should be in the <head> area of the page, you can fix this with an @portal(headEnd)statement.
  2. The Google API is returning an 403 Permission Denied response, with the message Requests from referer http://127.0.0.1 are blocked.

The error means that your API key is not setup to allow requests from your local machine, you might be able to fix this in the settings on your Google Account. Otherwise it should work when publishing the site to your domain.

Here’s the updated template code for your custom component, note the use of the @portal at the top:

@portal(headEnd)
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #controls { margin-bottom: 20px; }
        #events { border: 1px solid #ccc; padding: 10px; }
        .event { margin-bottom: 10px; }
        .description { font-style: italic; color: #555; }
    </style>
    <script src="https://apis.google.com/js/api.js"></script>
@endportal

<div id="{{id}}" class="p-sm text-lg text-center text-brand-500">
   Calendar
</div>
<div id="controls">
        <label for="monthFilter">Filter by Month: </label>
        <select id="monthFilter" onchange="loadEvents()">
            <option value="0">All Months</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <label>
            <input type="checkbox" id="showDescriptions" onclick="loadEvents()">
            Show Descriptions
        </label>
</div>

<div id="events"></div>

Hope this helps, do let me know if you manage to get this working :slight_smile:

9

Thank you for that. I am still getting an undefined error. I will investigate further to see if I can find the reason for that. I also took off the restriction for the website so I can test it without having to upload it each time.

10

I have it working now. I had used the wrong CALENDAR_ID (which worked in the Classic version).

Thanks for your assistance. Much appreciated.

1 Like