Fullcalendar 4.x - 如何为事件添加唯一 ID答案

【问题标题】：Fullcalendar 4.x - How to add unique id to eventsFullcalendar 4.x - 如何为事件添加唯一 ID
【发布时间】：2019-07-31 10:05:04
【问题描述】：

我正在从 fullcalendar v3 迁移到 v4

这是我的版本 3 代码

$('#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,
});

这是我的版本 4 代码

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();
});

在版本 4 中不起作用

我还在事件模型标题中签入docs

_id ----- _id 无法再指定。

id ------ 以前用于将相关事件组合在一起，以便它们可以一起拖动/调整大小。现在使用 groupId 完成。现在，id 属性在日历中的所有事件中应该是唯一的！

正如ADyson问我面临什么问题

这里是更新

在版本 3 中，id 将显示，如果您打开 inspect > 元素，如下图所示，而在版本 4 中它没有显示（即使在您的示例中）

第 3 版

第 4 版

【问题讨论】：

“不工作”到底是什么意思？您的版本 4 代码出了什么问题？我做了演示，据我所知，它解析了您的事件的 id 属性，您可以访问它们（单击时请参阅 console.log() 命令）：codepen.io/ADyson82/pen/LwyvKg。对项目进行分组似乎也可以正常工作。附言关于你的最后一段，id 与_id 不同，我看不出这与你的代码有什么关系？你能澄清你的确切问题吗？
@ADyson 我已经用截图更新了我的问题。希望这可能会有所帮助
好的，谢谢。不过，我无法在版本 3 中重现该输出。演示：jsfiddle.net/fxtz9c6L/1（使用上面的示例事件数据），典型的事件 HTML（月视图）如下所示：<td class="fc-event-container" colspan="4"><a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end bg-danger fc-draggable"><div class="fc-content"... 等。不包括 id。它来自哪个版本的 fullCalendar？您是否使用了一些自定义代码将 ID 添加到元素？你能在 JSFiddle 中做一个可重现的例子吗？据我所知，这不是标准行为。
另外...为什么你需要身份证？你用它做什么？您不能只从相关事件对象中获取 ID 吗？目前尚不清楚实际用例是什么。
@ADyson 我将为您提供示例。使用 id 的原因是为了引导 4 工具提示。

标签： javascript fullcalendar fullcalendar-4 unique-id

【解决方案1】：

您可以在eventRender 上为元素添加自定义ID。

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

【讨论】：

嗨@Paulitos，我的要求是将id添加到fc-event类以进行外部事件点击，我使用了$(.fc-content).attr("id", "event-" + info.event.id);在 eventrender 中，但它不正确，你能建议我吗？
嗨@Prabha，您必须向元素添加数据属性，例如。 'data-event-id' 然后传递 id。你能试试吗：$(info.el).attr("event-id", info.event.id);.
是的，非常感谢，对答案投了赞成票，在看到您的答案块后，我有了一个想法并且可以满足我的要求，我可以通过 2 行实现外部 eventclick： info.el.setAttribute(" idgiven",info.event.id); info.el.getElementsByClassName("fc-content")[0].setAttribute("id", info.event.id)，请看stackoverflow.com/questions/62541789/…