javascript calendar: effects and code

 

css: 

.litwak-calendar {
  overflow-y: hidden;
  td {
    padding: 8px;
    vertical-align: top;
    .hd {
      min-width: 138px;
      height: 77px;
      background-position: 0 -325px;
      position: relative;
    }
    .day {
      font: normal 38px/50px Verdana;
      color: #45729b;
      text-indent: 12px;
      letter-spacing: -3px;
      position: absolute;
    }
    .num {
      font-size: 14px;
      text-align: center;
      text-indent: 12px;
      line-height: 18px;
      height: 18px;
      vertical-align: top;
      padding-top: 8px;
      b {
        font-size: 18px;
        font-weight: normal;
        padding-right: 2px;
      }
    }
    img {
      max-width: fit-content;
      max-height: fit-content;
      height: 140px;
    }
    .movie-list {
      margin-top: -15px;
      position: relative;
      max-height: 138px;
      overflow-y: auto;
      // height: 150px;
    }
  }
}

ts: 

  initCalendar() {
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    const endDay = new Date(
      now.getMonth() === 11
        ? new Date(now.getFullYear() + 1, 0, 1).getTime() - 8640000
        : new Date(now.getFullYear(), now.getMonth() + 1, 1).getTime() -
          8640000);
    let row = 0;
    let col = firstDay.getDay();
    const calendar = [[]];
    let thisDay = 1;
    const end = endDay.getDate();
    const data = [,
      [
        {name: 'X战警：黑凤凰', id: 123, type: 0},
        {name: '最好的我们', id: 123, type: 1},
        {name: '当我们海阔天空', id: 123, type: 1},
        {name: '潜艇总动员', id: 123, type: 1},
        {name: '千与千寻', id: 123},
        {name: '星际侠探', id: 123},
        {name: '呆瓜兄弟', id: 123},
      ],
      ,
      [{name: '我和我的祖国', id: 234}]
    ];
    while (thisDay <= end) {
      const info = {
        day: thisDay,
        movie: data[thisDay]
      };
      if (col === 7) {
        row ++;
        col = 0;
        calendar[row] = [info];
      } else {
        calendar[row][col] = info;
      }
      thisDay++;
      col ++;
    }
    this.calendar = calendar;
    console.log(calendar);
  }

html(angular):

<nz-table nzTemplateMode nzBordered="true" class="litwak-calendar">
      <thead>
        <tr>
          <th nzWidth="100px">周日</th>
          <th nzWidth="100px">周一</th>
          <th nzWidth="100px">周二</th>
          <th nzWidth="100px">周三</th>
          <th nzWidth="100px">周四</th>
          <th nzWidth="100px">周五</th>
          <th nzWidth="100px">周六</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let c of calendar">
          <td *ngFor="let d of c">
            <ng-container *ngIf="d">
              <div class="hd"><em class="day">{
   
   {d.day}}</em>
                <p class="num"><b>{
   
   {d.movie ? d.movie.length : 0}}</b>部</p>
              </div>
              <div class="movie-list">
                <img *ngIf="d.movie&&d.movie.length==1" style="height: 138px;" [attr.src]="url" alt="海报">
                <div *ngIf="d.movie&&d.movie.length>1">
                  <div *ngFor="let m of d.movie" nz-popover [nzTitle]="movieTitle" [nzContent]="movieContent">
                    <nz-badge [nzStatus]="m.type?'success':'default'" [nzText]="m.name">
                      <ng-template #movieTitle>
                        {
   
   {m.name}}
                        <a style="float: right;" (click)="showModal()"><i nz-icon nzType="edit" nzTheme="outline"></i>
                          编辑</a>
                      </ng-template>
                    </nz-badge>
                  </div>
                  <ng-template #movieContent>
                    <img style="width: 100px; height: 141.5px; float: left;" [attr.src]="url" alt="海报">
                    <div style="margin-left: 111px;">
                      <p>类型：剧情</p>
                      <p>主演：...</p>
                      <p>导演：...</p>
                      <p>发行公司：...</p>
                    </div>
                  </ng-template>
                </div>
              </div>
            </ng-container>
          </td>
        </tr>
      </tbody>
    </nz-table>