🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

Timeline Svelte Component

There is no specific Timeline Svelte component, you need to use core Timeline component.

Examples

Vertical Timeline

timeline-vertical.svelte
<script>
  import { Navbar, Page, BlockTitle } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Vertical Timeline" />
  <BlockTitle>Default</BlockTitle>
  <div class="timeline">
    <div class="timeline-item">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Some text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Another text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
          enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
          quos quis iure, aperiam pariatur?
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">One more text here</div>
      </div>
    </div>
  </div>
  <BlockTitle>Side By Side</BlockTitle>
  <div class="timeline timeline-sides">
    <div class="timeline-item">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Some text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Another text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Just plain text</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">One more text here</div>
      </div>
    </div>
  </div>
  <BlockTitle>Only Tablet Side By Side</BlockTitle>
  <div class="timeline medium-sides">
    <div class="timeline-item">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Some text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Another text goes here</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Just plain text</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">One more text here</div>
      </div>
    </div>
  </div>
  <BlockTitle>Forced Sides</BlockTitle>
  <div class="timeline timeline-sides">
    <div class="timeline-item timeline-item-right">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Some text goes here</div>
      </div>
    </div>
    <div class="timeline-item timeline-item-right">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Another text goes here</div>
      </div>
    </div>
    <div class="timeline-item timeline-item-left">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">Just plain text</div>
      </div>
    </div>
    <div class="timeline-item timeline-item-left">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">One more text here</div>
      </div>
    </div>
  </div>
  <BlockTitle>Rich Content</BlockTitle>
  <div class="timeline">
    <div class="timeline-item">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">
          <div class="timeline-item-time">12:56</div>
          <div class="timeline-item-title">Item Title</div>
          <div class="timeline-item-subtitle">Item Subtitle</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
            enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
            quos quis iure, aperiam pariatur?
          </div>
          <div class="timeline-item-time">15:07</div>
          <div class="timeline-item-title">Item Title</div>
          <div class="timeline-item-subtitle">Item Subtitle</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
            enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
            quos quis iure, aperiam pariatur?
          </div>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">
        <div class="timeline-item-inner">
          <div class="timeline-item-time">12:56</div>
          <div class="timeline-item-title">Item Title</div>
          <div class="timeline-item-subtitle">Item Subtitle</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
            enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
            quos quis iure, aperiam pariatur?
          </div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">15:07</div>
          <div class="timeline-item-title">Item Title</div>
          <div class="timeline-item-subtitle">Item Subtitle</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
            enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
            quos quis iure, aperiam pariatur?
          </div>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content card no-safe-areas">
        <div class="card-header">Card Header</div>
        <div class="card-content card-content-padding">Card Content</div>
        <div class="card-footer">Card Footer</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div
        class="timeline-item-content list links-list inset list-strong list-dividers-ios no-safe-areas"
      >
        <ul>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 3</a></li>
        </ul>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">25 <small>DEC</small></div>
      <div class="timeline-item-divider" />
      <div class="timeline-item-content">Plain text</div>
    </div>
  </div>
  <BlockTitle>Inside Content Block</BlockTitle>
  <div class="block block-strong">
    <div class="timeline">
      <div class="timeline-item">
        <div class="timeline-item-date">21 <small>DEC</small></div>
        <div class="timeline-item-divider" />
        <div class="timeline-item-content">
          <div class="timeline-item-inner">Some text goes here</div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">22 <small>DEC</small></div>
        <div class="timeline-item-divider" />
        <div class="timeline-item-content">
          <div class="timeline-item-inner">Another text goes here</div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">23 <small>DEC</small></div>
        <div class="timeline-item-divider" />
        <div class="timeline-item-content">
          <div class="timeline-item-inner">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro
            enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi
            quos quis iure, aperiam pariatur?
          </div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">24 <small>DEC</small></div>
        <div class="timeline-item-divider" />
        <div class="timeline-item-content">
          <div class="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
  </div>
</Page>

Horizontal Timeline

timeline-horizontal.svelte
<script>
  import { Navbar, Page } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Horizontal Timeline" />
  <div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-5">
    <div class="timeline-item">
      <div class="timeline-item-date">21 <small>DEC</small></div>
      <div class="timeline-item-content">
        <div class="timeline-item-inner">
          <div class="timeline-item-time">12:56</div>
          <div class="timeline-item-title">Title 1</div>
          <div class="timeline-item-subtitle">Subtitle 1</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
          </div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">13:15</div>
          <div class="timeline-item-title">Title 2</div>
          <div class="timeline-item-subtitle">Subtitle 2</div>
          <div class="timeline-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
          </div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">14:45</div>
          <div class="timeline-item-text">Do something</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">16:11</div>
          <div class="timeline-item-text">Do something else</div>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">22 <small>DEC</small></div>
      <div class="timeline-item-content">Plain text goes here</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">23 <small>DEC</small></div>
      <div class="timeline-item-content">
        <div class="card no-safe-areas">
          <div class="card-header">Card</div>
          <div class="card-content card-content-padding">Card Content</div>
          <div class="card-footer">Card Footer</div>
        </div>
        <div class="card no-safe-areas">
          <div class="card-content card-content-padding">Another Card Content</div>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">24 <small>DEC</small></div>
      <div class="timeline-item-content">
        <div class="list links-list inset list-strong list-dividers-ios no-safe-areas">
          <ul>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">25 <small>DEC</small></div>
      <div class="timeline-item-content">
        <div class="timeline-item-time">11:11</div>
        <div class="timeline-item-text">Task 1</div>
        <div class="timeline-item-time">12:33</div>
        <div class="timeline-item-text">Task 2</div>
        <div class="timeline-item-time">13:24</div>
        <div class="timeline-item-text">Task 3</div>
        <div class="timeline-item-time">14:55</div>
        <div class="timeline-item-text">Task 4</div>
        <div class="timeline-item-time">15:15</div>
        <div class="timeline-item-text">Task 5</div>
        <div class="timeline-item-time">16:54</div>
        <div class="timeline-item-text">Task 6</div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-item-date">26 <small>DEC</small></div>
      <div class="timeline-item-content">
        <div class="timeline-item-inner">
          <div class="timeline-item-time">11:11</div>
          <div class="timeline-item-text">Task 1</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">12:33</div>
          <div class="timeline-item-text">Task 2</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">13:24</div>
          <div class="timeline-item-text">Task 3</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">14:55</div>
          <div class="timeline-item-text">Task 4</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">15:15</div>
          <div class="timeline-item-text">Task 5</div>
        </div>
        <div class="timeline-item-inner">
          <div class="timeline-item-time">16:54</div>
          <div class="timeline-item-text">Task 6</div>
        </div>
      </div>
    </div>
  </div>
</Page>

Calendar Timeline

timeline-horizontal-calendar.svelte
<script>
  import { Navbar, Page } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Horizontal Timeline Calendar" />
  <div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-6">
    <div class="timeline-year">
      <div class="timeline-year-title"><span>2016</span></div>
      <div class="timeline-month">
        <div class="timeline-month-title"><span>December</span></div>
        <div class="timeline-item">
          <div class="timeline-item-date">20</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">21</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">22</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">23:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">23</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">24</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">25</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">26</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">27</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">28</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">21:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">29</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">30</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">21:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">31</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="timeline-year">
      <div class="timeline-year-title"><span>2017</span></div>
      <div class="timeline-month">
        <div class="timeline-month-title"><span>January</span></div>
        <div class="timeline-item">
          <div class="timeline-item-date">1</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">2</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">3</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">4</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">5</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">6</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">7</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">8</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">9</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">21:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">10</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">11</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">12</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">13</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">14</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">15</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">16</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">17</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">18</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">19</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">20</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">21</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">22</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">23</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">24</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">25</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">26</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">22:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">21:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">27</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">28</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">29</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">30</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">31</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
      </div>
      <div class="timeline-month">
        <div class="timeline-month-title"><span>February</span></div>
        <div class="timeline-item">
          <div class="timeline-item-date">1</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">2</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">3</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">4</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 4</div>
            <div class="timeline-item-time">23:00</div>
            <div class="timeline-item-text">Task 5</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">5</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">6</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">7</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">8</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">9</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">22:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">10</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">8:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">11</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 4</div>
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 5</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">12</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">23:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">13</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">14</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">15</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">16</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">22:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">17</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">10:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">23:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 4</div>
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 5</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">18</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">19</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">16:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">12:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">1:00</div>
            <div class="timeline-item-text">Task 4</div>
            <div class="timeline-item-time">9:00</div>
            <div class="timeline-item-text">Task 5</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">20</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">19:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">14:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">17:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">21</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">4:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">11:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">22</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">22:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 3</div>
            <div class="timeline-item-time">6:00</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">23</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">0:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">24</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">7:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">25</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">5:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">26</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">13:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">18:00</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">27</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">2:00</div>
            <div class="timeline-item-text">Task 1</div>
            <div class="timeline-item-time">20:00</div>
            <div class="timeline-item-text">Task 2</div>
            <div class="timeline-item-time">3:00</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
        </div>
        <div class="timeline-item">
          <div class="timeline-item-date">28</div>
          <div class="timeline-item-content">
            <div class="timeline-item-time">15:00</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Page>