覆盖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> 

请注意： fullcalendar 版本3.1.0用于此图示; 我意识到你使用的是较旧版本（版本1.5.3）并且不介意更新它。

同样有效地添加了moment.js以有效地处理日期。

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

Answer 2

如果日历单元格背景颜色与该单元格上的事件完全相同，则可以实现相同的目标，并且如果已存在该日历单元格的一个事件，则可以限制在日历上添加事件 。 下面是实现它的示例。

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

• dayRenderDates是一个日期数组，其中包含事件
• handleCalendarDateClicked（）是一个名为添加事件的函数

Answer 3

这可能是尝试使其工作的一种方法。

HTML：

 <div id="calendarContainer" style="border:solid 2px red;"> <div id='calendar'></div> </div> 

Tha javascript：

$(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 eventHeight = ($("#calendarContainer").height() / 6) - 20,
        eventWidth = ($("#calendarContainer").width() / 7) - 6;
      var new_description = '<div style="text-align:center;position:absolute;top:-19px;left:-1px;background-color:#3366cc;height:' + eventHeight + 'px;width:' + eventWidth + 'px;border-radius:5px;padding-top:3px;padding-left:4px;"> <div>event <br> time <br> title</div> </div>';
      element.append(new_description);
    },




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


  });

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



});

Answer 4

您可以按如下方式更改您的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
});