[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8922":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},8922,"vue-calendar","jinzhe\u002Fvue-calendar","jinzhe","A calendar components for Vue.js.","http:\u002F\u002Fjinzhe.github.io\u002Fvue-calendar\u002F",null,"Vue",1409,418,53,15,0,55.87,"MIT License",false,"master",true,[],"2026-06-12 04:00:41","# Vue Calendar\n\n> A calendar components for Vue.js.\n\n![](http:\u002F\u002Fww1.sinaimg.cn\u002Flarge\u002F823603acgy1fh120p4bigg20b50c1wq4.gif)\n\n\n### Live Demo\n> http:\u002F\u002Fjinzhe.github.io\u002Fvue-calendar\u002F\n\n### Getting Started\n\n``` html\n\u003Ctemplate>\n\u003Cdiv id=\"app\">\n    \u003Cdiv class=\"flex\">\n        \u003Cdiv>\n            \u003Cspan>弹出框\u003C\u002Fspan>\n            \u003Cinput type=\"text\" @click=\"openByDrop($event)\" v-model=\"calendar3.display\" readonly>\n            \u003Cinput type=\"text\" @click=\"openByDialog\" :value=\"calendar4.display\" readonly>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv>\n            \u003Cspan>单选\u002F英文\u002F事件\u003C\u002Fspan>\n            \u003Ccalendar :events=\"calendar1.events\" :lunar=\"calendar1.lunar\" :value=\"calendar1.value\" :begin=\"calendar1.begin\" :end=\"calendar1.end\" :weeks=\"calendar1.weeks\" :months=\"calendar1.months\" @select=\"calendar1.select\">\u003C\u002Fcalendar>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv>\n            \u003Cspan>多选\u002F农历\u003C\u002Fspan>\n            \u003Ccalendar :range=\"calendar2.range\" :lunar=\"calendar2.lunar\" :value=\"calendar2.value\" :begin=\"calendar2.begin\" :end=\"calendar2.end\" @select=\"calendar2.select\">\u003C\u002Fcalendar>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Ctransition name=\"fade\">\n    \u003Cdiv class=\"calendar-dropdown\" :style=\"{'left':calendar3.left+'px','top':calendar3.top+'px'}\" v-if=\"calendar3.show\">\n        \u003Ccalendar :zero=\"calendar3.zero\" :lunar=\"calendar3.lunar\" :value=\"calendar3.value\" :begin=\"calendar3.begin\" :end=\"calendar3.end\" @select=\"calendar3.select\">\u003C\u002Fcalendar>\n    \u003C\u002Fdiv>\n    \u003C\u002Ftransition>\n\n    \u003Ctransition name=\"fade\">\n    \u003Cdiv class=\"calendar-dialog\" v-if=\"calendar4.show\">\n        \u003Cdiv class=\"calendar-dialog-mask\" @click=\"closeByDialog\">\u003C\u002Fdiv>\n        \n        \u003Cdiv class=\"calendar-dialog-body\">\n            \u003Ccalendar :range=\"calendar4.range\" :zero=\"calendar4.zero\" :lunar=\"calendar4.lunar\" :value=\"calendar4.value\"  @select=\"calendar4.select\">\u003C\u002Fcalendar>\n        \u003C\u002Fdiv>\n        \n    \u003C\u002Fdiv>\n    \u003C\u002Ftransition>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n \nimport calendar from '.\u002Fcalendar.vue'\n\nexport default {\n    name: 'app',\n    components: {\n        calendar\n    },\n    data(){\n        return {\n            calendar1:{\n                value:[2018,2,16], \u002F\u002F默认日期\n                \u002F\u002F lunar:true, \u002F\u002F显示农历\n                weeks:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n                months:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n                events:{\n                    '2018-2-14':'$408','2018-2-15':'$460','2018-2-16':'$500',\n                },\n                select(value){\n                    console.log(value.toString());\n                }\n            },\n            calendar2:{\n                range:true,\n                value:[[2018,2,16],[2019,2,16]], \u002F\u002F默认日期\n                lunar:true, \u002F\u002F显示农历\n                begin:[2017,2,16], \u002F\u002F可选开始日期\n                end:[2019,2,16], \u002F\u002F可选结束日期\n                select(begin,end){\n                    \u002F\u002F console.log(begin.toString(),end.toString());\n                }\n            },\n            calendar3:{\n                display:\"2018\u002F02\u002F16\",\n                show:false,\n                zero:true,\n                value:[2018,2,16], \u002F\u002F默认日期\n                lunar:true, \u002F\u002F显示农历\n                select:(value)=>{\n                    this.calendar3.show=false;\n                    this.calendar3.value=value;\n                    this.calendar3.display=value.join(\"\u002F\");\n                }\n            },\n            calendar4:{\n                display:\"2018\u002F02\u002F16 ~ 2019\u002F02\u002F16\",\n                show:false,\n                range:true,\n                zero:true,\n                value:[[2018,2,16],[2019,2,16]], \u002F\u002F默认日期\n                lunar:true, \u002F\u002F显示农历\n                select:(begin,end)=>{\n                    console.log(begin,end)\n                    this.calendar4.show=false;\n                    this.calendar4.value=[begin,end];\n                    this.calendar4.display=begin.join(\"\u002F\")+\" ~ \"+end.join(\"\u002F\");\n                }\n            },\n        }\n    },\n    methods:{\n        openByDrop(e){\n            this.calendar3.show=true;\n            this.calendar3.left=e.target.offsetLeft+19;\n            this.calendar3.top=e.target.offsetTop+70;\n           \n            e.stopPropagation();\n            window.setTimeout(()=>{\n                document.addEventListener(\"click\",(e)=>{\n                    this.calendar3.show=false;\n                    document.removeEventListener(\"click\",()=>{},false);\n                },false);\n            },1000)\n        },\n        openByDialog(){\n            this.calendar4.show=true;\n        },\n        closeByDialog(){\n            this.calendar4.show=false;\n        }\n    }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n\u002F*demo*\u002F\n.flex{\n    box-sizing: border-box;\n\n    display: -webkit-box;\n    -webkit-box-pack: start;\n    -webkit-box-align: start;\n\n    display: -webkit-flex;\n    -webkit-justify-content: space-between;\n    -webkit-align-items: top;\n\n    display: flex;\n    justify-content: space-between;\n    align-items: top;\n    flex-flow:row wrap\n}\n.flex>div{\n    margin:10px;\n    padding:20px;\n    width:25%;\n    min-width:300px;\n    border: 1px solid #eee;\n    border-radius: 2px;\n    position: relative;\n}\n.flex>div>span{\n    position: absolute;\n    left:0px;\n    top:0px;\n    padding:2px 10px;\n    font-size:10px;\n    border-radius:0 0 2px 0;\n    background:#ea6151;\n    color:#fff;\n}\n.flex>div>input{\n    box-sizing: border-box;\n    width:100%;\n    margin-top:20px;\n    border-radius: 2px;\n    border:1px solid #dedede;\n    padding:10px;\n    font-size: 16px;\n    background:url(data:image\u002Fsvg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI\u002FPjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwpAZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGlmb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUuZW90PyNpZWZpeCIpIGZvcm1hdCgiZW1iZWRkZWQtb3BlbnR5cGUiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0NDIzNzM4OTZfNDc1NDQ1NS53b2ZmIikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUudHRmIikgZm9ybWF0KCJ0cnVldHlwZSIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTQ0MjM3Mzg5Nl80NzU0NDU1LnN2ZyNpZm9udCIpIGZvcm1hdCgic3ZnIik7IH0KCl1dPjwvc3R5bGU+PC9kZWZzPjxnIGNsYXNzPSJ0cmFuc2Zvcm0tZ3JvdXAiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUsIDAuMDE1NjI1KSI+PHBhdGggZD0iTTcxMS4zMDYyIDI5MC42OTcyYzI0LjI4MjEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTU0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMjYgMC00My45ODggMTkuNzI4NC00My45ODggNDQuMDUzNXYyMDAuMTA0OTZDNjY3LjMxODMgMjcwLjk5MDMgNjg3LjAwMzYgMjkwLjY5NzIgNzExLjMwNjIgMjkwLjY5NzJ6TTYyMy40ODA4IDExMy40MjAzSDQwMC43NjQ5Mjh2NjYuNTEzOTJoMjIyLjcxNTkwNDAwMDAwMDAyVjExMy40MjAyODh6TTg4NC4wNTMgMTEzLjQyMDNoLTgyLjc3NDAxNnY2Ni4xNDUyOGg4NS45NDAyMjRjMjUuMjc4NSAwIDQ2LjYxMTUgMjEuMzc2IDQ2LjYxMTUgNDYuNjc3djE1My45Mjc2OEg5MC40Mzg2NTYwMDAwMDAwMXYtMTUzLjkyNzY4YzAtMjUuMyAyMS4zMzMtNDYuNjc3IDQ2LjYxMTUtNDYuNjc3aDg2LjUwMzQyNFYxMTMuNDIwMjg4aC04Mi42NDI5NDRjLTY0LjA4NiAwLTExNi41MDc2IDUyLjUwODctMTE2LjUwNzYgMTE2LjcwMzJ2Njc2LjgwMTUzNTk5OTk5OTljMCA2NC4xNzQxIDUwLjQ5MTQgMTE2LjY4MDcgMTE0LjU3NzQgMTE2LjY4MDdIODg0LjA1Mjk5MmM2NC4wNjI1IDAgMTE2LjUwNjYtNTIuNTA2NiAxMTYuNTA2Ni0xMTYuNjgwN1YyMzAuMTIzNTE5OTk5OTk5OThDMTAwMC41NTk2IDE2NS45MjkgOTQ4LjExNDQgMTEzLjQyMDMgODg0LjA1MyAxMTMuNDIwM3pNOTMzLjgyOTYgOTEwLjM1MTRjMCAyNS4zLTIxLjMzMyA0Ni42NzYtNDYuNjExNSA0Ni42NzZIMTM3LjA1MDExMTk5OTk5OTk4Yy0yNS4yNzg1IDAtNDYuNjExNS0yMS4zNzYtNDYuNjExNS00Ni42NzZWNDQ2LjQ0NTU2OEg5MzMuODI5NjMyVjkxMC4zNTEzNnpNMjY3LjEwODQgNjQ2LjE4MTljMzYuODc3MyAwIDY2Ljc1MjUtMjkuOTM5NyA2Ni43NTI1LTY2Ljg4MTUgMC0zNi45MjI0LTI5Ljg3NTItNjYuODYxMS02Ni43NTI1LTY2Ljg2MTEtMzYuODU0OCAwLTY2Ljc1MjUgMjkuOTM5Ny02Ni43NTI1IDY2Ljg2MTFDMjAwLjM1NTggNjE2LjI0MjIgMjMwLjI1MjUgNjQ2LjE4MTkgMjY3LjEwODQgNjQ2LjE4MTl6TTUxMS41NDg0IDY0Ni4xODE5YzM2Ljg1NTggMCA2Ni43NTI1LTI5LjkzOTcgNjYuNzUyNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTU3LTY2Ljg2MTEtNjYuNzUyNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzQ0NC43OTU5IDYxNi4yNDIyIDQ3NC42NzExIDY0Ni4xODE5IDUxMS41NDg0IDY0Ni4xODE5ek0yNjUuOTE2NCA4OTAuNzA5YzM2Ljg3NzMgMCA2Ni43NTE1LTI5LjkzOTcgNjYuNzUxNS02Ni44NjExIDAtMzYuOTQyOC0yOS44NzQyLTY2Ljg4MjYtNjYuNzUxNS02Ni44ODI2LTM2Ljg1NTggMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44ODI2QzE5OS4xNjM5IDg2MC43NjkzIDIyOS4wNTk2IDg5MC43MDkgMjY1LjkxNjQgODkwLjcwOXpNNTExLjU0ODQgODkwLjcwOWMzNi44NTU4IDAgNjYuNzUyNS0yOS45Mzk3IDY2Ljc1MjUtNjYuODYxMSAwLTM2Ljk0MjgtMjkuODk1Ny02Ni44ODI2LTY2Ljc1MjUtNjYuODgyNi0zNi44NzczIDAtNjYuNzUyNSAyOS45Mzk3LTY2Ljc1MjUgNjYuODgyNkM0NDQuNzk1OSA4NjAuNzY5MyA0NzQuNjcxMSA4OTAuNzA5IDUxMS41NDg0IDg5MC43MDl6TTc1NS42NDEzIDY0Ni4xODE5YzM2Ljg1NjggMCA2Ni43NTM1LTI5LjkzOTcgNjYuNzUzNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTY3LTY2Ljg2MTEtNjYuNzUzNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzY4OC44ODk5IDYxNi4yNDIyIDcxOC43NjQgNjQ2LjE4MTkgNzU1LjY0MTMgNjQ2LjE4MTl6TTMxMS43MDM2IDI5MC42OTcyYzI0LjI4MTEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTQ0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMTYgMC00My45ODkgMTkuNzI4NC00My45ODkgNDQuMDUzNXYyMDAuMTA0OTZDMjY3LjcxNDYgMjcwLjk5MDMgMjg3LjQwMiAyOTAuNjk3MiAzMTEuNzAzNiAyOTAuNjk3MnoiIGZpbGw9IiM1ZTdhODgiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==) no-repeat 8px 10px;\n        padding-left: 36px;\n        color:#666;\n}\n\n\u002F*transition*\u002F\n.fade-enter-active,\n.fade-leave-active {\n    transition: all .5s ease-in-out;\n}\n.fade-enter,.fade-leave-active{\n    opacity: 0;\n    transform: translateY(-10px);\n\n}\n\n\u002F*下拉框*\u002F\n.calendar-dropdown{\n    background: #fff;\n    position: absolute;\n    left:0;\n    top:0;\n    padding:20px;\n    border: 1px solid #eee;\n    border-radius: 2px;\n}\n.calendar-dropdown:before {\n    position: absolute;\n    left:30px;\n    top: -10px;\n    content: \"\";\n    border:5px solid rgba(0, 0, 0, 0);\n    border-bottom-color: #DEDEDE;\n}\n.calendar-dropdown:after {\n    position: absolute;\n    left:30px;\n    top: -9px;\n    content: \"\";\n    border:5px solid rgba(0, 0, 0, 0);\n    border-bottom-color: #fff;\n}\n\n\u002F*弹出框*\u002F\n.calendar-dialog{\n    position: absolute;\n    left:0;\n    top:0;\n    right:0;\n    bottom:0;\n}\n\n.calendar-dialog-mask{\n    background:rgba(255,255,255,.5);\n    width:100%;\n    height:100%;\n}\n\n.calendar-dialog-body{\n    background: #fff;\n    position: absolute;\n    left:50%;\n    top:50%;\n    transform: translate(-50%,-50%);\n    padding:20px;\n    border: 1px solid #eee;\n    border-radius: 2px;\n}\n\u003C\u002Fstyle>\n\n```\n### Props\n\n- :value Array default:[] * default value for calendar\n- :begin Array default:[] * limit begin select date\n- :end Array default:[] * limit end select date\n- :range Bool default:false * You can select a time period\n- :zero Bool default:false * Date zero\n- :lunar Bool default:false * Show Chinese Lunar\n- :weeks Array * According to the system language changes or custom\n- :months Array * According to the system language changes or custom\n- :events Object * Customize calendar events\n\n### Features\n- You can limit the start and end dates.\n- Customize week and month headlines.\n- Support show Chinese lunar calendar, Chinese festivals, international festivals\n- Support for custom presentation.\n- Support multiple choice\n- Customize calendar events\n\n### Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:666\nnpm run dev\n\n# build for production with minification\nnpm run build\n```","Vue Calendar 是一个为 Vue.js 设计的日历组件。它支持单选、多选日期选择，可以显示农历，并且能够通过弹出框或对话框的形式展示日历。此外，该组件还允许用户自定义每周的起始日、月份名称以及在特定日期上添加事件标记等功能。适用于需要集成日历功能的各种 Vue 项目中，如在线预订系统、个人日程管理应用等场景，帮助开发者快速实现美观实用的日历交互界面。",2,"2026-06-11 03:20:19","top_language"]