如何显示没有削减它的日历事件的主题 - 使用FullCalendar UI(How to displ

2019-10-21 01:41发布

我现在用的是FullCalendar UI从数据库表中显示日历事件。

那我遇到的问题是,当我有一个事件在持续时间长不超过1小时,该事件的受试者不会是可行的。 我附上的截图向您展示如何,目前正在显示它。

当在第一事件看“IT会议”它似乎没有问题。 在另一方面,下一个事件(即,开始于下午5点24 - 6:00 PM)所述对象是不可读。 我怎么还是能做些什么来使主体活力,使用户知道他/她已经安排?

谢谢

Answer 1:

为了解决这个问题,我用http://qtip2.com/ 。 (对于早期版本fullcalendar的)

http://jsfiddle.net/marcrazyness/cjn4vxbm/

$(document).ready(function () {    
    $('#myCalendar').fullCalendar({
        events: [
            {
                title: 'event',
                start: '2014-10-01',
                description: 'My Event Description',
                allDay: true
            }
        ],
        eventRender: function(event, element) {
        // Here using qtip to set hover message.
        element.qtip({
            content: event.description,
            // Position (optional)
            position: {
                my: 'center center',
                at: 'center center',
                target: $(element)
            }
        });
        }
    });
});

编辑! 从迈克的@MikeSmithDev回复最新的股票版本fullcalendar 2.1.1为您处理此:



Answer 2:

你的问题与日历的造型做。 因此,它没有意义的(使用JS)的功能来改变任何东西。

我建议以下CSS代码:

.fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-time {display:inline-block;}
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-title {display:inline-block; margin-left:7px;}

事件的标题将旁边的时间块写入。

在功能没有被打破。

请记住,你需要加载这个插件的初始CSS代码后写这个CSS代码,否则,你将不得不使用“!重要的”覆盖原代码。



Answer 3:

从您的评论“有没有办法,我可以只是把的时间标题旁边时存在溢出?”

是。 假设你正在使用至少FullCalendar 2.1.1,时间被置于一个div类.fc-time和标题具有一流的.fc-title 。 所以,简单的解决办法只是做一些如添加更新的风格:

.fc-time {display:inline-block !important;}
.fc-title {display: inline-block !important;}

现在让我们假设你想不喜欢这样,因为它太容易,你需要做更多的操作它。 所以,让我们只是隐藏与CSS称号,并随着时间的补习班它在那里:

改变CSS来.fc-title {display: none;}

现在,让我们改变了eventRender

eventRender: function (event, element) {
    var title = '<span class="someCoolClass"> ' + event.title + "</span>";
    element.find('.fc-time').html(moment(event.start).format('h:mm') +" going until " + moment(event.end).format('h:mm') + title);
}

所以这是一个有点过分,但它显示了一些激烈的操纵时间/标题。 我还通过把更多的信息在自举模式或jQuery UI的对话框,如果你有兴趣做过类似的事情。

但是,这并没有回答只是这样做的时候会有溢出您的其他问题。 如何只有这样做时,时间是30分钟或更少? 因此,改变eventRender以上:

eventRender: function (event, element) {
    var timeSpan = event.end - event.start;
    var delim = "<br>"; /*break between time and title*/
    if (timeSpan <= 1800000) { /*30 min or less! Replace the break with a colon*/
        delim = ": ";
    }
    element.find('.fc-time').html(moment(event.start).format('h:mm') +" - " + moment(event.end).format('h:mm') + delim + event.title );
}

虽然我会告诫说,我用eventRender东西在旧版本FullCalendar的,但在2.1.1进行测试时,因为它是适当调整显示它甚至没有似乎有必要。 因此,它可能只是作为升级一样简单。 如果没有,你可以使用eventRender功能(虽然旧版本我认为这是一个不同的类像FC-事件时间或东西)。



Answer 4:

依然采用了eventRender回调(如MarCrazyness建议 ),你可以改变HTML集团任何你喜欢的方式:

eventRender: function(event, element) {
    // event is the javascript object
    // element is the html bloc, which already contains
    //    the time section, the body section etc...
    if (event.end - event.start < 1hour ) { //<- write the real code to check if this is less than an hour
        $(element).find('.fc-title').html('');
        $(element).find('.fc-time').append(event.title);
    }
}


Answer 5:

我下载了fullcalendar 2.1.1新版本和解决的问题。

我猜的版本是我使用过的错误。



文章来源: How to display the Calendar Event's Subject without cutting it - using FullCalendar UI