Javascript Fullcalendar 4.x-如何向事件添加唯一id

我正在从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中不起作用

我还签入了事件模型标题

\u id-----\u id无法再指定。

id------以前用于将相关事件分组在一起，以便将它们拖到一起/调整大小。现在使用groupId就可以做到这一点。id属性现在应该在日历中的所有事件中都是唯一的

当ADyson问我面临什么问题时

这是最新消息

在版本3中，如果打开inspect>元素，则会显示

id

，就像下面的图像一样，从版本4开始，它就不会显示（即使在您的示例中）

第3版

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版

---

您可以向上的元素添加自定义id

---

你说的“不工作”到底是什么意思？你的版本4代码出了什么问题？我做了一个演示，据我所知，它解析事件的

id

属性，您可以访问它们（单击时请参阅console.log（）命令）：。对项目进行分组似乎也很有效。另外，关于你的最后一段，

id

与

\u id

不同，我看不出这与你的代码有什么关系？你能澄清你的具体问题吗？@ADyson我已经用截图更新了我的问题。希望这能帮上忙谢谢。但是，我无法在版本3中复制该输出。Demo：（使用上面的示例事件数据），一个典型的事件HTML（在月视图中）如下所示：

还有…为什么需要ID？你用它干什么？你能不能不直接从相关的事件对象中获取ID？不清楚实际的用例是什么。@ADyson我将向您提供示例。使用id的原因是用于bootstrap 4工具提示。Hi@Paulitos，我的要求是将id添加到fc事件类以进行外部事件单击，我使用了行$（.fc content.attr（“id”，“event-”+info.event.id）；在eventrender中，但它不正确，请您建议我。您好@Prabha，您必须向元素添加数据属性，例如“数据事件id”，然后传递id。请尝试：
$（info.el）.attr（“事件id”，info.event.id）
。是的，非常感谢，我对答案投了赞成票，在看到你的答案块后，我有了一个想法，可以满足我的要求，我可以实现外部事件单击2行：info.el.setAttribute（“idgiven”，info.event.id）；info.el.getElementsByClassName（“fc内容”）[0].setAttribute（“id”，info.event.id），请查看