{"id":13535747,"url":"https://github.com/Wanderxx/vue-fullcalendar","last_synced_at":"2025-04-02T02:31:22.765Z","repository":{"id":38411778,"uuid":"62790563","full_name":"Wanderxx/vue-fullcalendar","owner":"Wanderxx","description":"vue calendar fullCalendar. no jquery required. Schedule events management","archived":false,"fork":false,"pushed_at":"2021-07-09T14:15:54.000Z","size":12082,"stargazers_count":1508,"open_issues_count":98,"forks_count":385,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-03-30T13:06:10.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wanderxx.github.io/vue-fullcalendar/","language":"JavaScript","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/Wanderxx.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}},"created_at":"2016-07-07T08:44:58.000Z","updated_at":"2025-03-12T16:49:21.000Z","dependencies_parsed_at":"2022-09-15T10:51:05.576Z","dependency_job_id":null,"html_url":"https://github.com/Wanderxx/vue-fullcalendar","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/Wanderxx%2Fvue-fullcalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wanderxx%2Fvue-fullcalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wanderxx%2Fvue-fullcalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wanderxx%2Fvue-fullcalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wanderxx","download_url":"https://codeload.github.com/Wanderxx/vue-fullcalendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743623,"owners_count":20826565,"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":[],"created_at":"2024-08-01T09:00:25.361Z","updated_at":"2025-04-02T02:31:22.338Z","avatar_url":"https://github.com/Wanderxx.png","language":"JavaScript","funding_links":[],"categories":["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","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","日历","UI Components","Calendar"],"readme":"##vue-fullcalendar\n\n[![npm](https://img.shields.io/npm/v/vue-fullcalendar.svg?maxAge=2592000?style=flat-square)]()\n[![npm](https://img.shields.io/npm/dt/vue-fullcalendar.svg?maxAge=2592000?style=flat-square)]()\n\n\u003eWorks for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only supports month view. It's inspired by fullCalendar.io but not cloned by it. So please read the docs here below to understand all features.\n\n[Simple Live Demo](https://wanderxx.github.io/vue-fullcalendar/)\n\n![demo.gif](http://g.recordit.co/vovteJ5m9o.gif)\n\n### install\n\nBy NPM\n\n`@latest` works for Vue2\n`0.1.11` works for Vue1.*\n\n```shell\n// for Vue2\nnpm install vue-fullcalendar@latest --save \n\n// for Vue1\nnpm install vue-fullcalendar@0.1.11 --save \n```\nor download code and include it\n\n```shell\n\u003cscript src='dist/vue-fulcalendar.min.js'\u003e\n```\n\n### Usage\n\nRegister component globally\n\n```javascript\n// Your entry index.js\nimport Vue from 'vue'\nimport App from './App'\n\nimport fullCalendar from 'vue-fullcalendar'\n\nVue.component('full-calendar', fullCalendar)\n\n// Vue2\nnew Vue({\n  el : '#app',\n  render: h =\u003e h(App),\n  template : '\u003cApp/\u003e',\n  components : {\n    App\n  }\n})\n\n//Vue1\n\nnew Vue({\n\tel : 'body',\n\tcomponents : {\n\t\tApp\n\t}\n})\n```\n\nor register locally in your `.vue` file\n\n\n### Example\n\n```html\n\u003cfull-calendar :events=\"fcEvents\" locale=\"en\"\u003e\u003c/full-calendar\u003e\n```\n\n```javascript\nvar demoEvents = [\n\t{\n      title : 'Sunny Out of Office',\n      start : '2016-08-25',\n      end : '2017-07-27'\n    }\n]\nexport default {\n  data () {\n\treturn {\n\t  fcEvents : demoEvents\n\t}\n  },\n  components : {\n\t'full-calendar': require('vue-fullcalendar')\t\n  }\n}\n```\n\nA sample screenshot is here,\n![Yeah you see the calendar](http://upload-images.jianshu.io/upload_images/1678581-169e72e080ce5fad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n### Docs\n\n#### props\n\n1. **events** : Events will be displayed on the calendar\n\n\t```javascript\n\tevents = [\n\t  {\n\t    title     :  'event1',\n\t    start     : '2016-07-01'，\n\t    cssClass  : 'family',\n\t    YOUR_DATA : {}\n\t  },\n\t  {\n\t    title     : 'event2',\n\t    start     : '2016-07-02',\n\t    end       : '2016-07-03',\n\t    cssClass  : ['family', 'career']\n\t    YOUR_DATA : {}\n\t  }\n\t]         \n\t```\n\n\t- `title` is the title of this event, will be displayed on calendar\n\t\n\t- `start` is the start day of this event\n\t\n\t- `end` is the end day of this event\n\n\t- `cssClass` is css class of each event label, such that, you will be able to set different colors, style ..\n\t\n\t- `YOUR_DATA` You can define as many data you want as possible\n\n2. **locale** : langague of things like monthNames weekNames and titleFormat. Support same locales than [moment.js](http://momentjs.com/docs/#/i18n/)\n\t\n\t- `default` : `en`\n\n3. **firstDay** : first day of the week, `Number`, default: 0 (Sunday)\n\tSunday=0, Monday=1, Tuesday=2, etc.\n\tAny number smaller than 0 or larger than 6 will be set to 0.\n\n    - `default` : 0\n\n#### events\n\nfc will dispatch some events out.\n\n1. **changeMonth** : Every time you click arrow to next/last month, fc will dispatch **changeMonth**\n\n\t```javascript\n\tthis.$dispatch('changeMonth', start, end, current)\n\t```\n\t\n\t- `start` is the first day of current monthView (`moment` object)\n\t\n\t- `end` is the last day of current monthView (`moment` object)\n\t\n\t- `current` is the first day of current month (`moment` object) \n\n2. **eventClick** : Every time you click a event, fc will dispatch **eventClick**\n\n\t```javascript\n\tthis.$dispatch('eventClick', event, jsEvent, pos)\n\t```\n\t\n\t- `event` is an Event object hold the event's information\n\t\n\t- `jsEvent` holds the native javascript event\n\t\n\t- `pos` is the relative coordinates of fc\n\n\n3. **dayClick** : fc dispatch it when you click a day slot.\n\n\t```javascript\n\tthis.$dispatch('eventClick', day, jsEvent)\n\t```\n\t\n\t- `date` is a Date Object of the day you click (`moment` object)\n\t\n\t- `jsEvent` holds the native javascript event\n\n4. **moreClick** : fc dispatch it when you click a `more` button\n\n    - `date` is the date corresponding to the \"more\" clicked (`moment` object) \n    \n    - `events` is the list of events that will be in the box\n    \n    - `jsEvent` holds the native javascript event\n\n#### slots\n\nYou will be able to register your own stuff by using slots\n\n1. **fc-header-left** : top left area\n\n2. **fc-header-right** : top right area. In my case, I added a filter menu there \n\n3. **fc-body-card** : inside the body area, usually working with `EventClick`, to display a event detail\n\n###END\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWanderxx%2Fvue-fullcalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWanderxx%2Fvue-fullcalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWanderxx%2Fvue-fullcalendar/lists"}