活动高度,例如使用vue-cal的Google日历

时间:2019-05-21 17:23:06

标签: vue.js

我正在使用vue-cal显示事件。如果事件的持续时间接近零(例如5-10分钟),则它会在日历中显示为一小行。我希望事件以完全可见的标题显示。

UPD:

new Vue({
  components: { 'vue-cal': vuecal },
  el: '#app',
  data: () => ({
    events: [
      {
        start: '2018-11-19 10:35',
        end: '2018-11-19 10:45',
        title: 'Doctor appointment'
      },
      {
        start: '2018-11-19 18:30',
        end: '2018-11-19 19:15',
        title: 'Dentist appointment'
      }
    ]
  })
})
#app {
  margin: 30px auto;
  max-width: 580px;
  height: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-cal"></script>
<link href="https://unpkg.com/vue-cal/dist/vuecal.css" rel="stylesheet">

<div id="app">
  <vue-cal
    :events="events"
    selected-date="2018-11-19"
    :time-from="10 * 60"
    hide-weekends
    events-count-on-year-view
    events-on-month-view="short">
  </vue-cal>
</div>

查看事件,标题未完全显示。

0 个答案:

没有答案