diff --git a/package.json b/package.json
index 779f77f..c7de61e 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "ant-design-vue": "^2.0.0-beta.9",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.9.1",
     "postcss-pxtorem": "^5.1.1",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",
diff --git a/src/router/index.ts b/src/router/index.ts
index 0cf92c0..e06afcf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -92,6 +92,10 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "liveing",
         component: () => import("../views/regime/Liveing.vue")
+      },
+      {
+        path: "date",
+        component: () => import("../views/regime/date.vue")
       }
     ]
   },
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 0000000..3b25b44
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,42 @@
+import dayjs from 'dayjs'
+
+export function getdate(){
+    let now = dayjs()
+    const day = now.date() // 当前天
+    now = now.date(1)
+    const week = now.day(); // 第一天是星期几
+    now = now.month(now.month() + 1);
+    now = now.date(0);
+    const month = now.date(); // 当前月有几天
+
+
+    console.log(day,week,month)
+    let i = 0;
+    let w = 0;
+
+    interface Date{
+        day?: number;
+        list?: Array<any>;
+    }
+    const date: Array<Array<Date>> = [[]];
+    
+    while(i < month){
+        
+        for(w = 0; w < week; w++){
+            date[0][w] = {};
+        }
+        i++;
+        w = w == 0 ? 1 : w;
+        const zhou =  Math.floor((i + w - 1) / 7)
+        const d = {
+            day: i
+        }
+        if(date[zhou] == undefined){
+            date[zhou] = []
+        }
+        date[zhou].push(d)
+    }
+    console.log(date)
+    return date;
+}
+
diff --git a/src/views/regime/date.vue b/src/views/regime/date.vue
new file mode 100644
index 0000000..0c1c89a
--- /dev/null
+++ b/src/views/regime/date.vue
@@ -0,0 +1,201 @@
+<template>
+    <div class="date">
+        <div class="head">
+            <div>
+                <img src="" alt=""> 
+                上一月
+            </div>
+            2020年9月
+            <a-button type="primary" class="button">
+                周日历
+            </a-button>
+            <div>
+                下一月
+                <img src="" alt="">
+            </div>
+        </div>
+        <div class="yue">
+            <div class="heads">
+                <div>周日</div>
+                <div>周一</div>
+                <div>周二</div>
+                <div>周三</div>
+                <div>周四</div>
+                <div>周五</div>
+                <div>周六</div>
+            </div>
+            <div class="body">
+                <div class="row" v-for="(item,index) in month" :key="index">
+                    <div v-for="(i,j) in item" :key="j">
+                        <div class="day">
+                            <div>
+                                    {{i.day}}
+                                    <!-- <div class="item">
+                                        <div></div><p>asdsadas</p>
+                                    </div> -->
+                                <!-- <span class="ing"></span> -->
+                                <!-- <span class="next"></span> -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.date{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .head{
+        width: 1320px;
+        height: 57px;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        >div{
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            color: #0DBBA4;
+            >img{
+                width: 7px;
+                height: 11px;
+            }
+        }
+        >div:first-child{
+            margin-right: 90px;
+            >img{
+                margin-right: 11px;
+            }
+        }
+        >div:last-child{
+            margin-left: 90px;
+
+            >img{
+                margin-left: 11px;
+            }
+        }
+        .button{
+            width: 57px;
+            height: 26px;
+            background-color: #0DBBA4;
+            border-right: 4px;
+            border: none;
+            font-size: 10px;
+            color: #fff;
+            padding: 0;
+            position: absolute;
+            right: 40px;
+        }
+    }
+    .yue{
+        width: 1320rpx;
+        .heads{
+            width: 1320px;
+            height: 63px;
+            display: flex;
+            >div{
+                width: 100%;
+                height: 100%;
+                background-color: #F5FEFD;
+                text-align: center;
+                line-height: 63px;
+                font-size: 13px;
+                color: #08AE98;
+                border-right: 1px solid #eee;
+                box-sizing: border-box;
+            }
+        }
+        .body{
+            .row{
+                    background-color: #fff;
+                    height: 126px;
+                    width: 100%;
+                    display: flex;
+                    >div{
+                        width: 100%;
+                        border-top: 1px solid #eee;
+                        border-right: 1px solid #eee;
+                        .day{
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            color: #111;
+                            >div{
+                                height: 100%;
+                                border-radius: 6px;
+                                padding: 18px;
+                                overflow: hidden;
+                                .item{
+                                    display: flex;
+                                    align-items: center;
+                                    margin-top: 11px;
+                                    >div{
+                                        width: 6px;
+                                        height: 6px;
+                                        background-color: #111;
+                                        margin-right: 6px;
+                                        border-radius: 50%;
+                                    }
+                                    >p{
+                                        line-height: 1;
+                                        margin: 0;
+                                    }
+                                }
+                            }
+                            .old{
+                                background-color: #F7F7F7;
+                            }
+                            .ing{
+                                background-color: #0DBBA4;
+                                color: #fff;
+                                .item{
+                                    >div{
+                                        background-color: #fff;
+                                    }
+                                }
+                            }
+                            .next{
+                                background-color: #CEF9F0;
+                                color: #0DBBA4;
+                                .item{
+                                    >div{
+                                        background-color: #0DBBA4;
+                                    }
+                                }
+                            }
+                        }
+                          
+                    }
+                    >div::last-child{
+                        border: unset;
+                    }
+                }
+            }
+        }
+       
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { getdate } from "@/utils/date"
+
+export default defineComponent({
+    props:{
+
+    },
+    setup(){
+        console.log(1)
+        const date = getdate();
+        const month = ref(date);
+        return {
+            month
+        }
+    }
+})
+</script>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 207f96c..9ff7b28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3321,6 +3321,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.npm.taobao.org/dayjs/download/dayjs-1.9.1.tgz?cache=0&sync_timestamp=1601296772816&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdayjs%2Fdownload%2Fdayjs-1.9.1.tgz#201a755f7db5103ed6de63ba93a984141c754541"
+  integrity sha1-IBp1X321ED7W3mO6k6mEFBx1RUE=
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502826356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"