全日历事件 url - 如果 url 包含，则添加 class

Question

我的一些全日历活动有链接。这些链接指向 public 网页、pdf 文档或限制访问的网页。

我想添加一个 class 来格式化链接以添加图标，基于 url 字符串。
如果 url 包含：

"pdf" 添加class "fc-pdf"
"restricted" 添加class "fc-lock"

我认为它应该与 eventRender 一起使用...但我找不到正确的语法。有人可以帮我解决这个问题吗？

    $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'listDay,listWeek,month'
          },
          views: {
            listDay: {
              buttonText: 'list day'
            },
            listWeek: {
              buttonText: 'list week'
            }
          },
          defaultView: 'listDay',
          defaultDate: '2016-09-12',
          navLinks: true, // can click day/week names to navigate views
          events: [{
            title: 'Conference (website)',
            start: '2016-09-11',
            end: '2016-09-13',
            url: "https://www.ted.com/talks"
          }, {
            title: 'Meeting (download document)',
            start: '2016-09-12T10:30:00',
            end: '2016-09-12T12:30:00',
            url: "http://storage.ted.com/tedx/manuals/tedx_speaker_guide.pdf"
          }, {
            title: 'Lunch',
            start: '2016-09-12T12:00:00'
          }, {
            title: 'Meeting (members only)',
            start: '2016-09-12T14:30:00',
            url: "http://www.dictionary.com/browse/restricted"
          }, {
            title: 'Happy Hour',
            start: '2016-09-12T17:30:00'
          }, {
            title: 'Dinner',
            start: '2016-09-12T20:00:00'
          }],
        eventRender: function eventRender(event, element, view) {
        }
        });

Answer 1

我实现它的方法是向事件添加类型，因为我认为这比处理可能并不总是有效的正则表达式更容易。因此事件不需要类型，但它们可以具有类型 pdf、restricted 或您需要的任何其他类型。在 eventRender 中，我添加了以下内容：

eventRender: function eventRender(event, element, view) {
  if(typeof event.type !== 'undefined') {
    if(event.type === 'pdf') {
        element.addClass('fc-pdf');
    } else if(event.type === 'restricted') {
        element.addClass('fc-lock');
    }
  }
}

检查是否提供了类型，然后根据类型添加 class 的 if 语句。我还必须对 css 选择器做一个小改动，将 a.fc-lock 更改为 .fc-lock a 以使其正确显示。这是显示此内容的 JS Fiddle。

全日历事件 url - 如果 url 包含，则添加 class

Fullcalendar event url - add class if url contains

fullcalendar

addclass