在 Fullcalendar 的选定日期周围添加边框

Question

我正在使用 FullCalender，我想更改我的月视图和周视图中的样式，以便所选日期不是黄色阴影，而是周围有一个粗边框。

我试过了

.fc-state-highlight, .fc-unthemed .fc-today {
    background-color: white;
    border: 3px solid #f26122;
}

但这只是在 table 单元格的顶部和左侧绘制了一个边框：

Answer 1

尝试设置 td 的框大小。

box-sizing: border-box;

可能需要做成遮挡并设置高度。

Answer 2

这应该有效...

.fc-widget-content.fc-state-highlight:before {
  content: '[=10=]a0';
  border: 3px solid #f26122;
  height: 100%;
  width: calc(100% - 6px);
  display: block;
  position: relative;
  background: transparent;
}
.fc-state-highlight {
  background: none !important;
}

请记住，width 的格式必须为 100% - [2x 边框宽度 px]。

Answer 3

添加轮廓而不是边框应该可以解决您的问题：

.fc-highlight {
    outline: 3px solid #f26122 !important;
}

在 Fullcalendar 的选定日期周围添加边框

Adding a border around selected day in Fullcalendar

css

fullcalendar