Показать больше текста в полном календаре

Question

Показать больше текста в полном календаре

Я ищу решение для отображения дополнительной информации в событии.

Например, в DayView вы видите событие с 06:00 до 10: 00.
Я хочу отобразить дополнительное описание в этом событии (не только время и заголовок).

58

javascript html fullcalendar

задан Mel 23 July 2019 в 10:53

3 ответа

Изменяя одну строку, вы можете изменить сценарий fullcalendar.js, чтобы разрешить разрыв строки и разместить несколько данных в одной строке.

В FullCalendar.js в строке ~ 3922 найдите функцию htmlEscape (s) и добавьте .replace (/
/ G, '
') в ее конец.

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

Это позволит вам иметь несколько строк для заголовка, разделяющих информацию. Пример замените event.title на title: 'Мероприятие на весь день' + '
' + 'Другое описание'

7

ответ дан 24 November 2019 в 18:40

Этот код может вам помочь:

$(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); 
        } 
    });
}

123

ответ дан 24 November 2019 в 18:40

Другие вопросы по тегам:

javascript html fullcalendar

Похожие вопросы:

score 36 · Accepted Answer

Я лично использую всплывающую подсказку для отображения дополнительной информации, поэтому, когда кто-то наводит курсор на событие, он может просматривать более длинные описания. В этом примере используется qTip , но подойдет любая реализация всплывающей подсказки.

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