{"id":25187585,"url":"https://github.com/pawankolhe/color-calendar","last_synced_at":"2025-04-05T09:07:54.565Z","repository":{"id":37468312,"uuid":"282430577","full_name":"PawanKolhe/color-calendar","owner":"PawanKolhe","description":"📅 A customizable calendar JavaScript UI widget/component library with the ability to show events.","archived":false,"fork":false,"pushed_at":"2023-11-01T09:58:30.000Z","size":5260,"stargazers_count":178,"open_issues_count":40,"forks_count":69,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T03:35:32.341Z","etag":null,"topics":["calendar","calendar-picker","calendar-ui","calendar-widget","color-calendar","date-picker","javascript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/color-calendar","language":"TypeScript","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/PawanKolhe.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":"2020-07-25T11:31:03.000Z","updated_at":"2025-03-22T09:17:17.000Z","dependencies_parsed_at":"2024-06-18T17:10:58.364Z","dependency_job_id":"dcb2ee7b-16c8-4795-8565-2c4835920de9","html_url":"https://github.com/PawanKolhe/color-calendar","commit_stats":{"total_commits":119,"total_committers":1,"mean_commits":119.0,"dds":0.0,"last_synced_commit":"b3e625320c112de75057043d6ffa82a364ecdccc"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PawanKolhe%2Fcolor-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PawanKolhe%2Fcolor-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PawanKolhe%2Fcolor-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PawanKolhe%2Fcolor-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PawanKolhe","download_url":"https://codeload.github.com/PawanKolhe/color-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312080,"owners_count":20918344,"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","calendar-picker","calendar-ui","calendar-widget","color-calendar","date-picker","javascript"],"created_at":"2025-02-09T19:48:12.296Z","updated_at":"2025-04-05T09:07:54.005Z","avatar_url":"https://github.com/PawanKolhe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\u003cimg src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/logo.png\" alt=\"logo\" width=\"20%\" /\u003e\u003c/p\u003e\n\u003cp\u003e\n    \u003ch1\u003eColor Calendar\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/color-calendar\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/color-calendar?style=flat-square\" alt=\"npm version\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/color-calendar\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dw/color-calendar?style=flat-square\" alt=\"npm downloads\" /\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square\" alt=\"size\" /\u003e\n    \u003ca href=\"https://www.jsdelivr.com/package/npm/color-calendar\"\u003e\n        \u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/color-calendar/badge\" alt=\"jsdelivr\" /\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://hitcounter.pythonanywhere.com/count/tag.svg?url=https%3A%2F%2Fgithub.com%2FPawanKolhe%2Fcolor-calendar\" alt=\"Hits\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/color-calendar?style=flat-square\" alt=\"license\" /\u003e\n\u003c/p\u003e\n\n[![CircleCI](https://circleci.com/gh/PawanKolhe/color-calendar.svg?style=svg)](https://circleci.com/gh/PawanKolhe/color-calendar)\n\n\u003cp\u003e\n    A customizable events calendar component library. Checkout \u003ca href=\"https://online-tech-confs.herokuapp.com/\"\u003eDemo 1\u003c/a\u003e, \u003ca href=\"https://v84yk.csb.app/\"\u003eDemo 2\u003c/a\u003e and \u003ca href=\"https://codesandbox.io/s/color-calendar-bnwdu\"\u003eDemo 3.\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- # Color Calendar\n![npm](https://img.shields.io/npm/v/color-calendar?style=flat-square)\n![npm](https://img.shields.io/npm/dw/color-calendar?style=flat-square)\n![npm bundle size](https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square)\n[![](https://data.jsdelivr.com/v1/package/npm/color-calendar/badge)](https://www.jsdelivr.com/package/npm/color-calendar)\n![HitCount](http://hits.dwyl.com/PawanKolhe/color-calendar.svg)\n![NPM](https://img.shields.io/npm/l/color-calendar?style=flat-square) --\u003e\n\n![Color Calendar](https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/poster_calendar.png)\n\n- [Features](#features)\n- [Getting Started](#getting-started)\n  - [CDN](#cdn)\n  - [NPM](#npm)\n- [Usage](#usage)\n  - [Basic](#usage-basic)\n  - [React](#usage-react)\n  - [Vue](#usage-vue)\n- [Options](#options)\n- [Events](#events)\n- [Methods](#methods)\n- [Types](#types)\n- [Themes](#themes)\n- [Bug Reporting](#bug)\n- [Feature Request](#feature-request)\n- [Release Notes](#release-notes)\n- [License](#license)\n\n\u003ca id=\"features\"\u003e\u003c/a\u003e\n\n## 🚀 Features\n\n- Zero dependencies\n- Add events to calendar\n- Perform some action on calendar date change\n- Month and year picker built-in\n- Themes available\n- Fully customizable using CSS variables, passing options parameters while creating calendar, or overriding CSS.\n- [Request more features](#feature-request)...\n\n\u003ca id=\"getting-started\"\u003e\u003c/a\u003e\n\n## 📦 Getting Started\n\n### CDN\n\n#### JavaScript\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.js\"\u003e\n```\n\nAlso available on [unpkg](https://unpkg.com/browse/color-calendar/dist/).\n\n#### CSS\n\nPick a css file according to the theme you want.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css\"\n/\u003e\n\u003c!-- or --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css\"\n/\u003e\n```\n\n#### Fonts\n\nGet fonts from [Google Fonts](https://fonts.google.com/)\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700\u0026display=swap\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\nCheck what fonts the [theme](#themes) needs or pass your own fonts in [options](#options-fonts).\n\n### NPM\n\n\u003e _You might need to use a module bundler such as webpack, rollup, parcel, etc._\n\n#### Installation\n\n```bash\nnpm i color-calendar\n```\n\n#### Import\n\n```javascript\nimport Calendar from \"color-calendar\";\n```\n\n#### CSS\n\n```javascript\nimport \"color-calendar/dist/css/theme-\u003cTHEME-NAME\u003e.css\";\n```\n\nThen add fonts.\n\n\u003ca id=\"usage\"\u003e\u003c/a\u003e\n\n## 🔨 Usage\n\n\u003ca id=\"usage-basic\"\u003e\u003c/a\u003e\n\n### Basic\n\n#### JavaScript\n\n```javascript\nnew Calendar();\n```\n\n_Or_ you can pass in **options**.\n\n```javascript\nnew Calendar({\n  id: \"#color-calendar\",\n  calendarSize: \"small\",\n});\n```\n\n#### HTML\n\n```html\n\u003cdiv id=\"color-calendar\"\u003e\u003c/div\u003e\n```\n\n[Example](https://codesandbox.io/s/color-calendar-bnwdu)\n\n\u003ca id=\"usage-react\"\u003e\u003c/a\u003e\n\n### React\n\n[Example](https://codesandbox.io/s/color-calendar-react-y0cyf?file=/src/CalendarComponent.jsx)\n\n\u003ca id=\"usage-vue\"\u003e\u003c/a\u003e\n\n### Vue\n\n[Example](https://codesandbox.io/s/color-calendar-vue-byo6e?file=/src/components/ColorCalendar.vue)\n\n\u003ca id=\"options\"\u003e\u003c/a\u003e\n\n## ⚙️ Options\n\n### `id`\n\nType: `String`  \nDefault: `#color-calendar`\n\nSelector referencing HTMLElement where the calendar instance will bind to.\n\n### `calendarSize`\n\nType: `String`  \nDefault: `large`  \nOptions: `small` | `large`\n\nSize of calendar UI.\n\n### `layoutModifiers`\n\nType: [`LayoutModifier`](#type-layout-modifier)[]  \nDefault: `[]`  \nExample: `['month-left-align']`\n\nModifiers to alter the layout of the calendar.\n\n### `eventsData`\n\nType: [`EventData`](#type-event-data)[]  \nDefault: `null`\n\n```javascript\n[\n    {\n        start: '2020-08-17T06:00:00',\n        end: '2020-08-18T20:30:00',\n        name: 'Blockchain 101'\n      ...\n    },\n    ...\n]\n```\n\nArray of objects containing events information.\n\n\u003e Note: Properties `start` and `end` are _required_ for each event in the [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) date and time format. You can _optionally_ choose to add other properties.\n\n### `theme`\n\nType: `String`  \nDefault: `basic`  \nOptions: `basic` | `glass`\n\nChoose from available themes.\n\n### `primaryColor`\n\nType: `String`  \nDefault: _based on theme_  \nExample: `#1a237e`\n\nMain color accent of calendar. _Pick a color in rgb, hex or hsl format._\n\n### `headerColor`\n\nType: `String`  \nDefault: _based on theme_  \nExample: `rgb(0, 102, 0)`\n\nColor of header text.\n\n### `headerBackgroundColor`\n\nType: `String`  \nDefault: _based on theme_  \nExample: `black`\n\nBackground color of header. _Only works on some themes._\n\n### `weekdaysColor`\n\nType: `String`  \nDefault: _based on theme_\n\nColor of weekdays text. _Only works on some themes._\n\n### `weekdayDisplayType`\n\nType: `String`  \nDefault: `short`  \nOptions: [WeekdayDisplayType](#type-weekday-display-type) (`short` | `long-lower` | `long-upper`)\n\nSelect how weekdays will be displayed. E.g. M, Mon, or MON.\n\n### `monthDisplayType`\n\nType: `String`  \nDefault: `long`  \nOptions: [MonthDisplayType](#type-month-display-type) (`short` | `long`)\n\nSelect how month will be displayed in header. E.g. Feb, February.\n\n### `startWeekday`\n\nType: `Number`  \nDefault: `0`  \nOptions: `0` | `1` | `2` | `3` | `4` | `5` | `6`\n\nStarting weekday. Mapping: 0 (Sun), 1 (Mon), 2 (Tues), 3 (Wed), 4 (Thurs), 5 (Fri), 6 (Sat)\n\n\u003ca id=\"options-fonts\"\u003e\u003c/a\u003e\n\n### `fontFamilyHeader`\n\nType: `String`  \nDefault: _based on theme_  \nExample value: `'Open Sans', sans-serif`\n\nFont of calendar header text.\n\n### `fontFamilyWeekdays`\n\nType: `String`  \nDefault: _based on theme_\n\nFont of calendar weekdays text.\n\n### `fontFamilyBody`\n\nType: `String`  \nDefault: _based on theme_\n\nFont of calendar days as well as month and year picker text.\n\n### `dropShadow`\n\nType: `String`  \nDefault: _based on theme_\n\nSet CSS of calendar drop shadow.\n\n### `border`\n\nType: `String`  \nDefault: _based on theme_  \nExample value: `5px solid black`\n\nSet CSS style of border.\n\n### `borderRadius`\n\nType: `String`  \nDefault: `0.5rem`\n\nSet CSS border radius of calendar.\n\n### `disableMonthYearPickers`\n\nType: `Boolean`  \nDefault: `false`\n\nIf month and year picker should be disabled.\n\n### `disableDayClick`\n\nType: `Boolean`  \nDefault: `false`\n\nIf day click should be disabled.\n\n### `disableMonthArrowClick`\n\nType: `Boolean`  \nDefault: `false`\n\nIf month arrows should be disabled.\n\n### `customMonthValues`\n\nType: `String[]`  \nDefault: `undefined`\n\nSet custom display values for Month.\n\n### `customWeekdayValues`\n\nType: `String[]`  \nDefault: `undefined`\n\nSet custom display values for Weekdays.\n\n```javascript\n[\"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\", \"Dim\"];\n```\n\n\u003ca id=\"events\"\u003e\u003c/a\u003e\n\n## 🖱 Events\n\n### `dateChanged`\n\nType: `Function`  \nProps:\n\n- `currentDate`\n  - Type: `Date`\n  - Currently selected date\n- `filteredDateEvents`\n  - Type: [`EventData`](#type-event-data)[]\n  - All events on that particular date\n\n```typescript\nconst options = {\n    ...\n    dateChanged: (currentDate?: Date, filteredDateEvents?: EventData[]) =\u003e {\n        // do something\n    };\n    ...\n}\n```\n\nEmitted when the selected date is changed.\n\n### `selectedDateClicked`\n\nType: `Function`  \nProps:\n\n- `currentDate`\n  - Type: `Date`\n  - Currently selected date\n- `filteredMonthEvents`\n  - Type: [`EventData`](#type-event-data)[]\n  - All events on that particular month\n\nEmitted when the selected date is clicked.\n\n### `monthChanged`\n\nType: `Function`  \nProps:\n\n- `currentDate`\n  - Type: `Date`\n  - Currently selected date\n- `filteredMonthEvents`\n  - Type: [`EventData`](#type-event-data)[]\n  - All events on that particular month\n\nEmitted when the current month is changed.\n\n\u003ca id=\"methods\"\u003e\u003c/a\u003e\n\n## 🔧 Methods\n\n### `reset()`\n\nReset calendar to today's date.\n\n```javascript\n// Example\nlet myCal = new Calendar();\nmyCal.reset();\n```\n\n### `setDate()`\n\nProps:\n| Props | Type | Required | Description |\n|-------|------|----------|--------------------|\n| date | Date | required | New date to be set |\n\nSet new selected date.\n\n```javascript\n// Example\nmyCal.setDate(new Date());\n```\n\n### `getSelectedDate()`\n\nReturn:\n\n- Type: `Date`\n- Description: `Currently selected date`\n\nGet currently selected date.\n\n### `getEventsData()`\n\nReturn:\n\n- Type: [EventData](#type-event-data)[]\n- Description: `All events`\n\nGet events array.\n\n### `setEventsData()`\n\nProps:\n| Props | Type | Required | Description |\n|--------|------------|----------|------------------|\n| events | [EventData](#type-event-data)[] | required | Events to be set |\n\nReturn:\n\n- Type: `Number`\n- Description: `Number of events set`\n\nSet a new events array.\n\n### `addEventsData()`\n\nProps:\n| Props | Type | Required | Description |\n|--------|------------|----------|--------------------|\n| events | [EventData](#type-event-data)[] | required | Events to be added |\n\nReturn:\n\n- Type: `Number`\n- Description: `Number of events added`\n\nAdd events of the events array.\n\n### `setWeekdayDisplayType()`\n\nProps:\n| Props | Type | Required | Description |\n|--------|------------|----------|--------------------|\n| weekdayDisplayType | [WeekdayDisplayType](#type-weekday-display-type) | required | New weekday type |\n\nSet weekdays display type.\n\n```javascript\n// Example\nmyCal.setWeekdayDisplayType(\"short\");\n```\n\n### `setMonthDisplayType()`\n\nProps:\n| Props | Type | Required | Description |\n|--------|------------|----------|--------------------|\n| monthDisplayType | [MonthDisplayType](#type-month-display-type) | required | New month display type |\n\nSet month display type.\n\n\u003ca id=\"types\"\u003e\u003c/a\u003e\n\n## 💎 Types\n\n\u003ca id=\"type-event-data\"\u003e\u003c/a\u003e\n\n### `EventData`\n\n```javascript\n{\n    start: string,    // ISO 8601 date and time format\n    end: string,      // ISO 8601 date and time format\n    [key: string]: any,\n}\n```\n\n\u003ca id=\"type-weekday-display-type\"\u003e\u003c/a\u003e\n\n### `WeekdayDisplayType`\n\n`\"short\"` | `\"long-lower\"` | `\"long-upper\"`\n\n```markdown\n// \"short\"\nM T W ...\n\n// \"long-lower\"\nMon Tue Wed ...\n\n// \"long-upper\"\nMON TUE WED ...\n```\n\n\u003ca id=\"type-month-display-type\"\u003e\u003c/a\u003e\n\n### `MonthDisplayType`\n\n`\"short\"` | `\"long\"`\n\n```markdown\n// \"short\"\nJan Feb Mar ...\n\n// \"long\"\nJanuary February March ...\n```\n\n\u003ca id=\"type-layout-modifier\"\u003e\u003c/a\u003e\n\n### `LayoutModifier`\n\n`\"month-align-left\"`\n\n\u003ca id=\"themes\"\u003e\u003c/a\u003e\n\n## 🎨 Themes\n\nCurrently 2 themes available. More on the way.\n\n### `basic`\n\n\u003cimg src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-basic.PNG\" alt=\"Basic Theme\" width=\"400\" /\u003e\n\n#### CSS Custom Properties\n\n`--cal-color-primary`: #000000;  \n`--cal-font-family-header`: \"Work Sans\", sans-serif;  \n`--cal-font-family-weekdays`: \"Work Sans\", sans-serif;  \n`--cal-font-family-body`: \"Work Sans\", sans-serif;  \n`--cal-drop-shadow`: 0 7px 30px -10px rgba(150, 170, 180, 0.5);  \n`--cal-border`: none;  \n`--cal-border-radius`: 0.5rem;  \n`--cal-header-color`: black;  \n`--cal-weekdays-color`: black;\n\n### `glass`\n\n\u003cimg src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-glass.PNG\" alt=\"Glass Theme\" width=\"400\" /\u003e\n\n#### CSS Custom Properties\n\n`--cal-color-primary`: #EC407A;  \n`--cal-font-family-header`: 'Open Sans', sans-serif;  \n`--cal-font-family-weekdays`: 'Open Sans', sans-serif;  \n`--cal-font-family-body`: 'Open Sans', sans-serif;  \n`--cal-drop-shadow`: 0 7px 30px -10px rgba(150, 170, 180, 0.5);  \n`--cal-border`: none;  \n`--cal-border-radius`: 0.5rem;  \n`--cal-header-color`: white;  \n`--cal-header-background-color`: rgba(0, 0, 0, 0.3);\n\n\u003ca id=\"bug\"\u003e\u003c/a\u003e\n\n## 🐛 Bug Reporting\n\nFeel free to [open an issue](https://github.com/PawanKolhe/color-calendar/issues) on GitHub if you find any bug.\n\n\u003ca id=\"feature-request\"\u003e\u003c/a\u003e\n\n## ⭐ Feature Request\n\n- Feel free to [Open an issue](https://github.com/PawanKolhe/color-calendar/issues) on GitHub to request any additional features you might need for your use case.\n- Connect with me on [LinkedIn](https://www.linkedin.com/in/kolhepawan/). I'd love ❤️️ to hear where you are using this library.\n\n\u003ca id=\"release-notes\"\u003e\u003c/a\u003e\n\n## 📋 Release Notes\n\nCheck [here](https://github.com/PawanKolhe/color-calendar/releases) for release notes.\n\n\u003ca id=\"license\"\u003e\u003c/a\u003e\n\n## 📜 License\n\nThis software is open source, licensed under the [MIT License](https://github.com/PawanKolhe/color-calendar/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawankolhe%2Fcolor-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawankolhe%2Fcolor-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawankolhe%2Fcolor-calendar/lists"}