Search code examples
javascriptcssvue.jsvue-componentv-calendar.io

How to style Vue V-Calendar.io date circle color and text color

There is a demo on v-calendar.io, the correct display result is that the date "2018-01-01" should have a red background and dark text:


But mine does not.

I import Vue.js and v-calendar via CDN, and the page's format is html.

The full code is following:

<!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>
Solution

  • For max style control use style/contentStyle or class/contentClass.

    style/contentStyle

    style is for the circle style and contentStyle is for the text style

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

    class/contentClass

    class and contentClass work the same way, but you create classes instead of inline styles

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

    CSS

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

    Here's a demo using both:

    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://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>
<script src="https://unpkg.com/v-calendar"></script>