javascript - 在完整日历中使用随机颜色生成器使背景颜色等于边框颜色

Question

我正在处理完整的日历，以便为我的客户创建一个易于查看的漂亮时间表。现在我尝试让每个事件都有不同的颜色，因为我使用代码在每次页面加载时生成随机颜色，但现在的问题是边框颜色和背景颜色不相等。它们不相等，因为我还在边框颜色中添加了随机颜色。但是当我尝试将 getRandomColor 函数分配给变量并将变量放入每个事件的每个边框和背景颜色中时，它肯定会向事件输出相同的边框和背景颜色，但它将应用于所有事件。所以我的目标没有达到。

当存在随机颜色时，如何使背景颜色等于边框颜色？

JSFIDDLE: https://jsfiddle.net/aice09/w1pxfzcm/2/

$(document).ready(function() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!

    var yyyy = today.getFullYear();
    if (dd < 10) {
        dd = '0' + dd;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    var today = yyyy + '-' + mm + '-' + dd;

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    var genColor =getRandomColor();
    
    $('#calendar').fullCalendar({


        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultDate: today,
        navLinks: true, // can click day/week names to navigate views
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        events: [{
            title: 'Philippine Seven Corporation',
            start: '2017-05-01',
            backgroundColor: getRandomColor()
        }, {
            title: 'Long Event',
            start: '2017-05-07',
            end: '2017-05-10',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2017-05-09T16:00:00',
            backgroundColor: getRandomColor()
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2017-05-16T16:00:00',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            title: 'Conference',
            start: '2017-05-11',
            end: '2017-05-13',
            backgroundColor: genColor,
            borderColor: genColor
        }, {
            title: 'Meeting',
            start: '2017-05-12T10:30:00',
            end: '2017-05-12T12:30:00',
            backgroundColor: genColor,
            borderColor: genColor
        }, {
            title: 'Lunch',
            start: '2017-05-12T12:00:00',
            backgroundColor: genColor,
            borderColor: genColor
        }, {
            title: 'Meeting',
            start: '2017-05-12T14:30:00',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            title: 'Happy Hour',
            start: '2017-05-12T17:30:00',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            title: 'Dinner',
            start: '2017-05-12T20:00:00',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            title: 'Birthday Party',
            start: '2017-05-13T07:00:00',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2017-05-28',
            backgroundColor: getRandomColor(),
            borderColor: getRandomColor()
        }],
        eventClick: function(event) {
            if (event.title) {
                alert(event.title);
            }
        }
    });

});

#calendar {
    width: 100%;
}

   <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <!--Full Calendar-->
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
    <!--Bootstrap 3.3.7-->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id='calendar'></div>

Answer 1

您可以在 getRandomColor 中设置一个参数，要求它返回先前计算的颜色。

$(document).ready(function() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!

  var yyyy = today.getFullYear();
  if (dd < 10) {
    dd = '0' + dd;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }
  var today = yyyy + '-' + mm + '-' + dd;
  var prevColor;

  function getRandomColor(usePrev) {
    if (usePrev && prevColor)
      return prevColor;

    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    prevColor = color;
    return color;
  }

  $('#calendar').fullCalendar({


    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    defaultDate: today,
    navLinks: true, // can click day/week names to navigate views
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    events: [{
      title: 'Philippine Seven Corporation',
      start: '2017-05-01',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Long Event',
      start: '2017-05-07',
      end: '2017-05-10',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2017-05-09T16:00:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2017-05-16T16:00:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Conference',
      start: '2017-05-11',
      end: '2017-05-13',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Meeting',
      start: '2017-05-12T10:30:00',
      end: '2017-05-12T12:30:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Lunch',
      start: '2017-05-12T12:00:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Meeting',
      start: '2017-05-12T14:30:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Happy Hour',
      start: '2017-05-12T17:30:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Dinner',
      start: '2017-05-12T20:00:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Birthday Party',
      start: '2017-05-13T07:00:00',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }, {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2017-05-28',
      backgroundColor: getRandomColor(),
      borderColor: getRandomColor(true)
    }],
    eventClick: function(event) {
      if (event.title) {
        alert(event.title);
      }
    }
  });

});

#calendar {
  width: 100%;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Full Calendar-->
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id='calendar'></div>