<div class="app-calendar">
    <div class="calendar-header">
        <ion-icon name="arrow-round-back" (click)="lastMonth()"></ion-icon>
        <span>{{ year }}-{{ month + 1 }}-{{ day }}</span>
        <ion-icon name="arrow-round-forward" (click)="nextMonth()"></ion-icon>
    </div>
    <div class="calendar-flex">
        <div class="calendar-row">
            <div class="calendar-col" *ngFor="let week of calendarUtil.weeks">
                <div class="calendar-week">
                    {{ week }}
                </div>
            </div>
        </div>
        <div class="calendar-content" [ngStyle]="{'max-height': (isMonthMode ? '276px' : '66px')}">
            <div class="calendar-flex">
                <div class="calendar-row" *ngFor="let items of content">
                    <div class="calendar-col" *ngFor="let item of items">
                        <div class="calendar-day" [ngClass]="getDayClass(item, month)" (click)="activeDay(item, item.month)">
                            <div style="margin-bottom: 1px;">{{ (calendarUtil.day === item.day && calendarUtil.month === item.month) ? '今' : item.day }}</div>
                            <div [ngClass]="{ 'have-data': isData(item) }"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="calendar-shrink" (click)="showModeChange()">
                <ion-icon [name]="isMonthMode ? 'arrow-up' : 'arrow-down'" style="font-size: 20px;"></ion-icon>
            </div> -->
        </div>
    </div>
</div>