{"id":19443135,"url":"https://github.com/lbgm/vue-pro-calendar","last_synced_at":"2025-05-08T21:21:21.423Z","repository":{"id":63094532,"uuid":"562827499","full_name":"lbgm/vue-pro-calendar","owner":"lbgm","description":"Professional Calendar for Vue","archived":false,"fork":false,"pushed_at":"2024-06-05T13:40:46.000Z","size":260,"stargazers_count":83,"open_issues_count":0,"forks_count":15,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-26T17:47:43.011Z","etag":null,"topics":["calendar","pro","professional","typescript","vite","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbgm.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-07T10:46:44.000Z","updated_at":"2025-02-21T11:44:03.000Z","dependencies_parsed_at":"2024-06-01T23:06:06.905Z","dependency_job_id":"b692a2f8-8ff1-4ea6-b247-c9ea09c18572","html_url":"https://github.com/lbgm/vue-pro-calendar","commit_stats":{"total_commits":121,"total_committers":8,"mean_commits":15.125,"dds":0.5619834710743802,"last_synced_commit":"26ff70876759a125dae67446f312092fb862de3b"},"previous_names":["lbgm/vue-pro-calendar","lbgm/pro-calendar-vue"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fvue-pro-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fvue-pro-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fvue-pro-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fvue-pro-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbgm","download_url":"https://codeload.github.com/lbgm/vue-pro-calendar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252906788,"owners_count":21823078,"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","pro","professional","typescript","vite","vue","vuejs"],"created_at":"2024-11-10T15:42:17.929Z","updated_at":"2025-05-08T21:21:21.379Z","avatar_url":"https://github.com/lbgm.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pro Calendar\n\nAnother one Best Professional Calendar ever. looking for [Angular version](https://github.com/lbgm/ng-pro-calendar) ?\n\u003e Based on `vite` for `Vue 3`\n\n- [Pro Calendar](#pro-calendar)\n  - [Install](#install)\n  - [Screenshot with Native Datepicker](#screenshot-with-native-datepicker)\n  - [Screenshot with VCalendar Datepicker](#screenshot-with-vcalendar-datepicker)\n  - [Props \\\u0026 Types](#props--types)\n    - [Type `Configs`](#type-configs)\n  - [Use](#use)\n  - [Events](#events)\n  - [Slots](#slots)\n  - [Custom HTML Events fired](#custom-html-events-fired)\n\n## Install\n\n```sh\nnpm i vue-pro-calendar\n```\n\n## Screenshot with Native Datepicker\n\n![vue-pro-calendar screenshot with native datepicker](https://user-images.githubusercontent.com/92580505/283180919-d601c5be-1f9d-4df4-a900-79b3efd932e7.png)\n\n## Screenshot with VCalendar Datepicker\n\n![vue-pro-calendar screenshot with vcalendar datepicker](https://user-images.githubusercontent.com/92580505/283180689-95f7939b-639b-4093-9005-ad1988b332c9.png)\n\n## Props \u0026 Types\n\n\u003e Import and inspect types `T_View`, `Configs`, `Appointment`, `T_LANG` from vue-pro-calendar\n\n| Prop | Type | Required | Default |\n| :---     | :---     | :---         | :---        |\n| `date`   | `string`\u003cbr\u003e`// iso string` | No           | `undefined` |\n| `view`   | `T_View` | No           | `\"week\"`    |\n| `events` | `Appointment[]` | No    | `[]`        |\n| `loading`| `boolean` | No          | `false`     |\n| `config` | `Configs` | No          | `DEFAULT_CONFIGS` |\n| `lang`   | `T_LANG`  | No          | only supported languages; default: `undefined` (the calendar will use browser locale). |\n\n\u003e You can import `DEFAULT_CONFIGS` from vue-pro-calendar\n\n### Type `Configs`\n\n\u003e When you set `nativeDatepicker` to `false` or `undefined`, VCalendar DatePicker will be used.\n\n\u003e When you set a property with type `T_Action` to `undefined`, the action is disabled.\n\n## Use\n\n`main.ts`\n\n```js\nimport { ProCalendar } from \"vue-pro-calendar\";\n\n//...\n\napp.use(ProCalendar);\n```\n\n`App.vue`\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport \"vue-pro-calendar/style\";\nimport { ref, type Ref } from \"vue\";\nimport type { Configs, Appointment, T_LANG } from \"vue-pro-calendar\";\n\nconst cfg = ref\u003cConfigs\u003e({\n  viewEvent: undefined,\n  reportEvent: {\n    icon: true,\n    text: \"\",\n  },\n  searchPlaceholder: \"\",\n  eventName: \"\",\n  closeText: \"\",\n  nativeDatepicker: true,\n  todayButton: true,\n  firstDayOfWeek: 1,\n});\n\nconst evts: Ref\u003cAppointment[]\u003e = ref([\n  {\n    date: \"2022-11-19T14:00:00.000Z\",\n    comment: \"\",\n    id: \"cl32rbkjk1700101o53e3e3uhn\",\n    keywords: \"Projet BAMBA\",\n    name: \"MONTCHO Kévin\",\n  },\n  //...\n]);\n\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- all props are optional --\u003e\n  \u003cpro-calendar\n    :events=\"evts\"\n    :loading=\"false\"\n    :config=\"cfg\"\n    view=\"month\"\n    date=\"2022-11-10T00:00:00.000Z\"\n    @calendarClosed=\"void 0\"\n    @fetchEvents=\"void 0\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Events\n\n`@calendarClosed`:\n\u003e This event is fired when user clicks close button.\n\n`@fetchEvents`:\n\u003e This event is fired when date selected changes. `$event: { start: string; end: string }`. `start` and `end` are iso string date.\n\n## Slots\n\nDraw your own calendar using scoped slots\n\n```html\n\u003cpro-calendar\n  :events=\"evts\"\n  :loading=\"false\"\n  :config=\"cfg\"\n  view=\"week\"\n  date=\"'isoStringDate'\"\n\u003e\n  \u003ctemplate #leftSwitchArrow\u003e\n    \u003c!-- replace left switch arrow with this slot --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #rightSwitchArrow\u003e\n    \u003c!-- replace left switch arrow with this slot --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #closeButton\u003e\n    \u003c!-- replace close button with this slot --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #loader=\"{ calendarGotLoading }\"\u003e\n    \u003c!-- replace calendar loader with this slot --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #searchIcon\u003e\n    \u003c!-- replace search widget icon with this slot --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #dateLeftArrow\u003e\n    \u003c!-- replace date picker left arrow with this --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #dateRightArrow\u003e\n    \u003c!-- replace date picker right arrow with this --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #sideEvent=\"{ dateSelected, calendarEvents }\"\u003e\n    \u003c!-- use this slot to show side event in appearance you want --\u003e\n    \u003c!--\n      dateSelected: Date;\n      calendarEvents: Appointment[]; // all events\n    --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #eventCard=\"{ date, time, cardEvent }\"\u003e\n    \u003c!-- use this slot to show calendar event in appearance you want --\u003e\n    \u003c!--\n      date: Date;\n      time: string;\n      cardEvent: Appointment[]; // events according to date/time\n    --\u003e\n  \u003c/template\u003e\n\u003c/pro-calendar\u003e\n```\n\n## Custom HTML Events fired\n\n`calendar.request.view` \u0026 `calendar.request.report`\n\n\u003e When the user clicks on view or report action, a custom html event is fired with the id of event in detail.\n\u003e You can listen these events like this:\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref, onMounted } from \"vue\";\nimport { E_CustomEvents } from \"vue-pro-calendar\"\n\nonMounted(() =\u003e {\n  [E_CustomEvents.VIEW, E_CustomEvents.REPORT].forEach((e: string) =\u003e {\n    document.body.addEventListener(e, (event: Event | CustomEvent) =\u003e {\n      console.log({ event });\n    });\n  });\n});\n\n\u003c/script\u003e\n```\n\n\u003e On default `#sideEvent template`, when user clicks on event, `calendar.request.view` is fired.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fvue-pro-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbgm%2Fvue-pro-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fvue-pro-calendar/lists"}