主页 / 问题 / 1606490
Accepted
user658408
Asked:2025-02-09 01:04:19 +0000 UTC2025-02-09 01:04:19 +0000 UTC

是否可以将日期向下移动到单元格/单元格下，以及如何操作？

  • 772

我正在为网站制作日历。我想在单元格下显示月份的数字，如下所示：

这里有一些活动，下面有一个日期

     Декабрь | 08

以防万一，举一个直观的例子：

operagx 的发布日期

我不确定这是否可以实现，因为当我打开 devtools 时，我看到每个单元格都在 fc-daygrid-day-frame fc-scrollgrid-sync-inner div 中，并且里面还有 3 个 div。 fc-daygrid-day-top 这里是当天的日期，fc-daygrid-day-events 我怀疑这个 div 是需要显示未来事件的，fc-daygrid-day-bg 我不太明白它是做什么用的。我尝试使用相对位置和绝对位置来移动日期，但是有点笨拙。理论上，无需超出单元格就可以实现类似的结果，我们将数字降低并将它们按到左侧，并从角落处缩进，诸如此类，但我仍然想考虑在单元格下方显示日期的选项。 + 我不知道如何在日期（当前月份）中添加破折号。请告诉我如何实现这一点，如果在另一个框架上有实现，我准备考虑它。最主要的是，有某些东西接近所描述的概念。

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/

ps 我通过脚本标签使用连接，框架作为文件夹下载。

提前感谢您的帮助。

javascript

2 个回答

  1. Best Answer

    所使用的库提供了几种方法来指定在单元格中输出什么以及如何输出。

    1. 该属性dayCellContent负责显示与日期相关的单元格的内容；默认情况下，显示日期数字。
    2. 该属性eventContent负责事件本身的模板
    3. 该属性dayCellClassNames指定哪些类应用于整个白天单元格
    4. 该属性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>

    • 0 
  2. <section class="game__release__calendar">
<div class="container">
    <div id="image" href=""></div>
    <div id='calendar'></div>
</div>
    只需将元素叠放在一起即可
    • -1

相关问题