时间戳

首页 > 解决方案 > 如何在 vue js 中设置 v-calender 的样式？

javascript - 如何在 vue js 中设置 v-calender 的样式？

问题描述

我很难设置日历样式。我正在使用 vcalender vue 插件。我想更改日历的背景，但我的代码不起作用。这是我的代码。任何人都可以帮忙吗？非常感谢

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>

标签： javascriptvue.jsvcalendar

解决方案

'themeStyles' 似乎从来没有工作过。您可以通过覆盖其 css 来设置日历样式。它不在任何 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;
}

推荐阅读