JSFiddle - React, Tailwind, and code Playground

by j2FunOnly

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div id="show">
    <span v-if="current">
      {{current.lesson}} {{current.t}}  {{current.h2 | two}}:{{current.m2 | two}} осталось {{current.time | formatTime}}
    </span>
    <span v-else>
      сейчас нет событий
    </span>
  </div>
  <div id='Lessontimer_time2'>
    <div v-for="item in schedule"
      v-if="item.lesson !== 'Перемена'"
      :id="`k${item.lesid}`"
      :key="item.lesid"
      :style="item.lesid === current.lesid ? 'backgroundColor: #960505' : ''"
    >
      {{item.lesson}} c {{item.h | two}}:{{item.m | two}} по {{item.h2 | two}}:{{item.m2 | two}}
      <br>
    </div>
  </div>
</div>
<script type="text/javascript">
  const schedule = [
    { t: "Занятия завершены",     h: 0,  m: 0,  h2: 7, m2: 00,  lesson: 'Конец дня', lesid: 1 },
    { t: "До начала 1 урока",     h: 7,  m: 0,  h2: 8, m2: 00,  lesson: 'Перемена',  lesid: 2 },
    { t: "До окончания 1 урока",  h: 8,  m: 0,  h2: 8, m2: 45,  lesson: '1 Урок',    lesid: 3 },
    { t: "До начала 2 урока",     h: 8,  m: 45, h2: 8, m2: 55,  lesson: 'Перемена',  lesid: 4 },
    { t: "До окончания 2 урока",  h: 8,  m: 55, h2: 9, m2: 40,  lesson: '2 Урок',    lesid: 5 },
    { t: "До начала 3 урока",     h: 9,  m: 40, h2: 10, m2: 05, lesson: 'Перемена',  lesid: 6 },
    { t: "До окончания 3 урока",  h: 10, m: 5,  h2: 10, m2: 50, lesson: '3 Урок',    lesid: 7 },
    { t: "До начала 4 урока",     h: 10, m: 50, h2: 11, m2: 15, lesson: 'Перемена',  lesid: 8 },
    { t: "До окончания 4 урока",  h: 11, m: 15, h2: 12, m2: 00, lesson: '4 Урок',    lesid: 9 },
    { t: "До начала 5 урока",     h: 12, m: 0,  h2: 12, m2: 25, lesson: 'Перемена',  lesid: 10 },
    { t: "До окончания 5 урока",  h: 12, m: 25, h2: 13, m2: 10, lesson: '5 Урок',    lesid: 11 },
    { t: "До начала 6 урока",     h: 13, m: 10, h2: 13, m2: 20, lesson: 'Перемена',  lesid: 12 },
    { t: "До окончания 6 урока",  h: 13, m: 20, h2: 14, m2: 05, lesson: '6 Урок',    lesid: 13 },
...