javascript - 如何使用 ajax jquery 更改 zabuto 日历默认事件颜色

Question

如何在 zabuto 日历中制作不同的事件颜色。我想用颜色指定事件。但我不知道。怎么做我的部分代码在这里。

 $("#my-calendar").zabuto_calendar({
      ajax: {
        url: urldata,
        modal: true         
      }
   });

Answer 1

这里的工作示例:

var Tomorrow = moment().add('days', 1).format('YYYY-MM-DD');
var TheDayAfterTomorrow = moment().add('days', 2).format('YYYY-MM-DD');
var In3Days = moment().add('days', 3).format('YYYY-MM-DD');
var In4Days = moment().add('days', 4).format('YYYY-MM-DD');

var eventData = [{
  "date": Tomorrow,
  "badge": false,
  "title": Tomorrow,
  "classname": "rose"
}, {
  "date": TheDayAfterTomorrow,
  "badge": true,
  "title": TheDayAfterTomorrow
}, {
  "date": In3Days,
  "badge": true,
  "title": In3Days
}, {
  "date": In4Days,
  "badge": false,
  "title": In4Days,
  "classname": "grade-4"
}];

// initialize the calendar on ready
$("#my-calendar").zabuto_calendar({


  legend: [{
      type: "text",
      label: "Special event",
      badge: "00"
    },
    {
      type: "block",
      label: "Regular event",
      classname: "rose"
    },
    {
      type: "spacer"
    },
    {
      type: "text",
      label: "Bad"
    },
    {
      type: "list",
      list: ["grade-1", "grade-2", "grade-3", "grade-4"]
    },
    {
      type: "text",
      label: "Good"
    }
  ],


  data: eventData,
  today: true,
  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>'
  }
});

/* Change badge color */

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;
}

.grade-1 {
  background-color: #FA2601;
}

.grade-2 {
  background-color: #FA8A00;
}

.grade-3 {
  background-color: #FFEB00;
}

.grade-4 {
  background-color: #27AB00;
}

.rose {
  background-color: #FC92A1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.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>