Переопределение html и css для изменения дневной ячейки в календаре месяца с помощью jquery fullcalendar

Я пытаюсь изменить jquery полную ячейку дня календаря.

Я хочу отредактировать css и html в ячейке дня месяца, чтобы показать что-то вроде этого, где событие охватывает всю ячейку дня, предотвращающую появление какого-либо нового события dayclick. Я хочу max 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);
                }
            });

Ответ 1

Чтобы переопределить CSS-свойства fullcalender, убедитесь, что ваш собственный 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>

Ответ 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() - это функция, вызываемая для добавления события

Ответ 3

Это может быть способ getto попытаться сделать эту работу.

HTML:

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

Ответ 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
});