V-Calander Vuejs Custom Hightlight

Question

I am using vue-calander to show events date. I want customize the calendar highlight.

Currently when I enable highlight:true. it draws circle on start and end date and spans over the range.

I want to customize how the events highlighted over the range.

What I want to achieve here is show 3 dots to each date on the range. if the events happening today then highlight with circle.

Is it possible. I need help here.

new Vue({
  el: '#app',
  data() {
    return {
      attrs: [
        {
          dot: true,  
          highlight: true,
          dates: [{start:new Date(2023, 10, 12),end:new Date(2023, 10, 20)}],
         }
      ],
    };
  },
})

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

<div id="app">
  <v-calendar
    :attributes="attrs"
    :from-page="{ month: 11, year: 2023 }">
  </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>

Answer 1

This code will highlight the Today tag:

.vc-day.is-today .vc-highlight {
  background-color: yellow !important;
  border-radius: 50% !important;
}

This code will add two dots around one exist dot:

.vc-dots .vc-dot {
  position: relative;
}
.vc-dots .vc-dot:before,
.vc-dots .vc-dot:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
}
.vc-dots .vc-dot:before {
    left: 8px;
}
.vc-dots .vc-dot:after {
    right: 8px;
}

here is the screenshot:

here is the code on codepen: https://codepen.io/hayatolgheib/pen/qBgPBvP?editors=0110

let me know if you have any question