### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# 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>

### December 2021

### Today

- 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