CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-4unique-id
Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

Fullcalendar 4.x - How to add unique id to events

I am migrating from fullcalendar v3 to v4

Here is my version 3 code

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: [
        {
            id: 'event-1',
            title: 'new evn',
            start: '2019-04-24T08:12:14',
            end: '2019-04-27T22:20:20',
            className: "bg-danger",
            description: 'event-1'
        },
        {
            id: 'event-1',
            title: 'All Day Event',
            start: '2019-02-01T14:30:00',
            end: '2019-02-02',
            className: "bg-danger",
            description: 'event-1'
        },            
    ],
    editable: true,
    eventLimit: true,
});

Here is my version 4 code 

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
        header: {
            left: 'prev, title, next',
            center: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
            right: 'add_event'
        },
        timeZone: 'UTC',
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        selectMirror: true,
        events: [
          {
            id: 'ev-1',
            title: 'All Day Event',
            start: '2019-06-01',
          },
          {
            id: 'ev-2',
            title: 'Long Event',
            start: '2019-06-07',
            end: '2019-06-10'
          },
          {
            id: 'ev-3',
            groupId: 999,
            title: 'Repeating Event',
            start: '2019-06-09T16:00:00'
          },
          {
            id: 'ev-3-1',
            groupId: 999,
            title: 'Repeating Event',
            start: '2019-06-16T16:00:00'
          }

    });

calendar.render();
});

Does not work in version 4

I have also checked in docs in Event Model heading

_id ----- _id can no longer be specified.

id ------ Was previously used to group related events together, so that they could be dragged/resized together. That is now done with groupId. The id properties should now be unique across all events in a calendar!

As ADyson asked what problem I am facing

Here is the update

In version 3 the id will show if you open the inspect > elements just like the image below and as of version 4 it did not show ( even in your example )

Version 3

enter image description here

Version 4

enter image description here

Upvotes: 0

Views: 2647

Answers (2)

William Jorgensen
William Jorgensen

Reputation: 31

in the newest version, at least in the vue component the hook seems to be eventDidMount rather than eventRender.

Upvotes: 1

Paulitos Germanos
Paulitos Germanos

Reputation: 11

You can add custom id to element on eventRender.

//FullCalendar v4
eventRender: function (info) {
    $(info.el).attr('data-custom-id', info.event.id);
},

Upvotes: 1

Related Questions