Отображение текста в fullcalendar

Мне нравится fullcalendar jQuery-плагин. На данный момент я ищу решение для отображения дополнительной информации в случае. Например, в DayView вы видите событие с 06: 00 до 10:00. Теперь я хочу отобразить дополнительное описание в этом событии (не только время и название).

8 54
fullcalendar

8 ответов:

Я лично использую подсказку для отображения дополнительной информации, поэтому, когда кто-то нависает над событием, они могут просматривать более длинные описания. В этом примере используется 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'
                    }
                }
            });
        }
    });
});
33

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

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

с модификацией одной строки вы можете изменить fullcalendar.в JS скрипт, чтобы разрешить разрыв строки и поместить несколько информации на той же строке.

В FullCalendar.js on line ~3922 найдите функцию htmlEscape (S) и добавьте .заменить(/
/ 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 />');
}

Это позволит вам иметь несколько строк для заголовка, отделяя информацию. Пример замены события.название название: 'All Day Event' + '
'+'Другое Описание'

5

вот мой код для всплывающего окна с помощью qTip2 и 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 a.m. 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);
            },
        });
    }());
});
4

по какой-то причине, я должен использовать 

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

чтобы заставить его работать, я думаю, я в день просмотра.

2

как возможное решение: Добавьте дополнительный контент в заголовок. Перезаписать этот стиль css:

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

Ну я нашел более простое решение для меня:

Я изменил fullcalendar.css

и добавил:

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

в результате: 

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

теперь он только обертывает, когда это необходимо.

1

Я бы рекомендовал использовать обратный вызов eventAfterRender вместо eventRender. Действительно, если вы используете eventRender, вы можете поставить под угрозу правильное отображение событий, в сценарии кофе, это что-то вроде :

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