I want to add additional notes to an event for the day and week view of the full calendar. Ideally, you can click a title on the day while on the month view and it would switch to the day view with the extra notes in the field block. I have addend a picture to help explain it, thanks.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2020-06-11',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: "A team",
start: '08:00', // a start time (10am in this example)
end: '10:00', // an end time (2pm in this example)
dow: [ 0, 6 ], // Repeat monday and thursday
description: "Attending: <br> BA,Face,Hannibal,Murdock"
}
]
});
});
After a few hours of unsuccessful attempts, I abandoned the javascript and used css. First, use a "\n" in your title and put a note after that. Like this;
title: 'A team \n Attending: \n BA, Face, Hannibal, Murdock',
Then add css to hide the second (and so on) line.
<style type="text/css">
.fc-day-grid-event > .fc-content {
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
max-height:15px;
}
</style>
It would be cool if I could figure out how to put an id on '' so I could add some html to it, but this works for now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.