@Entry
@Component
struct DataPage {
@State riqi:Array<string>=["1","2","3","4","5","6","7","8",
"9","10","11","12","13","14","15",
"16","17","18","19","20","21","22",
"23","24","25","26","27","28","29","30","31"," "," "," "," "];
@State week:Array<string>=["日","一","二","三","四","五","六"]
@State year:number=2024;
@State month:number=12;
@State day:number=0;
//以2024.12的日历作为初始页面
//对各个变量进行初始化
build() {
Grid() {
GridItem(){
Text(`${this.year}年${this.month}月`)
.fontSize(25)
.fontWeight(700)
//根据用户输入的年月更改页面标题
}.columnStart(1)
.columnEnd(3)
GridItem(){
TextInput({placeholder:'年'})
.onChange((value: string) => {
this.year=Number(value);
})
.fontColor("#ff034980")
}.columnStart(4)
.columnEnd(5)
GridItem(){
TextInput({placeholder:'月'})
.onChange((value: string) => {
this.month=Number(value);
})
.fontColor("#ff034980")
}.columnStart(6)
.columnEnd(6)
//记录用户输入的年月
GridItem(){
Button({type:ButtonType.Circle}) {
Text("go")
}.height("30")
.width("70")
.backgroundColor("#a3ff8c8c")
.onClick((event: ClickEvent) => {
this.riqi=tian(this.year,this.month, findday(this.year,this.month,this.day))
})
//点击事件调用findday（）函数找到2000.1.1与用户输入的日期相差几天，将其作为参数传入tian（）函数中
//调用tian（）函数对该月份的日期进行排版，并以数组形式传给riqi数组，以便后续foreach循环渲染
}.columnStart(7)
GridItem() {
Column() {
Blank()
}
}.columnStart(1)
.columnEnd(5)
GridItem(){
Button({type:ButtonType.Capsule}) {
Text("<")
}.height("30")
.width("50")
.backgroundColor("#bcf5d7ff")
.onClick((event: ClickEvent) => {
if(this.month==1){
this.month=12;
this.year--;
}else{
this.month--;
}
this.riqi=tian(this.year,this.month, findday(this.year,this.month,this.day))
})
}.columnStart(6)
.columnEnd(6)
GridItem(){
Button({type:ButtonType.Capsule}) {
Text(">")
}.height("30")
.width("50")
.backgroundColor("#bcf5d7ff")
.onClick((event: ClickEvent) => {
if(this.month==12){
this.month=1;
this.year++;
}else{
this.month++;
}
this.riqi=tian(this.year,this.month, findday(this.year,this.month,this.day))
})
}.columnStart(6)
.columnEnd(7)
//跳转前一个或下一个月
ForEach(this.week,(item:string)=>{
GridItem() {
Button({ type: ButtonType.Circle }) {
Text(`${item}`)
.fontSize(20)
.fontColor("#ff808080")
}.width('90%')
.height('90%')
.borderRadius(50)
.backgroundColor("#fffff2c0")
}
})//循环渲染星期导航栏
ForEach(this.riqi, (item:string)=> {
GridItem() {
Button( {type: ButtonType.Circle}) {
Text(`${item}`)
.fontSize(20)
}.width('90%')
.height('90%')
.borderRadius(50)
.backgroundColor(item === " " ? "#6ac8f4f8" : "#9faff8f8")
//根据这个button有无日期填充不一样的背景颜色
}
})//渲染日期
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
.rowsTemplate(this.riqi.length>35?'1fr 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 1fr':'1fr 1fr 2fr 2fr 2fr 2fr 2fr 2fr 1fr' )
//根据月份天数判断需要几行
}
}
function findday(y:number,m:number,d:number) {
let run: Array<number> = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let feirun: Array<number> = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let sum: number = 0;
let nian: number = 2000;
let yue: number = 1;
let ri: number = 1;
let jujin: number = 0;
for (let j = nian; j < y; j++) {
//计算前几年有多少天，需区分是否为闰年
sum = 0;
if ((j % 400 == 0) || (j % 4 == 0 && j % 100 != 0)) {
sum += 366;
} else {
sum += 365;
}
jujin += sum;
}
sum = 0; //计算当年有多少天
if ((y % 400 == 0) || (y % 4 == 0 && y % 100 != 0)) {
for (let i = 0; i < m-1; i++) {
sum += run[i];
}
} else {
for (let i = 0; i < m-1; i++) {
sum += feirun[i];
}
}
jujin += sum;
jujin = (jujin+6) % 7;
//计算出要显示的日历前面需要空几格
return jujin;
}
function tian(y:number,m:number,kong:number) {
let day:Array<string>=new Array (35);
for(let i=0;i<kong;i++){
day[i]=" ";
}//对没有日期的格子填空格
let d:number;
let run: Array<number> = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let feirun: Array<number> = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let sum: number = 0;
if ((y % 400 == 0) || (y % 4 == 0 && y % 100 != 0)) {
d=run[m-1];
} else {
d = feirun[m-1];
}//填充有日期的格子
let a=0;
for(let i=kong;i<d+kong;i++){
a++;
day[i]=a.toString();
}
if(day.length<=35) {
for (let i = d + kong; i < 35; i++) {
day[i] = " ";
}
}
else {
for (let i = d + kong; i < 42; i++) {
day[i] = " ";
}
}//补全剩余空格
return day;
//返回day数组给foreach以便进行循环渲染
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
