0

We are unable to handle the eventClick when an event is clicked from pop over list.

This is codepen url to for the POC that we did. It is working fine here. https://codepen.io/shubhamsapkal/pen/JjLoEjv?editors=001

following is our LWC implementation.

HTML Code :

<template>
   <div style="background:#ffffff;" class="slds-grid" >
        <div class="calendar" lwc:dom="manual"></div>
    </div>
</template>

JS code:

import { LightningElement, api, track} from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import cal from '@salesforce/resourceUrl/fullcalendarmarkslott';
import {loadScript, loadStyle} from "lightning/platformResourceLoader";
import fullCalendar from "@salesforce/resourceUrl/fullcalendarmarkslott";
import getEventsNearbyDynamic from "@salesforce/apex/FullCalendarController.getEventsNearbyDynamic";
import { NavigationMixin } from 'lightning/navigation';
//global variables
var objectName;
var startField;
var endField;
var colorField;
var additionalFilter;
var allDayField;
var titleField;


export default class Lwccalendar extends LightningElement {
    calendar;
  fullCalendarInitialized = false;
  
  @api titleField;
  @api objectName;
  @api startField;
  @api endField;
  @api colorField;
  @api additionalFilter;
  @api aspectRatio;
  @api allDayField;
  @api height;

  @api weekView;
  @api dayView;
  @api listView;

  @track calendarLabel;

  
  connectedCallback() {
    this.addEventListener('fcheventclick', this.handleEventClick.bind(this));
  }

  renderedCallback() {
    if (this.fullCalendarInitialized) {
      return;
    }
    this.fullCalendarInitialized = true;

    //set global vars
    objectName = this.objectName;
    startField = this.startField;
    endField = this.endField;
    colorField = this.colorField;
    additionalFilter = this.additionalFilter;
    allDayField = this.allDayField;
    titleField = this.titleField;

    Promise.all([
      loadScript(this, fullCalendar + "/packages/core/main.js"),
      loadStyle(this, fullCalendar + "/packages/core/main.css")
    ])
      .then(() => {
        //got to load core first, then plugins
        Promise.all([
          loadScript(this, fullCalendar + "/packages/daygrid/main.js"),
          loadStyle(this, fullCalendar + "/packages/daygrid/main.css"),
          loadScript(this, fullCalendar + "/packages/list/main.js"),
          loadStyle(this, fullCalendar + "/packages/list/main.css"),
          loadScript(this, fullCalendar + "/packages/timegrid/main.js"),
          loadStyle(this, fullCalendar + "/packages/timegrid/main.css"),
          loadScript(this, fullCalendar + "/packages/interaction/main.js"),
          loadScript(this, fullCalendar + "/packages/moment/main.js"),
          loadScript(this, fullCalendar + "/packages/moment-timezone/main.js"),
        ]).then(() => {
          console.log("init");
          this.init();
        });
      })
      .catch(error => {
        console.log("error", error);
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error loading FullCalendar",
            //message: error.message,
            variant: "error"
          })
        );
      });
  }

  init() {
    var calendarEl = this.template.querySelector(".calendar");
    // eslint-disable-next-line no-undef
    var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],
          timeZone: 'UTC',
          eventLimit: true, // allow "more" link when too many events
          dayMaxEvents: true,
          eventClick: function(info) {
            var eventObj = info.event;

            if (eventObj.url) {
              alert(
                'Clicked ' + eventObj.title + '.\n' +
                'Will open ' + eventObj.url + ' in a new tab'
              );

              window.open(eventObj.url);

              info.jsEvent.preventDefault(); // prevents browser from following link in current tab.
            } else {
              alert('Clicked ' + eventObj.title);
            }
          },
          events: [
          {
            title: 'All Day Event',
            description: 'description for All Day Event description for All Day Event',
            start: '2022-06-01'
          },
          {
            title: 'Long Event',
            description: 'description for Long Event description for Long Event',
            start: '2022-06-07',
            end: '2022-06-10'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            description: 'description for Repeating Event description for Repeating Event',
            start: '2022-06-09T16:00:00'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            description: 'description for Repeating Event description for Repeating Event',
            start: '2022-06-16T16:00:00'
          },
          {
            title: 'Conference',
            description: 'description for Conference description for Repeating Event',
            start: '2022-06-11',
            end: '2022-06-13'
          },
          {
            title: 'Meeting',
            description: 'description for Meeting description for Repeating Event',
            start: '2022-06-12T10:30:00',
            end: '2022-06-12T12:30:00'
          },
          {
            title: 'Meeting',
            description: 'description for Meeting description for Repeating Event',
            start: '2022-06-12T10:30:00',
            end: '2022-06-12T12:30:00'
          },
          {
            title: 'Meeting',
            description: 'description for Meeting description for Repeating Event',
            start: '2022-06-12T10:30:00',
            end: '2022-06-12T12:30:00'
          },
          {
            title: 'Meeting',
            description: 'description for Meeting description for Repeating Event',
            start: '2022-06-12T10:30:00',
            end: '2022-06-12T12:30:00'
          },
          {
            title: 'Lunch',
            description: 'description for Lunch description for Repeating Event',
            start: '2022-06-12T12:00:00'
          },
          {
            title: 'Meeting',
            description: 'description for Meeting description for Repeating Event',
            start: '2022-06-12T14:30:00'
          },
          {
            title: 'Click for Google',
            description: 'description for Click for Google description for Repeating Event',
            url: 'http://google.com/',
            start: '2022-06-12'
          },
          {
            title: 'Birthday Party',
            description: 'description for Birthday Party description for Repeating Event',
            start: '2022-06-13T07:00:00'
          },
          {
            title: 'Click for Google',
            description: 'description for Click for Google description for Repeating Event',
            url: 'http://google.com/',
            start: '2022-06-28'
          }
        ]

    });
  calendar.render();
  }


  handleEventClick(event) {
    alert('handleEventClick');
  }

}

1 Answer 1

0

Based on the LWC-Docs you should use this.template.addEventListener instead of this.addEventListener because the Event you are trying to catch is contained inside your LWC-Component. You should also change this.handleEventClick.bind(this) to this.handleEventClick because using bind() is considered an anti-Pattern.

Source and further reading: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_handling

3
  • Hi Florian, Thanks for the quick response. I changed the connectedCallback to this. but still it did not work. connectedCallback() { this.template.addEventListener('fceventclick', this.handleEventClick); } Thanks in advance. Commented Jun 30, 2022 at 11:39
  • Hi @Florian, I have added my lwc here. -> Full Calendar. Steps to reproduce : 1) Happy use case -> Click on 'Click for Google' on 12th June. The window will redirect as expected. 2) Critical use case -> Click on '+6 more' on 12th June. and now click on 'Click for Google' event. Modal will close and window will not redirect(should be redirected). Commented Jun 30, 2022 at 12:59
  • This is a bit of a wild guess but have you tried removing the alert() calls and the window.open() calls in the eventClick: function(info) { ... and replacing it with a console.log to see if the event handler can be called ? As far as I know the alert() function and window. are not accessible within LWC's which could lead to an error not being displayed.
    – Florian
    Commented Jun 30, 2022 at 15:49

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .