Question

我喜欢fullcalendar JQuery-Plugin。目前我正在寻找一种解决方案，以便在活动中显示更多信息。例如，在DayView中，您会看到从06:00到10:00的事件。现在我想在此活动中显示其他说明（不仅包括时间和标题）。

Answer 1

此代码可以帮助您：

$(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 2

我个人使用工具提示来显示其他信息，因此当有人在事件上盘旋时，他们可以查看更长的描述。此示例使用 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'
                    }
                }
            });
        }
    });
});

Answer 3

通过修改单行，您可以更改fullcalendar.js脚本以允许换行并将多个信息放在同一行上。

在第3922行的FullCalendar.js中找到htmlEscape（s）函数并将.replace（/＆lt; br \ s？/？＆gt; / g，'
'）添加到它的末尾。< / p>

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替换为标题：'全日活动'+'＆lt; br /＆gt;' +'其他说明'

Answer 4

这是我使用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);
            },
        });
    }());
});

Answer 5

出于某种原因，我必须使用

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

让它发挥作用，我想我在白天看来。

Answer 6

作为可能的解决方案：在标题中添加一些额外的内容。覆盖这个css样式：

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

Answer 7

我找到了一个更简单的解决方案：

我更改了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;
}

现在它只在需要时包装。

Answer 8

我需要能够显示很多信息（没有工具提示）的功能，结果却非常不错。我使用FullCalendars title道具来存储我所有的HTML。要确保渲染后它可以正常工作，您要做的唯一一件事就是解析标题字段HTML。

// `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();

我本可以使用模板文字，但必须支持IE11

Answer 9

我建议使用eventAfterRender回调而不是eventRender。实际上，如果您使用eventRender，可能会危及事件的正确显示，在咖啡脚本中，它类似于：

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

在fullcalendar中显示更多文本

9 个答案: