首先展示结果图:
选中某一天的样式
使用步骤:
第一步:在项目中安装ionic3-calendar-en,安装代码:
npm install ionic3-calendar-en --save
第二步:在app.module.ts中添加
import { CalendarModule } from 'ionic3-calendar-en';
以及在imports中添加 CalendarModule
imports: [
BrowserModule,
CalendarModule,
IonicModule.forRoot(MyApp)
],
第三步:在自己需要显示的HTML页面以及位置添加代码:
<ion-calendar #calendar (onDaySelect)="onDaySelect($event)"></ion-calendar>
在ts页面使用这个方法来判断点击的是哪一个日期:
onDaySelect($event){
console.log($event);
}
这样基础的一个月的日期就可以显示出来了
ps:关于我修改周显示文字以及样式:
修改周文字,代码如下:(我是用position把要显示的周文字覆盖在了日历的周上面,week中是需要显示的东西)
html页面:
<div style="top: 30px;position: absolute;width: 100%;">
<ion-grid>
<ion-row>
<ion-col *ngFor="let x of week" style="width: 14.25%;position: relative;padding: 0.8rem;text-align: center;">
{{x}}
</ion-col>
</ion-row>
</ion-grid>
</div>
ts页面定义:
week: any = ['日','一','二','三','四','五','六'];
修改样式代码如下:(主要是在网页上面选择查看需要修改的是具体哪个样式的)
scss代码:
ion-calendar .calendar-row .calendar-col {
border: 0px;
}
ion-calendar .calendar-row .today {
color: black;
box-shadow: none;
background: white;
}
ion-calendar .calendar-row .select {
box-shadow: none;
color: #fff;
background: #2B7D62;
}
.grid {
padding: 0px;
}
ion-calendar .calendar-header-col {
color: white;
height: 0px;
padding: 0px;
}
.row[justify-content-center] {
margin-bottom: 30px;
height: 30px;
}
其他的一些显示参考链接: