我需要根据 if 条件更改事件的颜色

Question

$(document).ready(function() {
  var SITEURL = "{{url('/')}}";

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });
  var calendar = $('#calendar').fullCalendar({
    editable: true,
    events: SITEURL + "/fullcalendar",
    displayEventTime: true,
    editable: true,
    eventRender: function(event, element, view) {
      if (event.allDay === 'true') {
        event.allDay = true;
      } else {
        event.allDay = false;
      }
    },
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
      var title = prompt('Evente Title:');
      var limit = prompt('Limite de alunos:');
      if (title) {
        var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
        var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
        $.ajax({
          url: SITEURL + "/fullcalendar/create",
          data: 'title=' + title + '&start=' + start + '&end=' + end + '&limit=' + limit,
          type: "POST",
          success: function(data) {
            displayMessage("Added Successfully");
          }
        });
        calendar.fullCalendar('renderEvent', {

            title: title,
            start: start,
            end: end,
            allDay: allDay
          },
          true
        );
      }
      calendar.fullCalendar('unselect');
    },
    eventDrop: function(event, delta) {
      var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
      $.ajax({
        url: SITEURL + '/fullcalendar/update',
        data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
        type: "POST",
        success: function(response) {
          displayMessage("Updated Successfully");
        }
      });
    },
    eventClick: function(event) {
      var deleteMsg = confirm("Do you really want to delete?");
      if (deleteMsg) {
        $.ajax({

          url: SITEURL + '/fullcalendar/delete',
          data: "&id=" + event.id,
          type: "POST",
          success: function(response) {
            if (parseInt(response) > 0) {
              $('#calendar').fullCalendar('removeEvents', event.id);
              displayMessage("Deleted Successfully");
            }
          }
        });
      }
    }
  });
});

function displayMessage(message) {
  $(".response").html("<div class='success'>" + message + "</div>");
  setInterval(function() {
    $(".success").fadeOut();
  }, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="response"></div>
  <div id='calendar'></div>
</div>

这段代码创建了一个完整的日历，默认情况下所有事件都是蓝色的，我需要当变量的值小于 5 时颜色为绿色，如果大于 5 为红色，我该怎么做这样做？

我希望我可以在 javascript 中进行此更改，以便能够在同一应用程序中使用其他日历，以便能够根据我的决定更改颜色

Answer 1

你总是可以使用 .style。

if(limit < 5){
   event.style.color = "green"
}else if(limit > 5){
   event.style.color = "red"
}

这里的事件是指你试图切换颜色的元素。