Custom Full Calendar need event click action

Need help
1

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.

image
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?

2

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?

3

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.

4

Hi,

How did you implement your own full calendar?

Thanks in advance :slight_smile: :computer:

5

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.

6

Ohh, thanks.

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

7

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:

image
image1127×784 18.4 KB

8

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