如何显示带有链接的资源标题？

Question

I'm developing a web system using FullCalendar.我正在使用 FullCalendar 开发 web 系统。

I'm trying to customize that resources title with link as like using eventClick, but that code I customize doesn't work as I expected.我正在尝试使用链接自定义该资源标题，就像使用 eventClick 一样，但是我自定义的代码无法按预期工作。

could someone please help to solve this case?有人可以帮忙解决这个案子吗？

Thank you in advance.先感谢您。

the original code原始代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 40px auto;
        }
    </style>
    <link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet'/>
    <link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet'/>
    <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet'/>
    <script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['resourceTimeline'],
                defaultView: 'resourceTimelineDay',
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
                },
                resourceLabelText: 'Rooms',
                resources: [
                    {id: 'a', 
                     title: 'room1', 
                     url: 'http://google.com/'
                    },
                ],
            });
            calendar.render();
        });
    </script>

</head>
<body>
<div id='calendar'></div>
</body>

</html>

the code I added referring eventClick我添加引用 eventClick 的代码

resourceClick: function (info) {
            info.jsResource.preventDefault();

            if (info.resource.url) {
                window.open(info.resource.url);
            }
        },

I also tried with the resourceRender like below but it doesn't work...我也尝试过使用下面的资源渲染，但它不起作用......

resources: [
    {
     id: 'a',
     title: '<a href="http://google.com/">room1</a>',
    },
],

resourceRender: function (renderInfo,element) {
    element.find('span.fc-title').html(element.find('span.fc-title').text());
}

my develop enviroment我的开发环境

HTML 5 HTML 5
FullCalendar:v4 FullCalendar:v4

Answer 1

This is my solution to the problem:这是我对问题的解决方案：

resourceRender: function (resourceObj, $th) {
    $th.html(
        $('<a href="http://google.com/">' + resourceObj.title + '</a>')
    );
},

如何显示带有链接的资源标题？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-28 07:21:30

如何显示带有链接的资源标题？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-28 07:21:30

解决方案1
1 已采纳 2021-05-28 07:21:30