Javascript 使用jquery fullcalendar重写html和css以修改月历上的日单元格

我正在尝试修改jquery full calendar的day单元格

这是一个

我想在每月的day单元格中编辑css和html，以显示类似的内容，其中事件覆盖整个day单元格，防止任何新的dayclick事件发生。我希望每天最多1个活动

我曾尝试使用eventRender回调来设置一些html和css，但我没有任何运气，下面是我尝试的

$（“#日历”）.fullCalendar({
//违约日期：“2016-12-17”，
//defaultView:'basicWeek'，
//身高：300，
//eventColor:'绿色'，
活动：[
{
标题：“事件”，
开始：“2016-12-17T12:00:00”，
持续时间：“60分钟”
//渲染：“背景”
}
],
eventRender:函数（事件，元素）{
html（“”）；
var新描述=
+ ''
+力矩（event.start._i）.format（“HH:mm”）+“
”
+event.duration+“
”
+event.title
+ ''
;
元素。追加（新的_描述）；
}
});

要覆盖fullcalendar的CSS属性，请确保自定义CSS位于

fullcalendar.CSS

声明之后

使用

eventRender

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

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
defaultView:'月份'，
eventRender:函数（事件，元素）{
html（“”）；
元素.append(
力矩（event.start._i）.格式（“h:mm a”）+“
”
+event.duration+“
”
+event.title
);
var eventDay=$（“.fc day”）；
$.each（事件日、函数（键、值）{
if（value.dataset[“date”]==时刻（event.start._i）.format（“YYYY-MM-DD”））{
value.style.backgroundColor=“红色”；
}
});
},
活动：[
{
标题：“事件名称”，
开始：“2016-12-19T14:00:00”，
持续时间：“60分钟”，
颜色：“透明”
}
],
dayClick:function（）{
返回null；
}
});
});

.fc事件容器{
位置：相对位置；
z指数：-1；
文本对齐：居中；
}
.fc事件{
边界半径：0；
}
.fc日网格事件{
保证金：0；
}
您可以如下更改jquery

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        defaultView: 'month',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventRender: function(event, element, view) {
            var new_description =
                '<div style="text-align:center">3PM' + '<br/>' +
                '60min' + '<br/>' +
                'title</div>'
            ;
            element.append(new_description);
        },

        events: [{
            title: 'event',
            start: '2016-12-17T12:00:00',
            duration: '60 min'
                //rendering: 'background'
        }]

    });

    // console.log($('#calendar').html());

    // button click
});

$（文档）.ready（函数（）{
var calendar=$（“#calendar”）.fullCalendar({
defaultView:'月份'，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
eventRender:函数（事件、元素、视图）{
var新描述=
“下午3点”+“
”+
“60分钟”+“
”+
“头衔”
;
元素。追加（新的_描述）；
},
活动：[{
标题：“事件”，
开始：“2016-12-17T12:00:00”，
持续时间：“60分钟”
//渲染：“背景”
}]
});
//log（$（'#calendar'）.html（））；
//按钮点击
});
如果日历单元格背景颜色与该单元格上的事件完全相同，则可以实现相同的效果；如果该日历单元格已有一个事件，则可以限制在日历上添加事件。下面是一个实现它的示例

        var h = {};

        if ($('#calendar').width() <= 400) {
            $('#calendar').addClass("mobile");
            h = {
                left: 'title, prev, next',
                center: '',
                right: 'today,month,agendaWeek,agendaDay'
            };
        } else {
            $('#calendar').removeClass("mobile");
            if (App.isRTL()) {
                h = {
                    right: 'title',
                    center: '',
                    left: 'prev,next,month'
                };
            } else {
                h = {
                    left: 'title',
                    center: '',
                    right: 'prev,next,month'
                };
            }
        }

var events = [
                {
                   title: 'event1',
                   start: '2016-12-17T12:00:00',
                   duration: '60 min',
                   backgroundColor: '#BFCAD1'
                },
                {
                   title: 'event2',
                   start: '2016-12-24T12:00:00',
                   duration: '30 min',
                   backgroundColor: '#BFCAD1'
                }
             ]

function handleCalendarDateClicked() {
     var tempEvent = {};                       
     tempEvent.title = "event3";
     tempEvent.start = '2016-12-31T12:00:00';
     tempEvent.duration = '30 min';
     tempEvent.backgroundColor = '#BFCAD1';
     events.push(tempEvent);
     $('#calendar').fullCalendar('removeEvents'); //to avoid event duplicates
     $('#calendar').fullCalendar('addEventSource', events); // to reinitialize calendar with updated events array
} 

$('#calendar').fullCalendar({
                disableDragging: false,
                header: h,
                editable: false,
                events: events,
                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);
                },
                dayRender: function(date, cell) {
                   //based on condition like for the date event is there you can set background color of that cell 
                   var cellDate = date.format('MMM DD, YYYY');
                   if (dayRenderDates && dayRenderDates.indexOf(cellDate) > -1) {
                      cell.css("background-color", "#BFCAD1");
                   }
                },
                dayClick: function(date, jsEvent, view) {
                   //here, you can add event based on some condition like you want if there is already an event attached to the cell then another cannot be added
                   var newDate = new Date(date.format());
                   return ((dayRenderDates.indexOf(newDate) > -1) ? '' : handleCalendarDateClicked(date.format('YYYY-MM-DD')));
                }
            });

var h={}；
如果（$（“#日历”）.width（）-1）{
css（“背景色”，“BFCAD1”）；
}
},
dayClick：函数（日期、事件、视图）{
//在这里，您可以根据某些条件添加事件，如您所需。如果已经有一个事件附加到单元格，则无法添加另一个事件
var newDate=新日期（Date.format（））；
返回（（dayRenderDates.indexOf（newDate）>-1）？“”：handleCalendarDateClicked（date.format（'YYYY-MM-DD'））；
}
});


dayRenderDates是事件所在日期的数组
handleCalendarDateClicked（）是一个用于添加事件的函数
这可能是一种让这项工作成功的捷径

HTML：



我对这个答案有疑问。当我单击day单元格中的事件时，它会触发dayClick，而不是eventClick。我正在寻找与此完全相反的结果。我希望事件单击发生在单元格中具有事件的任何位置。因此，事件跨越了日单元格的整个宽度和高度。@user1186050:刚刚更新了我的帖子，以防止日点击事件发生，如您所述。否，请阅读原始帖子。我不想禁用dayclick回调！我仍然需要它来在单击日期时创建事件，我想要的是事件跨越整个日期单元格，这样一旦创建了事件，日期单元格就不再可单击（它被事件覆盖），从而阻止创建多个事件@用户1186050：你应该考虑更新你的帖子，因为它不够清晰；我的回答基于我从你最初的帖子和上面的评论中得到的理解。主要议题如下：