2016-10-06 2 views
0

Einige meiner Vollkalender-Ereignisse haben Links. Die Links verweisen entweder auf öffentliche Webseiten, PDF-Dokumente oder Webseiten mit eingeschränktem Zugriff.Vollkalender Ereignis URL - Klasse hinzufügen, wenn URL enthält

Ich möchte eine Klasse hinzufügen, um die Links zu formatieren, um ein Symbol basierend auf der URL-Zeichenfolge hinzuzufügen.
Wenn die URL enthält:

  • "pdf" AddClass "fc-pdf"
  • "eingeschränkt" AddClass "fc-lock"

ich es annehmen, mit und eventRender sein sollte .. Aber ich habe Probleme, die richtige Syntax zu finden. Kann mir jemand dabei helfen?

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

Antwort

2

So wie ich war an die Arbeit bekam durch Zugabe denken, einen Typ zu den Ereignissen, nur weil ich es leichter wäre, als mit Regex zu tun, die nicht immer funktionieren könnte. Ereignisse benötigen also keinen Typ, aber sie können einen Typ haben pdf, restricted oder was auch immer Sie brauchen. In eventRender habe ich folgende:

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

Eine Überprüfung, ob der Typ vorgesehen ist oder nicht, und dann, wenn Anweisungen zum Hinzufügen der Klasse basierend auf der Art. Ich musste auch eine kleine Änderung am CSS-Selektor vornehmen, indem ich a.fc-lock zu .fc-lock a änderte, um es richtig anzeigen zu lassen. Hier ist die JS Fiddle zeigt dies.

+0

Vielen Dank @ Ryan89 Das tut, was ich brauche !! – lbriquet

Verwandte Themen