简体   繁体   中英

Adding notes to full calendar day and week view

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM