覆盖html和css以使用jquery fullcalendar修改月历上的日期单元格

Question

我正在尝试修改jquery完整日历的日期单元格.

这是一个小提琴

我想在月份的日期单元格中编辑css和html以显示类似这样的内容,其中事件涵盖整个日期单元格,防止发生任何新的日期单击事件.我想每天最多1次活动!

我试图使用eventRender回调来设置一些html和css,但我没有运气,这是我尝试过的.

$('#calendar').fullCalendar({
                //defaultDate: '2016-12-17',
                //defaultView: 'basicWeek',
                //height: 300,
                //eventColor: 'green',
                events: [
                    {
                        title: 'event',
                        start: '2016-12-17T12:00:00',
                        duration: '60 min'
                        //rendering: 'background'
                    }
                ],
                eventRender: function (event, element) {
                    element.html('');
                    var new_description =
                        + '<div style="text-align: center; height=100%; width=100%;">'
                        +  moment(event.start._i).format("HH:mm") + '<br/>'
                        + event.duration + '<br/>'
                        + event.title
                        + '</div>'
                        ;
                    element.append(new_description);
                }
            });

这就是看起来像.您会注意到顶部有一些空白区域,用户可以点击它,并且会触发日间事件并且文本不是居中对齐的

快速提问 - 我应该避免使用fullcalendar并使用https://github.com/airbnb/react-dates插件学习反应js ??? 看起来我可以完全控制每个单元格的html和css!

Answer 1

要覆盖fullcalender的 CSS 属性，请确保您的自定义 CSS 位于fullcalendar.css声明之后。

使用eventRender回调，请在下面找到一个说明该方法的工作片段：

$(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'month',
        eventRender: function (event, element) {
            element.html('');
            element.append(
                moment(event.start._i).format("h:mm a") + '<br/>'
                + event.duration + '<br/>'
                + event.title
            );
            var eventDay = $(".fc-day");

            $.each( eventDay, function( key, value ) {
                if ( value.dataset["date"] == moment(event.start._i).format("YYYY-MM-DD") ) {
                    value.style.backgroundColor = "red";
                }
            });
        },
        events: [
            {
                title: 'Event Name',
                start: '2016-12-19T14:00:00',
                duration: '60 min',
                color: 'transparent'
            }
        ],
        dayClick: function() {
            return null;
        }
    });

});

<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>

<style type='text/css'>
    .fc-event-container {
        position: relative;
        z-index: -1;
        text-align: center;
    }
    .fc-event {
        border-radius: 0;
    }
    .fc-day-grid-event {
        margin: 0;
    }
</style>

<div id='calendar'></div>

请注意：本图使用了3.1.0 版本；fullcalendar我意识到您使用的是相当旧的版本（版本 1.5.3）并且不介意更新它。

根据需要同样添加moment.js以有效处理日期。

在此处阅读有关 Moment Parsing（字符串格式）的更多信息。