Show more text in fullcalendar

Question

I am looking for a solution to display additional information in an event.

For example, in DayView you see an event from 06:00 to 10:00.
I want to display an additional description in this event (not just time and title).

Answer 1

I personally use a tooltip to display additional information, so when someone hovers over an event, they can view more detailed descriptions. This example uses qTip , but any tooltip implementation will 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 + '<br />' + event.start, style: { background: 'black', color: '#FFFFFF' }, position: { corner: { target: 'center', tooltip: 'bottomMiddle' } } }); } }); }); 

Answer 2

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("<br/>" + event.description); } }); } 

Answer 3

With a single line modification, you can modify the fullcalendar.js script to allow line breaks and put multiple information on one line.

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

 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, sharing information. Example, replace event.title with title: 'All Day Event' + '<br />' + 'Other description'

Answer 4

Here is my code for a 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 = $('<div/>').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 am Featuring The EFEC Belief System & 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 = '<p>'+data.description +'<p>'+ '<h3>'+data.title+'</h3>' + '<p><b>Start:</b> '+data.start+'<br />' + (data.end && '<p><b>End:</b> '+data.end+'</p>' || ''); tooltip.set({ 'content.text': content }) .reposition(event).show(event); }, }); }()); }); 

Answer 5

For some reason I have to use

 element.find('.fc-event-inner').empty(); 

to make it work, I think I'm in day mode.

Answer 6

as a possible solution: Add some more content to the header. Rewrite this css style:

  .fc-day-grid-event .fc-content { white-space: normal; } 

Answer 7

Well, I found a simpler solution for me:

I changed fullcalendar.css

and added the following:

 float: left; clear: none; margin-right: 10px; 

Result:

 .fc-event-time, .fc-event-title { padding: 0 1px; float: left; clear: none; margin-right: 10px; } 

now he only wraps around when he needs to.

Answer 8

I needed the ability to display very little information (without a tooltip), and it turned out pretty good. I used the FullCalendars title propeller to store all my HTML. The only thing you need to do to make sure it works after rendering is to parse the HTML header fields.

 // 'data' ismy JSON object. $.each(data, function(index, value) { value.title = '<div class="title">' + value.title + '</div>'; value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>'; value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>'; value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>'; }); // 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 use template literals, but should have supported IE11

Answer 9

I would recommend using the eventAfterRender callback instead of eventRender. Indeed, if you use eventRender, you can jeopardize the correct display of events in a coffee script, it is something like:

 $("#calendar").fullCalendar eventAfterRender: (event, element) -> element.find('.fc-title').after("<span>"+event.description+"</span>")