CODEWITHSUNDEEP
fullcalendaraddclass
lbriquet
lbriquet

Reputation: 541

Fullcalendar event url - add class if url contains

Some of my Fullcalendar events have links. The links point to either public webpages, pdf documents or webpages which are restricted access.

I would like to add a class to format the links to add an icon, based on url string.
If the url contains:

I assume it should be with and eventRender... but I'm having trouble find the right syntax. Can someone help me with this?

http://jsfiddle.net/lbriquet/oez9Ltym/

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

Upvotes: 1

Views: 940

Answers (1)

Ryan89
Ryan89

Reputation: 1216

The way I got this to work was by adding a type to the events simply because I think it would be easier than dealing with regex that might not always work. So events don't need a type but they can have a type pdf, restricted or whatever else you need. In eventRender I added the following:

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

A check to see if the type is provided or not and then if statements for adding the class based on the type. I also had to make a small change to the css selector, changing a.fc-lock to .fc-lock a to allow it to display properly. Here is the JS Fiddle showing this.

Upvotes: 3

Related Questions