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

标签 javascript html css twitter-bootstrap-3 fullcalendar

我正在处理完整的日历，为我的客户创建一个易于查看的良好时间表。现在我尝试使每个事件都有不同的颜色，因为我使用代码在每个页面加载中生成随机颜色，但现在的问题是边框颜色和背景颜色不相等。它们不相等，因为我还用边框颜色添加了随机颜色。但是，当我尝试将 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>

最佳答案

您可以在 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>

关于javascript - 在完整日历中使用随机颜色生成器使背景颜色等于边框颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45047883/

上一篇：javascript - 使用 Knockout.js 添加动态 Material 设计组件

下一篇：html - 伪元素的 z-index 问题

相关文章：

html - 悬停干扰文本标题的图像效果

javascript - 从窗口滚动事件中调用窗口大小调整事件中的函数？

javascript - Webstorm Node.js远程调试不会跳到断点

javascript - 通过鼠标单击场景来模拟 2d js Canvas 上的物理 3d 球 throw

javascript - 客户端网站可达性测试

html - CSS 用于响应式侧边栏和主要内容？

html - 特定字体以某种方式禁止 Webkit 浏览器中的仿斜体

javascript - 指定第二个默认参数 Javascript

php - 我如何将 CSS 规则应用到 Wordpress 插件

javascript - 使用 Bootstrap 4 进行全宽扩展的可扩展网格

©2024 IT工具网  联系我们