在fullcalendar中显示更多文本 [英] Display more Text in fullcalendar

问题描述

我喜欢fullcalendar JQuery-Plugin。目前我正在寻找解决方案来显示更多信息。
例如在DayView中，您可以在06:00至10:00之间看到一个事件。现在我想在这个事件中显示一个额外的描述（不仅是时间和标题）。

I like the fullcalendar JQuery-Plugin. At the moment i am looking for a solution to display more information in event. For example in the DayView you see a event from 06:00 to 10:00. Now i want to display a additional description in this event (not only the time and the title).

推荐答案

我个人使用工具提示来显示其他信息，因此当有人在事件悬停时，他们可以查看更长的描述。此示例使用 qTip ，但任何工具提示实现都可以使用。

I personally use a tooltip to display additional information, so when someone hovers over the event they can view a longer descriptions. This example uses qTip, but any tooltip implementation would work.

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

这篇关于在fullcalendar中显示更多文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！