Question

我注意到在Fullcalendar中，如果我使用“jquery ui”主题，则议程周的第一行背景较浅（#F8F8F8 vs #EEEEEE）。

这是我的剧本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet">
  <script src="jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
  <script>
    var calendar;
    $(function() {
      calendar = $('#calendar').fullCalendar({
        themeSystem: 'jquery-ui',
        eventTextColor: '#000000',
        themeButtonIcons: false,
        header: {
          left: 'month agendaWeek agendaDay',
          center: 'prev title next',
          right: 'today'
        },
        defaultView: 'agendaWeek',
        minTime: '07:00:00',
        maxTime: '19:00:00',
        slotEventOverlap: true,
        editable: false,
        eventLimit: true
      });
    });
  </script>
</head>

<body>
  <div id='calendar'></div>
</body>

</html>

显然我想要四处都有相同的颜色。有什么建议？感谢。

Answer 1

使单元格背景颜色！重要

.fc-unthemed .fc-content，.fc-unthemed .fc-divider，.fc-unthemed .fc-list-heading td，.fc-unthemed .fc-list-view，.fc-unthemed .fc -popover，.fc-unthemed .fc-row，.fc-unthemed tbody，.fc-unthemed td，.fc-unthemed th，.fc-unthemed thead { background-color：＃F8F8F8！important; }

Answer 2

如果你深入了解css，你可以看到这种风格：

.ui-widget-content {
  border: 1px solid #dddddd;
  /* the lighter background comes from the this rule */
  background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x;

  color: #362b36;
}

（打开完整尺寸的图片）

所以，只需将其设置为您想要的任何内容，例如：

＆＃13;

.fc-time-grid .ui-widget-content {
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet">
  <script src="jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
  <script>
    var calendar;
    $(function() {
      calendar = $('#calendar').fullCalendar({
        themeSystem: 'jquery-ui',
        eventTextColor: '#000000',
        themeButtonIcons: false,
        header: {
          left: 'month agendaWeek agendaDay',
          center: 'prev title next',
          right: 'today'
        },
        defaultView: 'agendaWeek',
        minTime: '07:00:00',
        maxTime: '19:00:00',
        slotEventOverlap: true,
        editable: false,
        eventLimit: true
      });
    });
  </script>
</head>

<body>
  <div id='calendar'></div>
</body>

</html>

＆＃13;

Fullcalendar奇怪的显示问题

2 个答案: