{"id":13535802,"url":"https://github.com/GeoffZhu/vue-event-calendar","last_synced_at":"2025-04-02T02:31:27.093Z","repository":{"id":57219706,"uuid":"75699129","full_name":"GeoffZhu/vue-event-calendar","owner":"GeoffZhu","description":"A simple events calendar for Vue2, no dependencies except Vue2.","archived":false,"fork":false,"pushed_at":"2023-03-01T19:03:14.000Z","size":1671,"stargazers_count":634,"open_issues_count":31,"forks_count":228,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-03-24T03:54:52.778Z","etag":null,"topics":["event-calendar","vue","vue-calendar"],"latest_commit_sha":null,"homepage":"http://geoffzhu.cn/vue-event-calendar/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GeoffZhu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-06T05:51:19.000Z","updated_at":"2025-03-14T08:27:21.000Z","dependencies_parsed_at":"2024-01-02T23:39:47.733Z","dependency_job_id":null,"html_url":"https://github.com/GeoffZhu/vue-event-calendar","commit_stats":{"total_commits":67,"total_committers":20,"mean_commits":3.35,"dds":0.3731343283582089,"last_synced_commit":"d3210685dfde12b313c540012cf1001723e27b40"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeoffZhu%2Fvue-event-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeoffZhu%2Fvue-event-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeoffZhu%2Fvue-event-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeoffZhu%2Fvue-event-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeoffZhu","download_url":"https://codeload.github.com/GeoffZhu/vue-event-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743650,"owners_count":20826571,"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":["event-calendar","vue","vue-calendar"],"created_at":"2024-08-01T09:00:27.704Z","updated_at":"2025-04-02T02:31:26.755Z","avatar_url":"https://github.com/GeoffZhu.png","language":"Vue","funding_links":[],"categories":["Vue","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","日历","UI Components","Calendar"],"readme":"# vue-event-calendar\n\n\u003e A simple events calendar for Vue2, no dependencies except Vue2. responsive \u0026 mobile first.\n\u003e [Live Demo Here](http://geoffzhu.cn/vue-event-calendar/)\n\n![](http://o80ronwlu.bkt.clouddn.com/vue-event-calendar.gif)\n\n[![npm version](https://img.shields.io/npm/v/vue-event-calendar.svg)](https://www.npmjs.com/package/vue-event-calendar)\n\n[中文文档](https://github.com/GeoffZhu/vue-event-calendar/blob/master/README.zh.md)\n\n## Requirements\n- vue: ^2.0.0\n\n## Usage\n#### install\n\n``` sh\n npm install vue-event-calendar --save\n```\n\n#### main.js\n\n```javascript\nimport 'vue-event-calendar/dist/style.css' //^1.1.10, CSS has been extracted as one file, so you can easily update it.\nimport vueEventCalendar from 'vue-event-calendar'\n// locale can be 'zh' , 'en' , 'es', 'pt-br', 'ja', 'ko', 'fr', 'it', 'ru', 'de', 'vi', 'ua', 'no, 'no-nn'\nVue.use(vueEventCalendar, {locale: 'en'}) \n```\n\n#### file.vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-event-calendar :events=\"demoEvents\"\u003e\u003c/vue-event-calendar\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      demoEvents: [{\n        date: '2016/11/12', // Required\n        title: 'Foo' // Required\n      }, {\n        date: '2016/12/15',\n        title: 'Bar',\n        desc: 'description',\n        customClass: 'disabled highlight' // Custom classes to an calendar cell\n      }]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Custom date title\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-event-calendar :title=\"title\" :events=\"demoEvents\" @dayChanged=\"handleDayChange\"\u003e\u003c/vue-event-calendar\u003e\n\u003c/template\u003e\n```\n\nIn most cases, the default date string is enough，but when you want a custom date title, you can give a prop ```title```.\nIt is important to noticed that the title will be replaced with a static String you passed in. You need to monitor the dayChanged event and change the title by youself.\n\n## Customization event template\nIf you want customization event template. required Vue: ^2.1.0. Because I use new feature(Scoped Slots) of ^2.1.0\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-event-calendar :events=\"demoEvents\"\u003e\n      \u003ctemplate scope=\"props\"\u003e\n        \u003cdiv v-for=\"(event, index) in props.showEvents\" class=\"event-item\"\u003e\n          \u003c!-- In here do whatever you want, make you owner event template --\u003e\n          {{event}}\n        \u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/vue-event-calendar\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      demoEvents: [{\n        date: '2016/12/15',\n        title: 'eat',\n        desc: 'longlonglong description'\n      },{\n        date: '2016/11/12',\n        title: 'this is a title'\n      }]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Component Events\nCan handle two Events, @day-changed and @month-changed, callback params like ``` {date: '2017/06/23', events: []} ```.\n\n```javascript\n\u003ctemplate\u003e\n  \u003cvue-event-calendar\n    :events=\"demoEvents\"\n    @day-changed=\"handleDayChanged\"\n    @month-changed=\"handleMonthChanged\"\u003e\n  \u003c/vue-event-calendar\u003e\n\u003c/template\u003e\n```\n\n## Options\n\n```\n  // When Vue.use, options\n  {\n    locale: 'en',\n    color: 'black', //Set main color\n    className: 'Custom className for current clicked date', // (default: 'selected-day')\n    weekStartOn: 'week Start on which day'  // Can be: 1, 2, 3, 4, 5, 6, 0 (default: 0)\n  }\n```\n\n## API\n```javascript\n// NextMonth\nthis.$EventCalendar.nextMonth()\n```\n```javascript\n// PreMonth\nthis.$EventCalendar.preMonth()\n```\n```javascript\n//ToDate\nthis.$EventCalendar.toDate('2016/11/12')\n```\nMore in [Demo Folder](https://github.com/GeoffZhu/vue-event-calendar/tree/master/demo)\n\n## Develop\n```\nnpm run dev  //develop\nnpm run build //production\n```\n\n## Change log\n\n##### 1.3.6 -\u003e 1.4.0\n\n- Remove today background, use a small dot below the date\n- Increase the selected date style\n\n##### 1.4.0 -\u003e 1.4.8\n\n- Add week start on\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeoffZhu%2Fvue-event-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGeoffZhu%2Fvue-event-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeoffZhu%2Fvue-event-calendar/lists"}