{"id":19530546,"url":"https://github.com/howbizarre/vue-month-calendar","last_synced_at":"2026-04-13T03:01:48.633Z","repository":{"id":65343885,"uuid":"590351388","full_name":"howbizarre/vue-month-calendar","owner":"howbizarre","description":"NPM package to draws a given month with its days using base on Vue 3, Tailwindcss and Typescript.","archived":false,"fork":false,"pushed_at":"2024-04-24T13:07:21.000Z","size":218,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T23:09:15.811Z","etag":null,"topics":["calendar","component","dark-mode","date","javascript","month","node","tailwindcss","typescript","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@howbizarre/vue-month-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/howbizarre.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-18T08:02:51.000Z","updated_at":"2024-05-30T12:23:29.070Z","dependencies_parsed_at":"2024-03-25T11:41:33.418Z","dependency_job_id":"c7af467b-3da7-4755-9150-05baa9231bc8","html_url":"https://github.com/howbizarre/vue-month-calendar","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/howbizarre/vue-month-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howbizarre%2Fvue-month-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howbizarre%2Fvue-month-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howbizarre%2Fvue-month-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howbizarre%2Fvue-month-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/howbizarre","download_url":"https://codeload.github.com/howbizarre/vue-month-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howbizarre%2Fvue-month-calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263833416,"owners_count":23517373,"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","component","dark-mode","date","javascript","month","node","tailwindcss","typescript","vue","vue3","vuejs"],"created_at":"2024-11-11T01:33:44.420Z","updated_at":"2026-04-13T03:01:48.571Z","avatar_url":"https://github.com/howbizarre.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Month Calendar\n\nThis simple UI component renders a month from a year. Sets a date as active and gave you the ability to change it.\n\nAt the beginning - the active date is the current date.\n\nThe component also **support Dark** or White **themes**.\n\n## Demo\n\n[https://bizarre.how/calendar/](https://bizarre.how/calendar/)\n\n## Dependency\n\n- [Vue 3](https://vuejs.org/)\n- [Typescript Calendar Date](https://github.com/tskj/typescript-calendar-date)\n- [Tailwindcss](https://tailwindcss.com/)\n\n## Install\n\nIn to your Vue 3 project install as dependency:\n\n```sh\nnpm i @howbizarre/vue-month-calendar\n```\n\n## Usage\n\n```javascript\n\u003ctemplate\u003e  \n  \u003cVueMonthCalendar\n    v-if=\"isMounted\"\n\n    @get-date=\"getDate\"\n    @change-year=\"changeYear\"\n    @change-month=\"changeMonth\"\n    @decrement-year=\"decrementYear\"\n    @increment-year=\"incrementYear\"\n    @next-month=\"nextMonth\"\n    @prev-month=\"prevMonth\"\n    @reset-month=\"resetMonth\"\n    @change-first-week-day=\"changeFirstWeekDay\"\n\n    :setEvents=\"setEvents\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { VueMonthCalendar } from \"@howbizarre/vue-month-calendar\";\nimport \"@howbizarre/vue-month-calendar/dist/style.css\";\nimport { ref, onMounted } from \"vue\";\n\nconst isMounted = ref(false);\n\nconst setEvents = [\n  {\n    date: 30,\n    month: 1,\n    year: 2023\n  },\n  {\n    date: 5,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 5,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 5,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 14,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 14,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 10,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 17,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 22,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 22,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 23,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 28,\n    month: 2,\n    year: 2023\n  },\n  {\n    date: 10,\n    month: 3,\n    year: 2023\n  }\n];\n\nfunction getDate(activeDate: { month: number, year: number, date: number }) {\n  console.group(\"The returned data is:\");\n  console.log(\"Day: \", activeDate.date);\n  console.log(\"Month: \", activeDate.month);\n  console.log(\"Year: \", activeDate.year);\n  console.groupEnd();\n}\n\nfunction changeYear(yearValue: number): void {\n  console.log(\"Change Year to: \", yearValue);\n}\n\nfunction changeMonth(monthValue: number): void {\n  console.log(\"Change Month to: \", monthValue);\n}\n\nfunction decrementYear(decYear: number): void {\n  console.log(\"Decrement Year: \", decYear);\n}\n\nfunction incrementYear(incYear: number): void {\n  console.log(\"Increment Year: \", incYear);\n}\n\nfunction nextMonth(nextMonth: number): void {\n  console.log(\"Next Month: \", nextMonth);\n}\n\nfunction prevMonth(prevMonth: number): void {\n  console.log(\"Previous Month: \", prevMonth);\n}\n\nfunction resetMonth(resetMonth: number): void {\n  console.log(\"Reset Month: \", resetMonth);\n}\n\nfunction changeFirstWeekDay(firstWeekDay: number): void {\n  console.log(\"Change First Week Day: \", firstWeekDay);\n}\n\nonMounted(() =\u003e isMounted.value = true);\n\u003c/script\u003e\n```\n\n## Customize colors\n\nYou can customize the colors of the calendar by overriding the CSS variables.\n\n```css\n:root {\n  --white: white;\n  --black: black;\n\n  --zinc-400: #a1a1aa;\n  --zinc-600: #52525b;\n  --zinc-600-25: #52525b25;\n  --zinc-800: #27272a;\n  --zinc-900: #18181b;\n  --zinc-900-5: #18181b05;\n  --zinc-900-50: #18181b50;\n\n  --teal-400: #2dd4bf;\n  --teal-500: #14b8a6;\n  --teal-500-25: #14b8a625;\n  --teal-600: #0891b2;\n  --teal-600-50: #0891b250;\n  --teal-700: #0e7490;\n  --teal-800: #155e75;\n\n  --sky-500: #0ea5e9;\n  --sky-500-5: #0ea5e905;\n  --sky-500-25: #0ea5e925;\n\n  --blue-600: #2563eb;\n\n  --container-sm-w: 350px;\n}\n```\n\nThe colors are with the names and values from Tailwindcss, and for transparency I use HEX with an alpha channel and added to the name of the var.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowbizarre%2Fvue-month-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhowbizarre%2Fvue-month-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowbizarre%2Fvue-month-calendar/lists"}