<!-- CONTROLLS CALENDAR -->
<div class="bcz-controller">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12">

        <div class="btn-group btn-group-full-fix" role="group" aria-label="Button group with nested dropdown">
            <button class="btn btn-info" type="button">
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>

            <button id="btnCalendarToggle" class="btn btn-info" type="button">
                <span> Março </span>
            </button>

            <button class="btn btn-info" type="button">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </button>

        </div>

    </div>
</div> <!-- ./ CONTROLLS CALENDAR -->

<!-- DAY CALENDAR -->
<div id="bcz-calendar-days" class="bcz-wrapper">

    <div class="bcz-heading">
        <div class="bcz-col bcz-0wc bcz-c1">
            <div class="bcz-day-header"> <span> DOM </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c2">
            <div class="bcz-day-header"> <span> SEG </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c3">
            <div class="bcz-day-header"> <span> TER </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c4">
            <div class="bcz-day-header"> <span> QUA </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c5">
            <div class="bcz-day-header"> <span> QUI </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c6">
            <div class="bcz-day-header"> <span> SEX </span> </div>
        </div>
        <div class="bcz-col bcz-0wc bcz-c7">
            <div class="bcz-day-header"> <span> SAB </span> </div>
        </div>
    </div>

    <div class="bcz-first-week">
        <div class="bcz-col bcz-1wc bcz-c1">
            <div class="bcz-day-header">
                <span class="bcz-not-month">  </span>
            </div>
        </div>
        <div class="bcz-col bcz-1wc bcz-c2">
            <div class="bcz-day-header">
                <span class="bcz-not-month">  </span>
            </div>
        </div>
        <div class="bcz-col bcz-1wc bcz-c3">
            <div class="bcz-day-header">
                <span class="bcz-not-month">  </span>
            </div>
        </div>
        <div class="bcz-col bcz-1wc bcz-c4">
            <div class="bcz-day-header">
                <span> 1 </span>
            </div>
        </div>
        <div class="bcz-col bcz-1wc bcz-c5 notification">
            <div class="bcz-day-header">
                <span> 2 </span>
                <span class="bcz-day-alert"> 1 </span>
            </div>

        </div>
        <div class="bcz-col bcz-1wc bcz-c6">
            <div class="bcz-day-header">
                <span> 3 </span>
            </div>
        </div>
        <div class="bcz-col bcz-1wc bcz-c7">
            <div class="bcz-day-header">
                <span> 4 </span>
            </div>
        </div>
    </div>

    <div class="bcz-second-week">
        <div class="bcz-col bcz-2wc bcz-c1">
            <div class="bcz-day-header">
                <span> 5 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c2 today">
            <div class="bcz-day-header">
                <span> 6 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c3">
            <div class="bcz-day-header">
                <span> 7 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c4">
            <div class="bcz-day-header">
                <span> 8 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c5">
            <div class="bcz-day-header">
                <span> 9 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c6">
            <div class="bcz-day-header">
                <span> 10 </span>
            </div>
        </div>
        <div class="bcz-col bcz-2wc bcz-c7">
            <div class="bcz-day-header">
                <span> 11 </span>
            </div>
        </div>
    </div>

    <div class="bcz-third-week">
        <div class="bcz-col bcz-3wc bcz-c1">
            <div class="bcz-day-header">
                <span> 12 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c2">
            <div class="bcz-day-header">
                <span> 13 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c3">
            <div class="bcz-day-header">
                <span> 14 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c4">
            <div class="bcz-day-header">
                <span> 15 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c5">
            <div class="bcz-day-header">
                <span> 16 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c6">
            <div class="bcz-day-header">
                <span> 17 </span>
            </div>
        </div>
        <div class="bcz-col bcz-3wc bcz-c7">
            <div class="bcz-day-header">
                <span> 18 </span>
            </div>
        </div>
    </div>

    <div class="bcz-fourth-week">
        <div class="bcz-col bcz-4wc bcz-c1">
            <div class="bcz-day-header">
                <span> 19 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c2">
            <div class="bcz-day-header">
                <span> 20 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c3">
            <div class="bcz-day-header">
                <span> 21 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c4">
            <div class="bcz-day-header">
                <span> 22 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c5">
            <div class="bcz-day-header">
                <span> 23 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c6">
            <div class="bcz-day-header">
                <span> 24 </span>
            </div>
        </div>
        <div class="bcz-col bcz-4wc bcz-c7">
            <div class="bcz-day-header">
                <span> 25 </span>
            </div>
        </div>
    </div>

    <div class="bcz-fifth-week">
        <div class="bcz-col bcz-5wc bcz-c1">
            <div class="bcz-day-header">
                <span> 26 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c2">
            <div class="bcz-day-header">
                <span> 27 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c3">
            <div class="bcz-day-header">
                <span> 28 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c4">
            <div class="bcz-day-header">
                <span> 29 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c5">
            <div class="bcz-day-header">
                <span> 30 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c6">
            <div class="bcz-day-header">
                <span> 31 </span>
            </div>
        </div>
        <div class="bcz-col bcz-5wc bcz-c7">
            <div class="bcz-day-header">
                <span class="bcz-not-month"> 1 </span>
            </div>
        </div>
    </div>

    <div class="bcz-footer">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
            Footer
        </div>
    </div>
</div> <!-- ./ DAY CALENDAR -->

<!-- MONTH CALENDAR -->
<div id="bcz-calendar-months" class="bcz-wrapper d-none">

    <div class="bcz-month">
        <div class="bcz-col bcz-1mln bcz-c1">
            <div class="bcz-month-header"> <span> Jan </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-1mln bcz-c2">
            <div class="bcz-month-header"> <span> Fev </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-1mln bcz-c3">
            <div class="bcz-month-header"> <span> Mar </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-1mln bcz-c4">
            <div class="bcz-month-header"> <span> Abr </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
    </div>

    <div class="bcz-month">
        <div class="bcz-col bcz-2mln bcz-c1">
            <div class="bcz-month-header"> <span> Mai </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-2mln bcz-c2">
            <div class="bcz-month-header"> <span> Jun </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-2mln bcz-c3">
            <div class="bcz-month-header"> <span> Jul </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-2mln bcz-c4">
            <div class="bcz-month-header"> <span> Ago </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
    </div>

    <div class="bcz-month">
        <div class="bcz-col bcz-3mln bcz-c1">
            <div class="bcz-month-header"> <span> Set </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-3mln bcz-c2">
            <div class="bcz-month-header"> <span> Out </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-3mln bcz-c3">
            <div class="bcz-month-header"> <span> Nov </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
        <div class="bcz-col bcz-3mln bcz-c4">
            <div class="bcz-month-header"> <span> Dez </span> </div>
            <div class="bcz-month-alert"> <span> </span> </div>
            <div class="bcz-month-footer"> <span> </span> </div>
        </div>
    </div>

    <div class="bcz-footer">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
            Footer
        </div>
    </div>