--- theme: condensed-night-purple --- ## 前言上一节我们开发完了`Home`、`Register`、`Login`以及大部分的量的`Mine`的内容这一节我们接着上一节来进行开发上一节的地址给大家放在这里 [实战篇：带着大家用鸿蒙HarmonyOS做项目（一） - 掘金 (juejin.cn)](https://juejin.cn/post/7307889500545400851) 好的，咱们开始吧！ ## Mine 继续Mine模块的开发我们现在搞一个登出，可以跳到`Login`页面

然后就可以跳到登录页了 ## Calendar模块我们现在开始搞日历的模块这里很尴尬，我并没有找到`日历的组件`，即使是我看了查询了文档也只看到了在`低代码`和`js`中提到了一下

所以这里我打算自己封装一个日历组件，当然，如果你有什么别的方法，记得评论留言让我学习一下~ ### 自定义日历组件

这里我在`views`下新建了一个`components`文件夹，用来存放一些功能组件，因为之前的`views`不能满足我的需求了，自定义组件越来越多，会变得不清晰，在之后我会把之前的一些功能组件，例如`TextPro`等都放到`components`下好的，我现在新建了一个`CalendarItem.ets`，作为我的日历正常的日历应该有三部分，但是我的项目中设计的是想显示当日的日期，所以在头部的地方简化了好滴，我们分一下，`Header头部`、`Week周`、`Day日` 这里我们采用`@Builder`完成这三部分即可首先是`Header`头部，这部分比较简单，我们目前只需要一个文本即可这里我简单写一下，然后效果是这样的

大家后期可以自行改善然后文本文本是写死的，后面是需要进行更改的，但是这里不急，而且也简单然后我们开始做`Week的部分` 因为`日-六`这部分是固定的，我们直接写数据即可

然后写一下具体的`Week组件`，我们采用Grid布局，并且直接用ForEach循环，相信经过前面的学习，大家到这里直接就能写出来了

然后我们引用一下组件

OK，效果出来了

好的，简单的部分我们已经完成了，现在到了较为复杂的`Day`部分，这部分我认为分下面几难点进行处理 - 样式（简单） - 当前月的天数（简单） - 当前月的具体日期对应（稍复杂）最后一下可能我陈述的不好，我这里拿电脑的日历举个例子

我们可以看到，这个月的一号是从周五开始的，是周日结束的，那么我们就需要区分出`前月`，`当月`，`下月` 首先，我定义一下当前的年月日

然后在`aboutToAppear`这个生命周期中通过Date()来赋值

此时我们可以改进一下`Header`了

这时我们的`Header`的日期就是实际获取到的了，而不是写死的好的，我们继续`Day`模块的开发我定义一个`allDay`，代表当月的天数

然后我们获取一下当月的天数

然后遍历一下

这个时候我们先写一下`Day`组件

然后我们调用一下`Day`组件看一下效果

ok，没问题现在我们`基础样式`和`当月天数`完成了，我们继续往下我现在想知道`上个月`的天数现在我们的思路是的思路是首先获取`当月第一天是星期几`，然后直接用上个月的天数填满当前行，同理结尾也是这个方式那么我们先获取当月第一天是星期几

我给这个值取名为`currentFirstWeekDay` 然后我们通过Date的api来获取到我们想要的值

好的，我们现在来获取上个月的天数，首先，我们获取到上个月最后一天

然后我们需要知道，`上个月应该显示几天`

最后我们定义一个数组`week`用来显示上个月需要显示的那几天

然后我们定义数组`preMonth`来存放上个月的日期

然后赋值

然后我们可以在`Day`中去加上上个月的日期了

这里加了个背景色，方便区分

然后我的项目中不需要显示，于是我将其隐藏这是最后的效果

最后，我想给当前日加点样式，方便观看

### Calendar模块的开发在完成了`CalendarItem`日历组件后，我们开始回归到`Calendar`模块的开发 `views`下新建`Calendar`

在`Calendar`中引入`CalendarItem`

更改`TabBar`

效果

然后我们现在加上一个标题

下面我们是和`Home`页一样的列表这里我直接拿过来

效果出来了然后现在不同的是右侧的内容，我现在不想要过期这个按钮，我想要变成例如：`剩余两天`这样的效果，那我们就改一下

这里我偷懒一下，大家懂就行然后我稍微改一下内容

效果

## 结尾很感谢大家的支持，我会抓紧去写下个模块的这里需要说的是，我并没有完整地开发出一整个`日历组件`，因为其实日历组件还有很多别的功能，但是在这个项目当中用不到，而我现在想快速把项目写完，所以我就没有完整写出来但是大家放心，我后面会完整地给大家把日历组件写完，甚至还有一些别的组件因为鸿蒙提供的组件实在有限，很多需要自己封装，而我之前有过组件库的开发经历，所以我在想用不用把一些组件封装出来，作为一个单独的项目目前就打算在这个项目完成后做，大家可以期待一下，如果你有想法，可以和我一起做我会加急把这个系列更完，同时此项目优化的地方有很多，可能我最后完成后会统一优化一下最近也真的很忙，如果更慢了的话希望大家理解~