Question

我的一些Fullcalendar活动有链接。这些链接指向受限制访问的公共网页，pdf文档或网页。

我想添加一个类，根据url字符串格式化链接以添加图标如果网址包含：

＆＃34; PDF＆＃34; addclass＆＃34; fc-pdf＆＃34;
＆＃34;限制＆＃34; addclass＆＃34; fc-lock＆＃34;

我认为应该使用和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');
    }
  }
}

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

Fullcalendar事件网址 - 如果网址包含，则添加类

1 个答案: