在 zabuto 日历中更改徽章的颜色答案

【问题标题】：Change color of badge in zabuto calendar在 zabuto 日历中更改徽章的颜色
【发布时间】：2017-05-26 20:11:49
【问题描述】：

我的网站上有一个 zabuto 日历，我在其中加载来自 ajax 调用的事件。该事件由日历中的黄色徽章表示。我的问题是：是否存在改变该徽章颜色的方法？

这是我的代码：

<div id="my-calendar"></div>
    <script type="application/javascript">
        $(document).ready(function () {
            $("#my-calendar").zabuto_calendar({
                today: true,
                language: "es",
                ajax: {
                    url: "<?php echo base_url();?>index.php/client/build_date/",
                    modal: true
                }
            });
       });
   </script>

提前致谢！

【问题讨论】：

标签： jquery css calendar

【解决方案1】：

您应该能够使用 CSS !important 覆盖默认颜色。看一个日历的例子，我认为这应该可行：

.event.event-clickable{   //for a clickable event
   background-color: blue !important; //your choice of color
}

.badge.badge-event{       //for the badge color
  background-color: red !important; //your choice of color
}

【讨论】：

【解决方案2】：

这里还有一个例子：

var dateString = (new Date()).toISOString().split("T")[0];

var eventData = [{
  "date": dateString,
  "badge": true,
  "title": dateString
}, ];

// initialize the calendar on ready
$("#my-calendar").zabuto_calendar({
  legend: [{
    type: "text",
    label: "Special event",
    badge: "00"
  }],
  data: eventData,
  cell_border: true,
  show_previous: 2,
  show_next: 2,
  weekstartson: 0,
  nav_icon: {
    prev: '<i class="fa fa-chevron-circle-left"></i>',
    next: '<i class="fa fa-chevron-circle-right"></i>'
  }
});

div.zabuto_calendar .badge-event,
div.zabuto_calendar div.legend span.badge-event {
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%) !important;
  color: #fff;
  text-shadow: none;
}

div.zabuto_calendar .table tr td.event div.day,
div.zabuto_calendar ul.legend li.event {
  background-color: #AEEEFF !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-calendar"></div>

【讨论】：