Question

如何在标题（日期滑块在哪里）中更改bootsrap年历的默认箭头，我想用svg设置自定义箭头，该怎么做？

$('.js-yearcalendar').calendar();

Answer 1

.calendar .calendar-header table th.next span {
  display: block;
  background: url(https://image.flaticon.com/icons/png/128/118/118740.png);
  width: 30px;
  height: 30px;
  border: thin black solid;
  background-size: cover;
}

.calendar .calendar-header table th.next span:before {
  display: none;
}

.calendar .calendar-header table th.prev {}

.calendar .calendar-header table th.prev span {
  display: block;
  background: url(https://image.flaticon.com/icons/png/512/126/126492.png);
  width: 30px;
  height: 30px;
  border: thin black solid;
  background-size: cover;
}

.calendar .calendar-header table th.prev span:before {
  display: none;
}

在您的Bootstrap's default CSS which will override its default CSS properties.后添加此CSS

注意：根据需要在后台URL中更改SVG路径。

希望这会有所帮助。

Answer 2

如果您在http://www.bootstrap-year-calendar.com中使用引导式压光机

您可以使用纯CSS做到这一点。

.calendar table.month td.day .day-content:hover {
     background:rgba(0,0,0,.2); /* This is the transparent color showing up when hovering */
     cursor:move; /* This is set as hand by default */
}

如何为引导年日历设置自定义箭头

2 个答案: