如何使用element-ui日历生成类似Google日历的时间表

Question

我正在使用Django创建页面。要求之一是使用element-ui calender模块呈现时间表页面。例如，backand提供几个date_plans数据（日期类型）作为列表。我想通过将单元格背景更改为不同的颜色来在日历页面的指定单元格中呈现这些日期数据。我现在穿过障碍物

日历页面已经渲染

<div id="app">
<el-calendar>
    <template slot="dateCell"
    slot-scope="{date, data}">
        <p>hhhh</p>
  </template>
</el-calendar>
</div>
<script>
  var calendar = new Vue({
      el:'#app',
      data:{
          value:new Date(),
      }
  })
</script>

def calendar(request):
    _,c,_ = login_profile(request)
    plans_recent = c.interaction_summary().get('plans_recent','')
    return render(request,
                  'crm/calendar.html',
                  {
                      'dates':[p.date_plan for p in plans_recent],
                  })

plans_recent返回一个查询集，其中的对象包含date_plan和其他字段

我希望：例如，日期列表是[2019-9-27，2019-10-09，....]。由element-ui日历呈现的列表中日期的单元格具有不同的背景色 '''