Можно ли перенести даты дней вниз, под ячейку/клетку и как это сделать?

Question

делаю календарь на сайт. Хочу сделать отображения чисел месяца под ячейкой, как-то так:

тут какое-то событие, а под ним дата

     Декабрь | 08

визуальный пример на всякий случай:

Не уверен, что это возможно реализовать, ибо открыв devtools увидел, что каждая ячейка лежит в диве fc-daygrid-day-frame fc-scrollgrid-sync-inner, внутри него лежат ещё 3 дива. fc-daygrid-day-top тут лежит дата дня, fc-daygrid-day-events подозреваю, что этот див нужен для отображения будущих событий, fc-daygrid-day-bg не совсем понимаю для чего нужен. Пытался перенести дату с помощью position relative и absolute, но это как-то коряво. в теории можно не выходя за пределы ячейке добиться подобного результата, опускаем числа вниз и прижимаем к левой части с отступ от угла, что-то подобное, но я бы хотел всё-таки рассмотреть вариант даты под ячейкой. + вообще без понятия как добавить к датам черту, текущий месяц. Подскажите пожалуйста как это можно реализовать, если есть реализация на другом фрейме готов рассмотреть. Главное, чтобы было что-то приближенное к описанному концепту.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    dayHeaders: false,
    headerToolbar: {
      start: '',
      center: '',
      end: '',
    },

  });

  calendar.render();

});

.game__release__calendar #calendar {
  width: 900px;
  margin: 0 auto;
  padding: 100px 0;

}

.game__release__calendar #calendar a {
  color: #ffffff;
}

.game__release__calendar #calendar.fc td,
.fc th {
  border-style: none;
}

.game__release__calendar #calendar .fc-scrollgrid.fc-scrollgrid-liquid {
  border: none;
}

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<section class="game__release__calendar">
  <div class="container">
    <div id='calendar'></div>
  </div>
</section>

ссылка на fullcalendar https://fullcalendar.io/

p.s. использую подключения через теги скрипта, фрейм скачен папкой.

Заранее спасибо за помощь.

Answer 1

<section class="game__release__calendar">
<div class="container">
    <div id="image" href=""></div>
    <div id='calendar'></div>
</div>

Просто расположите элементы друг над другом

Answer 2

Используемая библиотека предоставляет несколько способов для указания что и как выводить в ячейке.

свойство dayCellContent отвечает за вывод содержимого ячейки относящегося к дате, по умолчанию там выводится номер дня.
свойство eventContent отвечает за шаблон самого события
свойство dayCellClassNames указывает какие классы применить ко всей ячейке дня
свойство eventClassNames указывает какие классы применить к событию

К сожалению менять расположение в элементах ячейки с помощью настроек нельзя, однако можно указать стили для контейнера .fc-daygrid-day-frame.fc-scrollgrid-sync-inner и задать нужное расположение элементов.

Пример:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    dayCellClassNames: 'cell-class',
    headerToolbar: false,
    dayHeaders: false,
    dayCellContent: function(e) {
      return {
        html: `<span class="date">${e.date.getDate()}</span>|<span class="month">${e.date.toLocaleDateString('ru-RU', {month: 'short'})}</span>`
      }
    },
    eventClassNames: 'event-class',
    eventContent: function(arg) {
      return {
        html: '<div><img src="https://placehold.co/50x70"/></div>'
      }
    },
    events: [{
        title: 'event 1',
        date: '2025-02-04'
      },
      {
        title: 'event 2',
        date: '2025-02-17'
      }
    ]
  });

  calendar.render();

});

.fc-daygrid-day-frame.fc-scrollgrid-sync-inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.event-class {
  margin: 0 !important;
  font-size: 0;
  border: none;
}

.cell-class {
  background: black;
  color: rgb(188, 179, 207);
  --fc-border-color: #2d2d2d;

}

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<section class="game__release__calendar">
  <div class="container">
    <div id='calendar'></div>
  </div>
</section>

БЛОГ НА HUSL

Можно ли перенести даты дней вниз, под ячейку/клетку и как это сделать?

Ответы (2 шт):