Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

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>