如何设置 Vue V-Calendar.io 日期圆圈颜色和文本颜色的样式答案

【问题标题】：How to style Vue V-Calendar.io date circle color and text color如何设置 Vue V-Calendar.io 日期圆圈颜色和文本颜色的样式
【发布时间】：2021-05-28 15:32:13
【问题描述】：

v-calendar.io上有一个demo，正确的显示结果是日期“2018-01-01”应该有red背景和dark文字：

但我的没有。

我通过CDN导入Vue.js和v-calendar，页面格式为html。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs calendar</title>
</head>
<body>
    <div id='app'>
      <v-calendar :attributes='attrs'>
      </v-calendar>
    </div>
    <!-- 1. Link Vue Javascript -->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
    <script src='https://unpkg.com/v-calendar'></script>
    <!--3. Create the Vue instance-->
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            attrs: [
              {
                key: 'today',
                highlight: {
                  backgroundColor: '#ff8080',
                },
                // Just use a normal style
                contentStyle: {
                  color: '#fafafa',
                },
                dates: new Date(2018, 0, 1)
              },
            ],
          };
        },
      })
    </script>
  </body>
</html>

【问题讨论】：

您是否尝试过使用未来的日期？我认为过去的日期是由 v-calendar 组件自动格式化的。
@sandman 试过了，还是一样。

标签： javascript css vue.js vue-component v-calendar.io

【解决方案1】：

对于最大样式控制，请使用 style/contentStyle 或 class/contentClass。

`style`/`contentStyle`

style 是圆形样式，contentStyle 是文字样式

highlight: {
  style: {                     // Circle styles
    background: '#ff8080'
  },
  contentStyle: {              // Text styles
    color: 'black'
  }
}

`class`/`contentClass`

class 和 contentClass 的工作方式相同，但您创建的是类而不是内联样式

highlight: {
  class: 'date-circle',        // Circle class
  contentClass: 'date-text',   // Text class
}

_CSS

.date-circle {
  background: #ff8080;
}
.date-text {
  color: black;
}

这是一个使用两者的演示：

new Vue({
  el: '#app',
  data() {
    return {
      attrs: [
        {
          highlight: {
            style: {
              background: '#ff8080'
            },
            contentStyle: {
              color: 'black'
            }
          },
          dates: new Date(2018, 0, 1)
        },
        {
          highlight: {
            class: 'date-circle',
            contentClass: 'date-text',
          },
          dates: new Date(2018, 0, 8)
        },
      ],
    };
  },
})

.date-circle {
  background: #ff8080;
}
.date-text {
  color: black;
}

<div id="app">
  <v-calendar
    :attributes="attrs"
    :from-page="{ month: 1, year: 2018 }">
  </v-calendar>
</div>

<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/v-calendar'></script>

【讨论】：

style/contentStyle

class/contentClass

`style`/`contentStyle`

`class`/`contentClass`