{"id":15823265,"url":"https://github.com/xwpongithub/vue-better-calendar","last_synced_at":"2025-07-24T12:07:23.778Z","repository":{"id":57394650,"uuid":"125387412","full_name":"xwpongithub/vue-better-calendar","owner":"xwpongithub","description":"A calendar component for vuejs.It offers four date selection modes (range selection, multiple selection, check in, radio)","archived":false,"fork":false,"pushed_at":"2021-01-12T05:52:16.000Z","size":182,"stargazers_count":26,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T13:14:59.113Z","etag":null,"topics":["calendar","javascript","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xwpongithub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-15T15:26:09.000Z","updated_at":"2023-05-03T08:21:43.000Z","dependencies_parsed_at":"2022-09-19T17:42:49.831Z","dependency_job_id":null,"html_url":"https://github.com/xwpongithub/vue-better-calendar","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwpongithub%2Fvue-better-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwpongithub%2Fvue-better-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwpongithub%2Fvue-better-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwpongithub%2Fvue-better-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xwpongithub","download_url":"https://codeload.github.com/xwpongithub/vue-better-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745195,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","javascript","vuejs2"],"created_at":"2024-10-05T08:07:23.487Z","updated_at":"2025-05-12T13:15:18.220Z","avatar_url":"https://github.com/xwpongithub.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-better-calendar\nA calendar component for vuejs.\n\n[![npm](https://img.shields.io/npm/v/vue-better-calendar.svg?style=flat-square)](https://www.npmjs.com/package/vue-better-calendar)\n[![downloads](https://img.shields.io/npm/dm/vue-better-calendar.svg)](https://www.npmjs.com/package/vue-better-calendar)\n\n## 关于vue-better-calendar\nvue-better-calendar是一个基于vue的日期选择插件，它提供了四种日期选择模式（范围选择，多选，签到，单选）\n\n## 在线示例\n[签到模式](https://codepen.io/lijinrong/pen/pLpxvo?editors=1111)\n\n[单选模式](https://codepen.io/lijinrong/pen/bvvrpW)\n\n[范围选择模式](https://codepen.io/lijinrong/pen/MVGKLP?editors=1010)\n\n## 安装\n\n### 使用npm安装\n```node\n  npm install --save vue-better-calendar\n```\n\n### ES6方式导入\n```javascript\n  import VueBetterCalendar from 'vue-better-calendar'\n  Vue.use(VueBetterCalendar)\n```\n\n### 在组件中引入\n```javascript\n  \u003cvue-better-calendar\u003e\u003c/vue-better-calendar\u003e\n```\n\n### 直接连入页面使用\n```javascript\n  \u003cscript src=\"https://unpkg.com/vue@2.5.16/dist/vue.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/vue-better-calendar@1.3.0/dist/vue-better-calendar.js\"\u003e\u003c/script\u003e\n```\n\n```html\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-better-calendar\u003e\u003c/vue-better-calendar\u003e\n  \u003c/div\u003e\n```\n\n```javascript\n  \u003cscript\u003e\n    new Vue({\n      el: '#app'\n    })\n  \u003c/script\u003e\n```\n\n### 参数\n|名称|类型|默认值|说明|\n|:-:|:-:|:-:|:-:|\n|mode|String|multi|日期选择模式，支持四个有效值：multi 多选，range 范围选择，sign 签到，single 单选|\n|notSignInOtherMonthsTxt|String|不能在本月外进行签到|签到时点击本月外日期时的文本提示|\n|notSignInOtherDaysTxt|String|签到只能在当天进行|签到时点击本月内非当天日期时的文本提示|\n|alreadySignTxt|String|本日已经进行过签到|签到时点击已经签过到的日期时的文本提示|\n|signSuccessTxt|String|签到成功|签到成功时的文本提示|\n|limitBeginDate|Array|[]|限制可被选择的日期范围的开始日期，传参格式:[2018, 3, 1]|\n|limitEndDate|Array|[]|限制可被选择的日期范围的结束日期，传参格式:[2018, 4, 24]|\n|signedDates|Array|[]|已经签过到的日期,仅在签到模式下有用，传参格式：['2018-03-01', '2018-03-05']|\n|isZeroPad|Boolean|true|点选日期后返回结果中的日期月份和天数不够两位数时是否补0|\n|disabledDates|Array|[]|设置不可被选择的日期，传参格式:[[2018, 3, 1], [2018, 3, 24]]|\n|showLunar|Boolean|true|是否显示农历|\n|showDisableDate|Boolean|true|是否显示不可被选择的日期|\n|weeks|Array|['日', '一', '二', '三', '四', '五', '六']|星期栏文本|\n|months|Array|['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']|月份栏文本|\n|events|Object|{'2018-3-22': {className: 'price',title: '¥232',styles: {}}}|为某个日期添加单独的事件和文本|\n|ctlColor|String|#5e7a88|切换按钮颜色|\n|labelToday|Object|{showLabelToday: true,label: '今天'}|当天是否将显示的日期换成文本|\n|disableBeforeToday|Boolean|false|是否将今天以前的日期全部设为不可用|\n|disableAfterToday|Boolean|false|是否将今天以后的日期全部设为不可用|\n|hideHeader|Boolean|false|隐藏顶部日期月份选择显示|\n|hideWeeks|Boolean|false|隐藏星期显示|\n\n### 支持事件\n|名称|回调参数|说明|\n|:-:|:-:|:-:|\n|select-year|year|选择年份时触发|\n|select-month|month, year|选择月份时触发|\n|select-range-date|selectedDates|范围选择模式下，选中想选择的日期范围时触发，返回选中的所有日期|\n|select-multi-date|selectedMultiDays|多选模式下，选中想选择的日期时触发，返回选中的所有日期|\n|click-disable-date|date,mode|点击不可选择日期时触发，返回所点击的日期和当前日期模式|\n|select-sign-date|{status,msg,signedDates}|点击日期签到时触发，status表示签到是否成功，msg为此次签到是否成功的提示语，signedDates为目前已经签过到的所有日期|\n|select-single-date|date|单选模式下，选则日期时触发，返回所选择的日期|\n|reset-select-range-date|无回调参数|范围选择模式下，重置选择的日期时触发|\n|next|month, year|切换到下一个月或者下一年时触发|\n|prev|month, year|切换到上一个月或者上一年时触发|\n\n### 支持方法\n|名称|描述|\n|:-:|:-:|\n|setToday|选中当天日期|\n|resetRangDate|范围选择模式下，重置已选择的日期范围|\n|sign|单独通过按钮点击进行签到，会触发select-sign-date事件|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwpongithub%2Fvue-better-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxwpongithub%2Fvue-better-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwpongithub%2Fvue-better-calendar/lists"}