Question

我正在使用带有月视图的fullcalendar，我想将事件移动到日期单元格的底部。它有可能吗？如何？

我已经为我的目标制作了一张照片，我是在Google Chrome的Inspect元素的帮助下制作的

enter image description here

Answer 1

我只能使用CSS

在v.3.9.0上完成

.fc-row .fc-content-skeleton{
    padding-bottom: 2em;
}

并为yout事件添加一个类并使用：

.fc-event.your-class{
    position: absolute;
    bottom: 0;
}

Answer 2

我无法评论，所以请理解。我已经尝试了一切可以想到的事情来做这样的事情。通过他们的演示，他们可以使用FullCalendar http://arshaw.com/fullcalendar/我立即看到它正在使用表格来构建结构。这有一个主要问题。表有自己的预定义结构，允许您以特定的表格驱动格式订购...显然是正确的......

根据定义，每个问题都有一个根据内部内容构建的定义高度。如果你定位绝对（这是你的任务所需要的），他们会做两件事之一。消失（如果在内容上完成）或丢失定义的表列宽度。然后他们无法移动，除非您知道计算的金额。

所以你需要做的事情（没有前面的实际代码来看你如何填充字段）是计算在给定日期内具有状态的每个元素并给每个位置绝对。对于您想要位于底部的每个给定项目，您需要计算该项目，然后您必须向上移动每个项目。

基本上这不会很好，而且非常复杂。除非您能以某种方式将结构更改为更灵活的内容，否则我建议不要将此日历用于您正在尝试的内容。

如果有人确实找到了一个好方法！但遗憾的是，他们为我提供的演示没有任何解决方案。

Answer 3

我不确定FullCalendar，但通常vertical-align: bottom会将数据放在最底层。问题是它会将所有数据放在底部，而不是您在图像上显示的数据。

要解决这个特殊问题，你可以在单元格中放置一个新表，最后得到：

<table> //Main Table
    <tr>
        <td>
            <table> // new table
                <tr>
                    <td> data</td>
                </tr>
                <tr> // vertical align : bottom
                    <td>custom event</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

但是你会以很多丑陋的代码结束。（如果没有自定义事件，您也可以使用rowspan=2）

另一个应用是为这个＆＃39;自定义活动提供空间。这样做，您只需使用position:relative; padding-bottom:30px;上的<td>，然后使用position: absolute; bottom:0使用自定义事件项。

这有一个新问题，即使你没有自定义事件，你总是有30px的填充底部。（这可以通过使用JavaScript）

动态添加填充来缓解

不确定这是否真的对你有所帮助，但这些是我现在想到的事情。

Answer 4

我能够使用demo default.html在fullcalendar-2.1.1上实现这一点。这是代码：

$(document).ready(function() {

    $('#calendar').fullCalendar({
        defaultDate: '2014-09-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2014-09-01',
                isStickied: true
            },
            {
                title: 'Long Event',
                start: '2014-09-07',
                end: '2014-09-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2014-09-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2014-09-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2014-09-11',
                end: '2014-09-13'
            },
            {
                title: 'Meeting',
                start: '2014-09-12T10:30:00',
                end: '2014-09-12T12:30:00',
                isStickied: true
            },
            {
                title: 'Lunch',
                start: '2014-09-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2014-09-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2014-09-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2014-09-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2014-09-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2014-09-28'
            }
        ],
        eventAfterRender: function(event, element, view) {
            if (event.isStickied) {
                $(element).css('position', 'absolute');
                $(element).css('bottom', '0');
            }
        }
    });

});

您还需要修改.fc-content-skeleton的fullcalendar.css第648行：

height: 108px;

这将假设您的月历视图总是具有108px的固定行高，就像演示一样。

是否可以将事件移动到日间单元格的底部？

4 个答案: