# calendar_memo.gitee.io

**Repository Path**: pxi/calendar_memo

## Basic Information

- **Project Name**: calendar_memo.gitee.io
- **Description**: 基于React Hooks开发的移动端的日历工具的一款webApp，名为橙子日历。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://flyingwxb.gitee.io/calendar_memo
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-12-24
- **Last Updated**: 2021-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目预览
项目打包部署到了github和码云上。    


<a href="https://flyingwxb.gitee.io/calendar_memo">码云版预览地址</a>（国内访问会很快）  
<a href="https://deardreamweb.github.io/calendar_memo/">github版预览地址</a>（国内访问可能会有点慢，请耐心等待） 

# 橙子日历
基于React Hooks开发的移动端的日历工具的一款webApp，名为橙子日历。  
主要使用了useReducer配合LocalStorage来对数据进行储存和获取。使用冒泡排序和递归实现数据的排序和分类。 可以指定日期添加备忘录、标记备忘录是否完成、删除备忘录、实时显示当地天气情况等功能。
  
# 核心技术栈
- React Hooks
- Antd-mobile
- useReducer
- React Router
- Html5
- ES6
- Flex/Grid

## 项目搭建
```
npm install
```

### 项目运行
```
npm start
```
# 项目效果

## 首页界面
<img src="https://s1.ax1x.com/2020/09/07/wnPiuR.jpg" width="50%" alt="首页界面"/>

## 选择日期
<img src="https://s1.ax1x.com/2020/09/07/wnPCv9.jpg" width="50%" alt="选择日期"/>

## 添加备忘录
<img src="https://s1.ax1x.com/2020/09/07/wnPFD1.jpg" width="50%" alt="添加备忘录"/>

## 备忘录界面
<img src="https://s1.ax1x.com/2020/09/07/wnPp34.jpg" width="50%" alt="备忘录界面"/>

## 删除备忘录
<img src="https://s1.ax1x.com/2020/09/07/wnP9gJ.jpg" width="50%" alt="删除备忘录"/>