javascriptfullcalendarfullcalendar-5

How to add a href link to an event

I want to add a link to the event that takes to a detail page. something like /event_details.php?id=xxx. How to pass the event 'id' and where to build the href link?

Solution

  • You can put the URL ready-made into the event's url property when you give it to fullCalendar. As the event parsing documentation says, this property can contain:

    A URL that will be visited when this event is clicked by the user.

    Since your server-side (PHP?) code hopefully already knows the ID of the event when it's generating the event data to provide to the calendar, hopefully this should be easy to do.

    Sample event JSON including URL parameter:

    {
  "id": 123,
  "title": "Example event",
  "start": "2023-02-28",
  "url": "/event_details.php?id=123"
}

    If for any reason that's not possible for some reason, the next best thing is probably to use the eventDataTransform callback to set the URL property:

    eventDataTransform: function(eventData)
{
  eventData.url = "/event_details.php?id=" + eventData.id;
  return eventData;
}