Display more Text in fullcalendar

Question

I am looking for a solution to display more information in event      For example in the DayView you see a event from 06 00 to 10 00   I want to display a additional description in this event  not only the time and the title

User · Answer

With the modification of a single line you could alter the fullcalendar.js script to allow a line break and put multiple information on the same line.

In FullCalendar.js on line ~3922 find htmlEscape(s) function and add .replace(/<br\s?/?>/g, '
') to the end of it.

function htmlEscape(s) {
    return s.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#039;')
    .replace(/"/g, '&quot;')
    .replace(/\n/g, '<br />')
    .replace(/&lt;br\s?\/?&gt;/g, '<br />');
}

This will allow you to have multiple lines for the title, separating the information. Example replace the event.title with title: 'All Day Event' + '<br />' + 'Other Description'

User · Answer

I needed the ability to display quite a bit of info  without a tooltip  and it turned out quite nice  I used FullCalendars title prop to store all my HTML  The only thing you have to do to ensure it works after render is to parse the title fields HTML       data  ismy JSON object    each data  function index  value      value title     lt div class  title  gt     value title     lt  div gt      value title      lt div class  deets  gt  lt span class  time  gt  lt img src   themes custom bp images clock svg  gt     value start time     -     value end time     lt  span gt      value title      lt span class  location  gt  lt img src   themes custom bp images pin svg  gt     value location     lt  span gt  lt  div gt      value title      lt div class  learn-more  gt LEARN MORE  lt span class  arrow  gt  lt  span gt  lt  span gt            Initialize the calendar object  calendar   new FullCalendar Calendar cal      events  data    plugins    dayGrid      eventRender  function event           This is required to parse the HTML      const title     event el  find   fc-title        title html title text             calendar render      I would have used template literals  but had to support IE11

User · Answer

as a possible solution  Add some extra more content to the title  Overwrite this css style     fc-day-grid-event  fc-content      white-space  normal

User · Answer

Here s my code for popup using qTip2 and eventMouseover     document  ready function            Setup FullCalendar        Setup FullCalendar      function             var date   new Date            var d   date getDate            var m   date getMonth            var y   date getFullYear            var day date toLocaleDateString              var tooltip       lt div  gt    qtip               id   fullcalendar               prerender  true              content                    text                       title                        button  true                                              position                    my   bottom center                   at   top center                   target   mouse                   viewport      fullcalendar                    adjust                        mouse  false                      scroll  false                                              show  false              hide  false              style   qtip-light             qtip  api                 fullcalendar   fullCalendar               editable  true               disableDragging  true              height  600              header                    left   title                   center                      right   today prev next                              dayClick  function     tooltip hide                  eventResizeStart  function     tooltip hide                  eventDragStart  function     tooltip hide                  viewDisplay  function     tooltip hide                  events                                          title   All Day Event                       start  new Date 2014  3  1                                                           title   Long Event                       start  new Date y  m  d-5                       end  new Date y  m  d-2                                                           id  999                      title   Repeating Event                       start  new Date y  m  d 4  16  0                       allDay  false                                                          title   Meeting                       start  new Date y  m  d  10  30                       allDay  false                                                          title   Spring Membership Conference                       start  new Date y  m  d 6  7 0                       end  new Date y  m  d 6  13 0                       allDay  false                      description  save the date  Join us for our Annual Membership Conference  Breakfast will be served beginning at 7 30 a m  Featuring The EFEC Belief System  amp  Our Pledge lunch                                                           title   Birthday Party                       start  new Date y  m  d 1  19  0                       end  new Date y  m  d 1  22  30                       allDay  false                                              eventMouseover   function data  event  view                    var content                      lt p gt   data description    lt p gt                      lt h3 gt   data title   lt  h3 gt                            lt p gt  lt b gt Start  lt  b gt    data start   lt br   gt                           data end  amp  amp    lt p gt  lt b gt End  lt  b gt    data end   lt  p gt                            tooltip set                        content text   content                                     reposition event  show event

User · Answer

For some reason  I have to use   element find   fc-event-inner   empty      to make it work  i guess i m in day view

User · Answer

This code can help you      document  ready function              calendar   fullCalendar            events                                                         id  1                       title   First Event                        start                            end                            description   first description                                                              id  2                       title   Second Event                        start                            end                            description   second description                                            eventRender  function event  element                 element find   fc-title   append   lt br  gt     event description

User · Answer

Well i found a simpler solution for me   I changed fullcalendar css  and added the following   float  left  clear  none  margin-right  10px    Resulting in     fc-event-time   fc-event-title       padding  0 1px      float  left      clear  none      margin-right  10px      now it only wraps when it needs to

User · Answer

I would recommend the use of the eventAfterRender callback instead of eventRender  Indeed if you use eventRender you might jeopardize the correct display of the events  in coffee script  it something like        calendar   fullCalendar     eventAfterRender   event  element  - gt          element find   fc-title   after   lt span gt   event description   lt  span gt

User · Answer

I personally use a tooltip to display additional information  so when someone hovers over the event they can view a longer descriptions  This example uses  qTip  but any tooltip implementation would work     document  ready function         var date   new Date        var d   date getDate        var m   date getMonth        var y   date getFullYear            calendar   fullCalendar           header                left   prev  next today               center   title               right   month  basicWeek  basicDay                       events   Calendar asmx EventList             defaultView   dayView           events                          title   All Day Event               start  new Date y  m  1               description   long description               id  1                                  title   Long Event               start  new Date y  m  d - 5               end  new Date y  m  1               description   long description3               id  2                     eventRender  function event  element                element qtip                   content  event description     lt br   gt     event start                  style                        background   black                       color    FFFFFF                                     position                        corner                            target   center                           tooltip   bottomMiddle

[javascript] Display more Text in fullcalendar

Examples related to javascript

Examples related to html

Examples related to fullcalendar