<template>
<svg style="width: 100%" viewBox="0 0 800 400">
<!-- выходные и предпраздничные -->
<g :width="width" :height="height">
<rect v-for="day in calendarData" :x="day.x-day1*0.5" :y="0" :width="day1" :height="height" :class="day.type" :key="day.x"/>
</g>
<!-- обед -->
<g :width="width" :height="height">
<rect :x="0" :y="(13 - hourMM.min + 1)*hour1" :width="width" :height="hour1" class="dinner"/>
</g>
<!-- линии часов -->
<g :width="width" :height="height">
<line v-for="hour in hours" :y1="hour.y" x1="1" :y2="hour.y" x2="800" class="hour" :key="hour.y"/>
</g>
<g :width="width" :height="height">
<line v-for="line in dayBorders" :y1="line" x1="1" :y2="line" x2="800" class="day-border" :key="line"/>
</g>
<!-- метки дней и часов -->
<g :width="width" :height="height">
<text v-for="day in days" text-anchor="middle" :y="14" :x="day.x" :key="day.x">{{day.text}}</text>
</g>
<g :width="width" :height="height">
<text v-for="hour in hours" :y="hour.y-3" x="3" :key="hour.y">{{hour.text}}</text>
</g>
<!-- данные -->
<g :width="width" :height="height">
<rect v-for="line in displayedData" :x="line.x1-day1*0.32" :y="line.y1" :width="day1*0.64" :height="line.y2-line.y1" class="data" :key="line.x1"/>
</g>
<!---->
</svg>
</template>