Custom Full Calendar need event click action

mbeatring44 · 2021-01-07T23:34:04.593Z

Hey everyone,

I implemented my own custom full calendar. It’s just a basic implementation, but I’m stuck on adding an event click. Trying to just have it open a url.

image1316×941 23.4 KB

I’ve tried initiating the JavaScript on page load, as well as trying it inline in my html element with no luck.

Anyone familiar, or any ideas?

nfisher · 2021-01-08T00:42:56.678Z

Congrats, it looks great!

can you explain what you intended to do on evet click? Can you not just run a workflow that navigates to a page/ opens a popup?

mbeatring44 · 2021-01-08T01:01:52.571Z

Thanks!

Here’s the docs:

https://fullcalendar.io/docs/eventClick

I’m just having trouble getting the on-click event to fire. The items in my calendar will have a link associated with them, and I want to navigate to that link when an event is clicked on the cal.

hacker · 2021-01-08T15:56:10.695Z

Hi,

How did you implement your own full calendar?

Thanks in advance

mbeatring44 · 2021-01-08T17:21:45.653Z

Hi @hacker,

Here’s the docs:

FullCalendar - JavaScript Event Calendar

I just added an HTML element to the page, with the code below:

<html>
<head>
<meta charset='utf-8' />

  <style>

    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 1200px;
      margin: 40px auto;
    }

  </style>



  <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css' rel='stylesheet' />
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js'></script>

  
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: 'Current date/time:formatted as 2021-01-08',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      events: [
        Search for Events:format as text
      ]
    });

    calendar.render();
  });

</script>

</head>
  <div id='calendar'></div>
</body>

</html>

The formatted text looks like this:

{
title: 'This Item's Event Title',
start: 'This Item's Start Date:formatted as 2021-01-08T17:20:13:559Z'
}

Delimiter is “,” without quotes.

hacker · 2021-01-08T17:41:24.315Z

Ohh, thanks.

Why did you made a custom calendar and not use the Bubble plugin?

mbeatring44 · 2021-01-08T17:45:35.656Z

Bubble’s Full Calendar plugin doesn’t have any customizability. And it’s on an old version of Full Calendar.

I wanted something more clean looking, and something I could customize to my liking.

Bubble’s look:

image1127×784 18.4 KB

system · 2021-03-18T23:34:08.251Z

This topic was automatically closed after 70 days. New replies are no longer allowed.