Event Calendar
Huro ships with this nice and modern calendar UI. Only the markup and the CSS are provided. Therefore we do not make choices for you regarding the implementation and the technology you'd like to use it with.
<div class="event-calendar">
<div class="columns">
<!--Calendar-->
<div class="column is-12">
<div>
<div class="calendar-toolbar">
<h3 class="title is-4 is-inverted is-narrow title-desktop">
December 2021
</h3>
<h3 class="title is-4 is-inverted is-narrow title-mobile">
Today
</h3>
<div class="field has-addons">
<p class="control">
<button class="button h-button">
<span class="icon is-small">
<i class="fas fa-angle-left"></i>
</span>
<span>Prev</span>
</button>
</p>
<p class="control">
<button class="button h-button">
<span>Next</span>
<span class="icon is-small">
<i class="fas fa-angle-right"></i>
</span>
</button>
</p>
<p class="control">
<button class="button h-button is-primary raised">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>New</span>
</button>
</p>
</div>
</div>
<div class="calendar-box">
<ul class="days">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="dates">
<!--Cell-->
<li class="date-cell fade">
<span class="date">29</span>
</li>
<!--Cell-->
<li class="date-cell fade">
<span class="date">30</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">1</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">2</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">3</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">4</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">4</span>
<a class="calendar-event personal-event">
<b>7:30 pm</b> Dinner with Eva and friends
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">5</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">6</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">7</span>
<a class="calendar-event meeting">
<b>11:30 am</b> Project review with the team
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">8</span>
<a class="calendar-event meeting">
<b>10:30 am</b> Meeting with John Winsford
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">9</span>
</li>
<!--Cell-->
<li class="date-cell current today">
<span class="date">10</span>
<a class="calendar-event meeting">
<b>8:30 am</b> Sprint prototypes review
</a>
<a class="calendar-event meeting">
<b>10:30 am</b> Planning poker with the devs
</a>
<a class="calendar-event meeting">
<b>11:30 am</b> Call Abby in the central office
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">11</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">12</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">13</span>
<a class="calendar-event personal-event">
<b>12:30 pm</b> Lunch with Alexander and William
</a>
<a class="calendar-event meeting">
<b>3:45 pm</b> Marketing plan review with George
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">14</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">15</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">16</span>
<a class="calendar-event meeting">
<b>11:00 am</b> Review the latest prototypes with
Mike
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">17</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">18</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">19</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">20</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">21</span>
<a class="calendar-event generic-event">
<b>5:30 pm</b> Help Stella with her science project
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">22</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">23</span>
<a class="calendar-event generic-event">
<b>7:30 pm</b> Grab groceries that Anna ordered
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">24</span>
<a class="calendar-event meeting">
<b>9:30 am</b> Meeting a new lead from New York
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">25</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">26</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">27</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">28</span>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">29</span>
<a class="calendar-event generic-event">
<b>5:30 pm</b> Help Stella with her science project
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">30</span>
<a class="calendar-event generic-event">
<b>5:30 pm</b> Help Stella with her science project
</a>
</li>
<!--Cell-->
<li class="date-cell">
<span class="date">31</span>
</li>
<!--Cell-->
<li class="date-cell fade">
<span class="date">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
- Sun
- Mon
- Tue
- Wed
- Thu
- Fri
- Sat
- 29
- 30
- 1
- 2
- 3
- 4
- 4 7:30 pm Dinner with Eva and friends
- 5
- 6
- 7 11:30 am Project review with the team
- 8 10:30 am Meeting with John Winsford
- 9
- 10 8:30 am Sprint prototypes review 10:30 am Planning poker with the devs 11:30 am Call Abby in the central office
- 11
- 12
- 13 12:30 pm Lunch with Alexander and William 3:45 pm Marketing plan review with George
- 14
- 15
- 16 11:00 am Review the latest prototypes with Mike
- 17
- 18
- 19
- 20
- 21 5:30 pm Help Stella with her science project
- 22
- 23 7:30 pm Grab groceries that Anna ordered
- 24 9:30 am Meeting a new lead from New York
- 25
- 26
- 27
- 28
- 29 5:30 pm Help Stella with her science project
- 30 5:30 pm Help Stella with her science project
- 31
- 1