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>