# 匯出PDF 程式碼 11/24

### export.component.html

<div class="body-content">
  <div class="left">
    <input type="checkbox" name="" id="sideMenu-active">
    <div class="sideMenu">
      <label for="sideMenu-active" class="close">
        <i class="material-icons">east</i>
      </label>
      <div class="sideMenu__content">
        <div class="sideMenu__content__subscribe" routerLink="/add-subscribe">
          <i class="material-icons">
            bookmarks
          </i>
          <span>新增訂閱</span>
        </div>
        <div class="sideMenu__content__userTeach" routerLink="/user-teach">
          <i class="material-icons">
            help_outline
          </i>
          <span>使用說明</span>
        </div>
        <ul>
          <li>
            <div class="sideMenu__content__title active">
              <div class="title">
                <i class="material-icons">
                  library_add
                </i>
                <h1>行程管理</h1>
              </div>
              <div class="form-group row">
                <i class="material-icons sideMenu__content__arrow" (click)="isOpen = !isOpen"
                  [attr.aria-expanded]="!isOpen" aria-controls="collapseBasic">
                  arrow_left
                </i>
              </div>
            </div>
            <div id="collapseBasic" [collapse]="isOpen" [isAnimated]="true">
              <ul class="sideMenu__content__list">
                <li>
                  <div class="sideMenu__content__add" routerLink="/add-schedule">
                    <span>新增行程</span>
                  </div>
                  <div class="sideMenu__content__add" routerLink="/meeting">
                    <span>查看會議</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="sideMenu__content__title active">
              <div class="title">
                <i class="material-icons">
                  open_in_new
                </i>
                <h1>匯出入管理</h1>
              </div>
              <div class="form-group row">
                <i class="material-icons sideMenu__content__arrow" (click)="isTrue = !isTrue"
                  [attr.aria-expanded]="!isTrue" aria-controls="collapseBasic">
                  arrow_left
                </i>
              </div>
            </div>
            <div id="collapseBasic" [collapse]="isTrue" [isAnimated]="true">
              <ul class="sideMenu__content__list">
                <li *ngIf="staff === 'true'">
                  <div class="sideMenu__content__add" routerLink="/official-add">
                    <span>匯出修改</span>
                  </div>
                  <div class="sideMenu__content__add" routerLink="/official-change">
                    <span>匯入建立</span>
                  </div>
                </li>
                <li>
                  <div class="sideMenu__content__add" routerLink="/opendata">
                    <span>OpenData</span>
                  </div>
                  <div class="sideMenu__content__add" routerLink="/export" *ngIf="staff === 'true'">
                    <span>匯出PDF</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <label for="sideMenu-active" class="open">
      <i class="material-icons">menu</i>
    </label>
  </div>
  <div class="right">
    <app-navbar></app-navbar>
    <main #main>
      <article>
        <section class="container">
          <div class="item-categories">
            <div class="item-categories__title active">
              <div class="name">
                <i class="material-icons">
                  picture_as_pdf
                </i>
                <span>匯出學校行事曆</span>
              </div>
            </div>
            <div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
              <div class="year">
                <span>學年度</span>
                <select class="form-control" [(ngModel)]="setYear" (change)="changeYear()">
                  <option *ngFor="let year of year">{{year}}</option>
                </select>
              </div>
            </div>
          </div>
        </section>
        <section class="body">
          <ul class="event-list" #screen id="screen">
            <div class="event-list__header">
              <h1>國立臺北商業大學{{setYear}}學年度第1學期行事曆</h1>
            </div>
            <div class="event-list__calendarName_all">
              <div class="event-list__calendarName_empty"></div>
              <div class="event-list__calendarName_empty2"></div>
              <div class="event-list__calendarName">日間部行事摘要</div>
              <div class="event-list__calendarName_nd">進修部行事摘要</div>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">8月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate8">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_8">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_8_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">9月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate9">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_9">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_9_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>

            <div class="event-list__phase">
              <div class="event-list__month">10月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate10">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_10">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_10_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">11月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate11">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_11">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_11_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">12月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate12">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_12">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_12_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">1月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate1">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_1">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_1_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>

            <div class="event-list__header">
              <h1>國立臺北商業大學{{setYear}}學年度第2學期行事曆</h1>
            </div>
            <div class="event-list__calendarName_all">
              <div class="event-list__calendarName_empty"></div>
              <div class="event-list__calendarName_empty2"></div>
              <div class="event-list__calendarName">日間部行事摘要</div>
              <div class="event-list__calendarName_nd">進修部行事摘要</div>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">2月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate2">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_2">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_2_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">3月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate3">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_3">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_3_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">4月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate4">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_4">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_4_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">5月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate5">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_5">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_5_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">6月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate6">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_6">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_6_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
            <div class="event-list__phase">
              <div class="event-list__month">7月</div>
              <div class="event-list__datapicker">
                <full-calendar #header [header]=false [plugins]="calendarPlugins" [defaultDate]="setDate7">
                </full-calendar>
              </div>
              <li *ngFor="let calendar of eventMonth_7">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
              <li *ngFor="let calendar of eventMonth_7_nd">
                <div class="event-list__content">
                  <div class="event-list__title" *ngFor="let event of calendar.events">
                    <span class="date">{{event.startMonth}} / {{event.startDay}}</span>
                    <span>{{event.title}}</span>
                  </div>
                </div>
              </li>
            </div>
          </ul>
          <div class="subBtn" (click)="savePdf(main)">
            <i class="material-icons">
              download
            </i>
            <span>下載</span>
          </div>
        </section>
        <div id="nodownload">
          <img #canvas>
          <a #downloadLink></a>
        </div>
      </article>
    </main>
  </div>
</div>

### export.component.scss

@import '../../styles.scss';

@media screen {
  .body-content {
    .left {
      .sideMenu {
        width           : 270px;
        transform       : translateX(-270px);
        position        : absolute;
        top             : 0;
        background-color: $color_table-header;
        bottom          : 0;
      }

      #sideMenu-active,
      .close,
      .open {
        display: none;
      }
    }

    .right {
      width: 100%;

      article {
        padding-top : $height_header;
        padding-left: $content-size_left-right*2 ;

        section.container{
          width           : 90%;
          margin          : $content-size_left-right auto;
          margin-top      : $content-size_top-bottom*4;
          padding         : $content-size_left-right;
          background-color: $color_white;
          box-shadow      : $box-shadow--container;

          .item-categories {
            display     : flex;
            align-items : center;
            width       : 70%;
            margin-left : auto;
            margin-right: auto;

            i {
              color : $color_icon;
              cursor: pointer;
            }
  
            &__title {
              display        : flex;
              align-items    : center;
              justify-content: space-between;
              padding        : $content-size_left-right/1.5 0;
              font-size      : 1.2rem;
  
              &:hover,
              &.active {
                .item-categories__arrow {
                  transform: rotate(-90deg);
                }
              }
  
              .name {
                display    : flex;
                align-items: center;
  
                span {
                  margin-left: $content-size_left-right/2;
                }
              }
            }
              .year{
                display    : flex;
                align-items: center;
                margin-left: $content-size_left-right*3;

                span {
                  margin-left: $content-size_left-right;
                }

                select {
                  width      : 200px;
                  margin-left: $content-size_left-right;
                }
              }
            }
  
            &__arrow {
              transition: $transition_short;
            }
  
            &__list {
              display  : flex;
              flex-flow: column;
              padding  : $content-size_left-right/2 0;
  
              li {
                display    : inline-flex;
                align-items: center;
                padding    : 0;
                margin-top : $content-size_top-bottom/2;
                cursor     : pointer;
              }
            }
  
            h3 {
              width         : 37%;
              margin-left   : auto;
              font-size     : 13px;
              font-weight   : 600;
              color         : $color_text;
              letter-spacing: 1px;
              cursor        : pointer;
            }
  
            h3:hover {
              color        : $color_accent;
              border-bottom: $color_accent 1px solid;
            }
        }

        section.body {
          margin          : $content-size_left-right;
          margin-top      : $content-size_top-bottom*4;
          padding         : $content-size_left-right;
          background-color: $color_white;
          box-shadow      : $box-shadow--container;

          .item-categories {
            display: inline-block;

            i {
              color : $color_icon;
              cursor: pointer;
            }
  
  
            &__title {
              display        : flex;
              align-items    : center;
              justify-content: space-between;
              padding        : $content-size_left-right/1.5 0;
              font-size      : 1.2rem;
  
              &:hover,
              &.active {
                .item-categories__arrow {
                  transform: rotate(-90deg);
                }
              }
  
              .name {
                display    : flex;
                align-items: center;
                float: left;
  
                span {
                  margin-left: $content-size_left-right/2;
                }
              }

              .year{
                display : flex;
                align-items: center;

                span {
                  display: flex;
                  margin-left: $content-size_left-right;
                }

                select {
                  display: flex;
                  margin-left: $content-size_left-right;
                }
              }
            }
  
            &__arrow {
              transition: $transition_short;
            }
  
            &__list {
              display  : flex;
              flex-flow: column;
              padding  : $content-size_left-right/2 0;
  
              li {
                display    : inline-flex;
                align-items: center;
                padding    : 0;
                margin-top : $content-size_top-bottom/2;
                cursor     : pointer;
              }
            }
  
            h3 {
              width         : 37%;
              margin-left   : auto;
              font-size     : 13px;
              font-weight   : 600;
              color         : $color_text;
              letter-spacing: 1px;
              cursor        : pointer;
            }
  
            h3:hover {
              color        : $color_accent;
              border-bottom: $color_accent 1px solid;
            }
          }

          .header {
            display: none;
          }

          .event-list {

            &__header {
              color         : $color_text;
              font-size     : 1rem;
              font-weight   : 600;
              letter-spacing: 1px;
              padding       : $content-size_top-bottom $content-size_left-right/2;
              text-align: center;
            }

            li {
              display    : flex;
              flex-flow  : row nowrap;
              line-height: 1;
              max-width:355.88px;
              border-left: 1.5px solid $color_text;

              &:not(.event-list__header):not(.event-list__phase) {
                min-height   : 5rem;
                border-bottom: $color_border solid 1px;
              }

              >div {
                padding: $content-size_top-bottom $content-size_left-right;
              }

              h1 {
                width     : 100%;
                text-align: center;
              }
            }

            &__month {
              font-size: 16px;
              height: max-content;
              display : inline-block;
              text-align : center;
              padding: $content-size_top-bottom*2 $content-size_left-right;
            }

            &__datapicker{
              border-left:1.5px solid $color_text;
              display: center;

              .full-calendar{
                box-shadow: 0px 0px 0px ;
              }
            }            

            &__content {
              display: inline-block;
              text-align: left;
            }

            &__title {
              display  : inline-block;
              font-size: 13px;
              padding: $content-size_top-bottom/2 $content-size_left-right/4;

              span {
                font-size  : 14px;
                margin-left: $content-size_left-right/4;
              }

              span.date {
                margin-left: $content-size_left-right/2;
              }
            }

            &__calendarName_all{
              display: grid;
              grid-template-columns: 80px 1fr 1fr 1fr;
              text-align: center;
              grid-gap: 1.5px;
              background-color: $color_text;
              padding: 1.5px;

              >div {
                background-color: #ffffff;
              }
              
              .calendarName_empty{
                display: inline-block;
                text-align   : center;
                font-size    : 12px;
                font-weight: 600; 
              }

              .calendarName_empty2{
                display: inline-block;
                text-align   : center;
                font-size    : 12px;
                font-weight: 600; 
              }

              .calendarName {
                display: inline-block;
                text-align   : center;
                font-size    : 12px;
                font-weight: 600; 
              }

              .calendarName_nd {
                display:inline-block ;
                  text-align   : center;
                  font-size    : 12px;
                  font-weight: 600;            
              }
            }


            &__phase {
              display: grid !important;
              grid-template-columns: 80px 1fr 1fr 1fr;
              text-align: left;
              border-top: 1px solid $color_text;
              border-bottom: 1px solid $color_text;
              border-left: 1.5px solid $color_text;
              border-right: 1.5px solid $color_text;
            }
          }

          .subBtn {
            display         : flex;
            align-items     : center;
            width           : 10%;
            background-color: $color_accent;
            border-radius   : 5px;
            padding         : $content-size_top-bottom/2 $content-size_left-right/2;
            justify-content : center;
            color           : white;
            letter-spacing  : 1px;
            margin-top      : $content-size_top-bottom*3;
            margin-left     : auto;
            cursor          : pointer;

            i {
              color: white;
            }

            span {
              margin-left: $content-size_left-right/2;
            }
          }
        }

        #nodownload {
          display: none;
        }

      }
    }
  }

}

@media screen and (max-width:480px) {
  .body-content {
    display: flex;
    height : 100vh;

    .left {
      .sideMenu {
        width         : 270px;
        display       : flex;
        flex-direction: column;
        padding       : 50px 0;
        position      : fixed;
        transform     : translateX(-100%);
        transition    : 0.4s;
        z-index       : 1000;

        label.close {
          display    : block;
          width      : 20px;
          height     : 40px;
          position   : fixed;
          right      : 10%;
          top        : 3%;
          line-height: 40px;
          text-align : center;

          i {
            cursor     : pointer;
            color      : $color_text;
            font-weight: 600;
          }
        }

        &__content {
          overflow: auto;
          padding : $content-size_top-bottom $content-size_left-right;

          &__list {
            display  : flex;
            flex-flow: column;
            padding  : $content-size_left-right/2 0;

            li {
              display    : inline-flex;
              align-items: center;
              padding    : $content-size_left-right/2 0;
              cursor     : pointer;
            }
          }

          &__item {
            flex       : auto;
            margin-left: $content-size_left-right/2;
          }

          &__status {
            width        : 10px;
            height       : 10px;
            border-radius: 50%;
          }

          &__title {
            display        : flex;
            align-items    : center;
            justify-content: space-between;
            padding        : $content-size_left-right/1.5 0;
            border-bottom  : $color_border solid 1px;
            font-size      : 1.2rem;
            margin-top     : $content-size_top-bottom;

            &:hover,
            &.active {
              .sideMenu__content__arrow {
                transform: rotate(-90deg);
              }
            }

            .title {
              display    : flex;
              align-items: center;

              h1 {
                margin-left: $content-size_left-right/2;
              }
            }
          }

          &__arrow {
            transition: $transition_short;
          }

          &__subscribe,
          &__userTeach {
            display         : flex;
            align-items     : center;
            width           : 100%;
            justify-content : center;
            padding         : $content-size_top-bottom $content-size_left-right;
            background-color: $color_accent;
            border-radius   : 5px;
            color           : white;
            letter-spacing  : 1px;

            i {
              color: white;
            }

            span {
              margin-left: $content-size_left-right/2;
            }
          }

          &__userTeach {
            margin-top: $content-size_top-bottom/2;
          }

          &__add {
            display         : flex;
            align-items     : center;
            width           : 48%;
            justify-content : center;
            padding         : $content-size_top-bottom $content-size_left-right;
            background-color: $color_accent;
            border-radius   : 5px;
            color           : white;
            letter-spacing  : 1px;
          }

          &__add:nth-child(2) {
            margin-left: 4%;
          }
        }
      }

      #sideMenu-active:checked+.sideMenu {
        transform: translateX(0);
      }

      label.open {
        display    : block;
        width      : 20px;
        height     : 40px;
        position   : fixed;
        left       : 10%;
        top        : 3%;
        line-height: 40px;
        text-align : center;
        z-index    : 999;

        i {
          color : $color_accent;
          cursor: pointer;
        }
      }
    }

    .right {

      .aside {
        display: none;
      }

      article {
        padding: $height_header $content-size_left-right;

        section.container {
          width     : 100%;
          margin    : 0;
          margin-top: $content-size_top-bottom*3;
          padding   : $content-size_top-bottom*2 $content-size_top-bottom;

          .header {
            font-size: 14px;
            display  : block;
            height   : 200px;
            border   : 1px solid $color_border;
            padding  : $content-size_top-bottom $content-size_left-right;

            .item-categories {

              i {
                color : $color_icon;
                cursor: pointer;
              }

              &__title {
                display        : flex;
                align-items    : center;
                justify-content: space-between;
                padding        : $content-size_left-right/1.5 0;
                border-bottom  : $color_border solid 1px;
                font-size      : 1.2rem;

                &:hover,
                &.active {
                  .item-categories__arrow {
                    transform: rotate(-90deg);
                  }
                }

                .name {
                  display    : flex;
                  align-items: center;

                  span {
                    margin-left: $content-size_left-right/2;
                  }
                }
              }

              &__arrow {
                transition: $transition_short;
              }

              &__list {
                display  : flex;
                flex-flow: column;
                height   : 100px;
                overflow : auto;

                li {
                  display    : inline-flex;
                  align-items: center;
                  cursor     : pointer;
                  margin-top : $content-size_top-bottom/2;
                }
              }

              h3 {
                width         : 37%;
                margin-left   : auto;
                font-size     : 13px;
                font-weight   : 600;
                color         : $color_text;
                letter-spacing: 1px;
                cursor        : pointer;
              }

              h3:hover {
                color        : $color_accent;
                border-bottom: $color_accent 1px solid;
              }


            }

            .year {
              display    : flex;
              align-items: center;

              select {
                margin-left: $content-size_left-right/2;
              }

              span {
                width: 80px;
              }
            }
          }

          .event-list {
            margin-top: $content-size_top-bottom;

            &__header {
              font-size: 11px;
              padding  : $content-size_top-bottom/2;
            }

            &__phase {
              font-size: 11px;
            }

            &__title,
            &__content,
            &__date {
              padding: $content-size_top-bottom/2 $content-size_left-right/4;
            }

            &__title {
              flex: 1.5;
            }

            &__content {
              flex: 2;
            }

            &__date {
              flex: 1;
            }
          }

          .subBtn {
            width: 90px;
          }
        }
      }
    }
  }
}

### export.component.ts

import { EventService } from './../services/event.service';
import { CalendarService } from './../services/calendar.service';
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';
import { FullCalendarComponent } from '@fullcalendar/angular';

import dayGridPlugin from '@fullcalendar/daygrid';

@Component({
  selector: 'app-export',
  templateUrl: './export.component.html',
  styleUrls: ['./export.component.scss']
})

export class ExportComponent implements OnInit {

  isCollapsed = false;
  isTrue = false;
  isOpen = false;
  openCalendar = [];
  allEvents = [];
  year = [];
  staff = localStorage.getItem('staff');
  setYear = new Date().getFullYear() - 1911;
  showTitle = false;

  eventMonth_1 = [];
  eventMonth_2 = [];
  eventMonth_3 = [];
  eventMonth_4 = [];
  eventMonth_5 = [];
  eventMonth_6 = [];
  eventMonth_7 = [];
  eventMonth_8 = [];
  eventMonth_9 = [];
  eventMonth_10 = [];
  eventMonth_11 = [];
  eventMonth_12 = [];

  eventMonth_1_nd = [];
  eventMonth_2_nd = [];
  eventMonth_3_nd = [];
  eventMonth_4_nd = [];
  eventMonth_5_nd = [];
  eventMonth_6_nd = [];
  eventMonth_7_nd = [];
  eventMonth_8_nd = [];
  eventMonth_9_nd = [];
  eventMonth_10_nd = [];
  eventMonth_11_nd = [];
  eventMonth_12_nd = [];

  @ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template
  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;

  constructor(
    private calendarService: CalendarService,
    private eventService: EventService
  ) { }

  calendarPlugins = [dayGridPlugin];
  setDate8 = '2020-08-01';
  setDate9 = '2020-09-01';
  setDate10 = '2020-10-01';
  setDate11 = '2020-11-01';
  setDate12 = '2020-12-01';
  setDate1 = '2020-01-01';
  setDate2 = '2020-02-01';
  setDate3 = '2020-03-01';
  setDate4 = '2020-04-01';
  setDate5 = '2020-05-01';
  setDate6 = '2020-06-01';
  setDate7 = '2020-07-01';

  ngOnInit(): void {
    this.year.push(this.setYear);
    this.calendarService.getCalendar().subscribe(
      data => {
        data.forEach(calendar => {
          this.openCalendar.push({
            id: calendar.id, name: calendar.name, display: calendar.display,
            color: calendar.color //isChecked: false
          });
        });
      }
    );

    this.eventService.getEvents().subscribe(
      data => {
        data.forEach(event => {
          this.allEvents.push({
            id: event.id, title: event.title, description: event.description, startDate: event.startAt.substr(0, 10),
            calendars: event.eventinvitecalendarSet, startMonth: event.startAt.substr(5, 2), startDay: event.startAt.substr(8, 2),
            mainCalendar: event.eventinvitecalendarSet[0].mainCalendar.name
          });
        });

        this.allEvents.forEach(event => {
          this.year.push(Number(event.startDate.substr(0, 4)) - 1911);
        });

        this.yearSort();
        this.resetDate();
        this.showEventSort();
      }
    );
  }

  yearSort() {
    this.year = this.year.filter((el, i, arr) => {
      return arr.indexOf(el) === i;
    });

    this.year.sort((a, b) => {
      if (a < b) {
        return 1;
      }
      if (a > b) {
        return -1;
      }
      return 0;
    });
  }

  async savePdf(main: HTMLElement) {
    for (let i = 0; i < 2; i++) {
      await new Promise(resolve => {
        setTimeout(() => {
          main.scrollIntoView();
          resolve();
        }, 500);
      });
    }
    html2canvas(this.screen.nativeElement).then(canvas => {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;

      const pageHeight = contentWidth / 592.28 * 841.89;
      let leftHeight = contentHeight;
      let position = 0;

      const imgWidth = 595.28;
      const imgHeight = 592.28 / contentWidth * contentHeight;
      const pageData = canvas.toDataURL('image/jpeg', 1.0);
      const pdf = new jsPDF('', 'pt', 'a4');

      if (leftHeight <= pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight;
          position -= 881;
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save('demo.pdf');
    });
  }

  changeYear() {
    this.resetDate();
    this.showEventSort();
  }

  resetDate() {
    this.showTitle = true;

    this.eventMonth_1 = [];
    this.eventMonth_2 = [];
    this.eventMonth_3 = [];
    this.eventMonth_4 = [];
    this.eventMonth_5 = [];
    this.eventMonth_6 = [];
    this.eventMonth_7 = [];
    this.eventMonth_8 = [];
    this.eventMonth_9 = [];
    this.eventMonth_10 = [];
    this.eventMonth_11 = [];
    this.eventMonth_12 = [];

    const eventMonth_1 = [];
    const eventMonth_2 = [];
    const eventMonth_3 = [];
    const eventMonth_4 = [];
    const eventMonth_5 = [];
    const eventMonth_6 = [];
    const eventMonth_7 = [];
    const eventMonth_8 = [];
    const eventMonth_9 = [];
    const eventMonth_10 = [];
    const eventMonth_11 = [];
    const eventMonth_12 = [];

    this.eventMonth_1_nd = [];
    this.eventMonth_2_nd = [];
    this.eventMonth_3_nd = [];
    this.eventMonth_4_nd = [];
    this.eventMonth_5_nd = [];
    this.eventMonth_6_nd = [];
    this.eventMonth_7_nd = [];
    this.eventMonth_8_nd = [];
    this.eventMonth_9_nd = [];
    this.eventMonth_10_nd = [];
    this.eventMonth_11_nd = [];
    this.eventMonth_12_nd = [];

    const eventMonth_1_nd = [];
    const eventMonth_2_nd = [];
    const eventMonth_3_nd = [];
    const eventMonth_4_nd = [];
    const eventMonth_5_nd = [];
    const eventMonth_6_nd = [];
    const eventMonth_7_nd = [];
    const eventMonth_8_nd = [];
    const eventMonth_9_nd = [];
    const eventMonth_10_nd = [];
    const eventMonth_11_nd = [];
    const eventMonth_12_nd = [];

    this.openCalendar.forEach(calendar => {
      this.allEvents.forEach(event => {
        if (calendar.id === event.calendars[0].mainCalendar.id && 
          calendar.name === '日間部行事曆') {
          // if內 calendar.isChecked === true
          if ( Number(this.setYear) + 1 === Number(event.startDate.substr(0, 4) - 1911) && 
          event.startDate.substr(5, 2) <= 7 && event.startDate.substr(5, 2) > 1) {
            switch (event.startDate.substr(5, 2)) {
              case '02':
                eventMonth_2.push(event);
                break;
              case '03':
                eventMonth_3.push(event);
                break;
              case '04':
                eventMonth_4.push(event);
                break;
              case '05':
                eventMonth_5.push(event);
                break;
              case '06':
                eventMonth_6.push(event);
                break;
              case '07':
                eventMonth_7.push(event);
                break;
            }
            return 0;
          } else if ( Number(this.setYear) === Number(event.startDate.substr(0, 4) - 1911) && 
          event.startDate.substr(5, 2) > 7) {
            switch (event.startDate.substr(5, 2)) {
              case '08':
                eventMonth_8.push(event);
                break;
              case '09':
                eventMonth_9.push(event);
                break;
              case '10':
                eventMonth_10.push(event);
                break;
              case '11':
                eventMonth_11.push(event);
                break;
              case '12':
                eventMonth_12.push(event);
                break;
            }
            return 0;
          } else if ( Number(this.setYear) + 1 === Number(event.startDate.substr(0, 4) - 1911) && event.startDate.substr(5, 2) < 2) {
            switch (event.startDate.substr(5, 2)) {
              case '01':
                eventMonth_1.push(event);
                break;
            }
            return 0;
          }
        } else if (calendar.id === event.calendars[0].mainCalendar.id &&
          calendar.name === '進修部行事曆') {
          if ( Number(this.setYear)+1 === Number(event.startDate.substr(0, 4) - 1911)&& event.startDate.substr(5, 2) <= 7 && event.startDate.substr(5, 2) > 1) {
            switch (event.startDate.substr(5, 2)) {
              case '02':
                eventMonth_2_nd.push(event);
                break;
              case '03':
                eventMonth_3_nd.push(event);
                break;
              case '04':
                eventMonth_4_nd.push(event);
                break;
              case '05':
                eventMonth_5_nd.push(event);
                break;
              case '06':
                eventMonth_6_nd.push(event);
                break;
              case '07':
                eventMonth_7_nd.push(event);
                break;
            }
            return 0;
          } else if ( Number(this.setYear) === Number(event.startDate.substr(0, 4) - 1911)&& event.startDate.substr(5, 2) > 7) {
            switch (event.startDate.substr(5, 2)) {
              case '08':
                eventMonth_8_nd.push(event);
                break;
              case '09':
                eventMonth_9_nd.push(event);
                break;
              case '10':
                eventMonth_10_nd.push(event);
                break;
              case '11':
                eventMonth_11_nd.push(event);
                break;
              case '12':
                eventMonth_12_nd.push(event);
                break;
            }
            return 0;
          } else if ( Number(this.setYear) + 1 === Number(event.startDate.substr(0, 4) - 1911)&& event.startDate.substr(5, 2) < 2) {
            switch (event.startDate.substr(5, 2)) {
              case '01':
                eventMonth_1_nd.push(event);
                break;
            }
            return 0;
          }
        }
      });
    });
    this.eventMonth_1.push({ events: eventMonth_1 });
    this.eventMonth_2.push({ events: eventMonth_2 });
    this.eventMonth_3.push({ events: eventMonth_3 });
    this.eventMonth_4.push({ events: eventMonth_4 });
    this.eventMonth_5.push({ events: eventMonth_5 });
    this.eventMonth_6.push({ events: eventMonth_6 });
    this.eventMonth_7.push({ events: eventMonth_7 });
    this.eventMonth_8.push({ events: eventMonth_8 });
    this.eventMonth_9.push({ events: eventMonth_9 });
    this.eventMonth_10.push({ events: eventMonth_10 });
    this.eventMonth_11.push({ events: eventMonth_11 });
    this.eventMonth_12.push({ events: eventMonth_12 });

    this.eventMonth_1_nd.push({ events: eventMonth_1_nd });
    this.eventMonth_2_nd.push({ events: eventMonth_2_nd });
    this.eventMonth_3_nd.push({ events: eventMonth_3_nd });
    this.eventMonth_4_nd.push({ events: eventMonth_4_nd });
    this.eventMonth_5_nd.push({ events: eventMonth_5_nd });
    this.eventMonth_6_nd.push({ events: eventMonth_6_nd });
    this.eventMonth_7_nd.push({ events: eventMonth_7_nd });
    this.eventMonth_8_nd.push({ events: eventMonth_8_nd });
    this.eventMonth_9_nd.push({ events: eventMonth_9_nd });
    this.eventMonth_10_nd.push({ events: eventMonth_10_nd });
    this.eventMonth_11_nd.push({ events: eventMonth_11_nd });
    this.eventMonth_12_nd.push({ events: eventMonth_12_nd });

    this.showEventSort();
  }

  showEventSort() {
    // 日間部
    this.eventMonth_1[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_2[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_3[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_4[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_5[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_6[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_7[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_8[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_9[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_10[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_11[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_12[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });

    // 進修部
    this.eventMonth_1_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_2_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_3_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_4_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_5_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_6_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_7_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_8_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_9_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_10_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_11_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });
    this.eventMonth_12_nd[0].events.sort((a, b) => {
      const startA = a.startDate.toUpperCase();
      const startB = b.startDate.toUpperCase();
      if (startA < startB) {
        return -1;
      }
      if (startA > startB) {
        return 1;
      }
      return 0;
    });

  }
}