How to style v-calender in vue js?

Question

I am having difficulty to style calendar.I am using vcalender vue plugin. I want to change background of the calender but my code is not working. Here is my code. Can anyone help?Many Thanks

HTML

      <v-calendar :theme-styles='themeStyles'>
    </v-calendar>
   
  

    </div>

JS

  <script src="node_modules/vue/dist/vue.js"></script>
    <script src='https://unpkg.com/v-calendar'></script>
    <script>
          
          var vm = new Vue({

            el:'#app',
           
        data :{
        
        working:'working',
        themeStyles: {
        wrapper: {
          background: 'linear-gradient(to bottom right, #ff5050, #ff66b3)',
          color: '#fafafa',
          border: '0',
          borderRadius: '5px',
          boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.13)'
    }
    
   }
  }

          });

    </script>

Answer 1

'themeStyles' never seem to work. You can style the calendar by overriding its css. It is not in any iframe.

.vc-container {
    width: 100%;
    border-color: transparent;
    background-color: transparent;
}
.vc-pane-container {
    background-color: '#ebebeb';
}
.vc-title {
    font-size: 16px;
    color: white;
    font-family: "GTWalsheimPro Medium", serif;
}