Блог

Я уже некоторое время использую планировщик полного календаря, чтобы создать календарь для клиента, за исключением того, что «события» — это просто время распределения заданий.

Я оформил сам календарь в соответствии с требованиями клиента, но фактические столбцы событий, которые появляются в календаре после передачи данных, составляют лишь около половины высоты фактического временного интервала. Я знаю, что это, вероятно, делается с целью перекрытия событий в целом, но в данном случае этого никогда не произойдет, так есть ли способ увеличить высоту панели событий до 100% временного интервала? Я пробовал в CSS, но это никогда не работает.

Это отображается на временной шкале в течение недели по горизонтали, а не по вертикали. Я прикрепил скриншот в качестве примера.

РЕДАКТИРОВАТЬ: Код для календаря

JS:

 $('#calendar').fullCalendar({
    resourceAreaWidth: "20%",
    editable: true,
    aspectRatio: 2.5,
    scrollTime: '08:00',
    minTime: '08:00',
    maxTime: '22:00',
    firstDay: 1,
    header: {
        left: 'promptResource today prev,next',
        center: 'title',
        right: 'timelineDay,timelineWeek,timelineMonth'
    },
    customButtons: {

    },
    defaultView: 'timelineWeek',
    views: {
        timelineWeek: {
            type: 'timeline',
            slotWidth: 60,
            slotDuration: '02:00',
            duration: { days: 6 }
        }
    },
    slotLabelFormat: [
        'dddd D/M/YY',
        'h:mma'
    ],
    events: [
        { id: '1', resourceId: '1', start: '2016-10-24 08:00:00', end: '2016-10-24 10:00:00', title: 'TESTREF001', url: 'null' },
    ],
    resourceLabelText: 'Staff',
    resources: [
        { id: '1', title: 'John Doe' },
    ]
});
  

CSS:

 .fc-widget-header > .fc-cell-content > .fc-cell-text {
    font-family: 'Oswald', sans-serif;
    font-weight: 400 !important;
    padding-top: 12px;
}

.fc-widget-header > .fc-cell-content {
    background: #e4dbff;
}

.fc-time-area .fc-widget-header {
    background: #e4dbff !important;
    text-align: center !important;
}

.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {
    border-color: #AAA !important;
}

.fc-body .fc-resource-area .fc-cell-content, .fc-body .fc-resource-area .fc-widget-content > div {
    background: #f9f2c7;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

.fc-widget-header > div > .fc-cell-content > .fc-cell-text {
    font-family: 'Oswald', sans-serif;
    font-weight: 400 !important;
    font-size: 24px;
    padding-top: 12px;
}
.fc-widget-header {
    background: #f9f2c7;
}

.fc-widget-content.fc-major {
    background: #fff2e7;
    border-collapse: collapse;
}

.fc-resource-area .fc-scroller-canvas {
    background: #f9f2c7;
}