{"_id":"@cherrol/color-calendar","_rev":"10-b0aeabf41b2f6d1487a9b1bc9f89c57f","time":{"created":"2023-07-12T09:02:05.741Z","1.0.7":"2023-07-12T08:49:43.404Z","modified":"2023-11-01T09:55:46.224Z","1.0.8":"2023-07-12T08:50:02.720Z","1.0.9":"2023-07-12T08:53:44.614Z","1.0.10":"2023-07-12T09:02:06.046Z","1.0.11":"2023-07-12T11:58:49.913Z","1.0.12":"2023-07-18T03:17:31.339Z","1.0.13":"2023-11-01T09:55:46.036Z"},"name":"@cherrol/color-calendar","dist-tags":{"latest":"1.0.13"},"versions":{"1.0.10":{"name":"@cherrol/color-calendar","version":"1.0.10","description":"A customizable events calendar widget library","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","browser":"dist/bundle.js","types":"dist/index.d.ts","scripts":{"start:js":"rollup -c -w","start:css":"gulp watch","prebuild":"rimraf dist","build":"npm run types && rollup -c && gulp","types":"tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly","clean":"rimraf dist","test":"jest"},"author":{"name":"Pawan Kolhe","email":"contact@pawankolhe.com","url":"https://pawankolhe.com/"},"license":"MIT","devDependencies":{"@babel/core":"^7.10.5","@babel/preset-env":"^7.10.4","@rollup/plugin-babel":"^5.1.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^8.4.0","@rollup/plugin-strip":"^2.0.0","@rollup/plugin-typescript":"^5.0.2","@types/jest":"^26.0.16","autoprefixer":"^9.8.5","babel-loader":"^8.1.0","core-js":"^3.31.1","cross-env":"^7.0.2","css-loader":"^3.6.0","cssnano":"^4.1.10","del":"^5.1.0","file-loader":"^6.0.0","gulp":"^4.0.2","gulp-postcss":"^8.0.0","gulp-sass":"^5.0.0","html-webpack-plugin":"^4.3.0","jest":"^27.0.6","mini-css-extract-plugin":"^0.9.0","postcss-loader":"^3.0.0","postcss-preset-env":"^6.7.0","postcss-url":"^8.0.0","rimraf":"^3.0.2","rollup":"^2.23.0","rollup-plugin-banner":"^0.2.1","rollup-plugin-postcss":"^3.1.3","rollup-plugin-scss":"^2.5.0","rollup-plugin-scss-smart-asset":"0.0.1","rollup-plugin-terser":"^7.0.0","sass":"^1.35.2","sass-loader":"^9.0.2","ts-jest":"^27.0.3","typescript":"^3.9.7"},"repository":{"type":"git","url":"git+https://github.com/PawanKolhe/color-calendar.git"},"bugs":{"url":"https://github.com/PawanKolhe/color-calendar/issues"},"homepage":"https://github.com/PawanKolhe/color-calendar","engines":{"node":"^14.0.0"},"keywords":["calendar","event calendar","date-picker","calendar ui","calendar widget","color calendar","typescript","front-end","sass","web","css","ui","events","component","widget","vanilla","simple","dots"],"browserslist":["defaults"],"gitHead":"08674084bbe989c71fc4fb0a3e071263cbdeab83","_id":"@cherrol/color-calendar@1.0.10","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-mlAN9DNh2tqN4Em6I84HIedxx2JF8OIAS/tqcuTE2VvXpr8G28uwlQYff0Lc8KarA0RH9XdcPrgxV0AHbQ6QWQ==","shasum":"d103f8a448f5a43bb7c77a357e8ade351cab4936","tarball":"https://registry.npmjs.org/@cherrol/color-calendar/-/color-calendar-1.0.10.tgz","fileCount":18,"unpackedSize":117188,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4i+7OLhmxOI2F53Gx6D7mNdn4XOVXXd1LIGJSbyoT9wIgOUnBABQ6JusdLCQbKAfEDhF1fDsjcJzekVXFAQnQnVU="}]},"_npmUser":{"name":"cherrol1210_","email":"282505081@qq.com"},"directories":{},"maintainers":[{"name":"cherrol1210_","email":"282505081@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-calendar_1.0.10_1689152525829_0.6004023334845452"},"_hasShrinkwrap":false},"1.0.11":{"name":"@cherrol/color-calendar","version":"1.0.11","description":"A customizable events calendar widget library","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","browser":"dist/bundle.js","types":"dist/index.d.ts","scripts":{"start:js":"rollup -c -w","start:css":"gulp watch","prebuild":"rimraf dist","build":"cross-env mode=production && npm run types && rollup -c && gulp","types":"tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly","clean":"rimraf dist","test":"jest"},"author":{"name":"Pawan Kolhe","email":"contact@pawankolhe.com","url":"https://pawankolhe.com/"},"license":"MIT","devDependencies":{"@babel/core":"^7.10.5","@babel/preset-env":"^7.10.4","@rollup/plugin-babel":"^5.1.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^8.4.0","@rollup/plugin-strip":"^2.0.0","@rollup/plugin-typescript":"^5.0.2","@types/jest":"^26.0.16","autoprefixer":"^9.8.5","babel-loader":"^8.1.0","core-js":"^3.31.1","cross-env":"^7.0.3","css-loader":"^3.6.0","cssnano":"^4.1.10","del":"^5.1.0","file-loader":"^6.0.0","gulp":"^4.0.2","gulp-postcss":"^8.0.0","gulp-sass":"^5.0.0","html-webpack-plugin":"^4.3.0","jest":"^27.0.6","mini-css-extract-plugin":"^0.9.0","postcss-loader":"^3.0.0","postcss-preset-env":"^6.7.0","postcss-url":"^8.0.0","rimraf":"^3.0.2","rollup":"^2.23.0","rollup-plugin-banner":"^0.2.1","rollup-plugin-postcss":"^3.1.3","rollup-plugin-scss":"^2.5.0","rollup-plugin-scss-smart-asset":"0.0.1","rollup-plugin-terser":"^7.0.0","sass":"^1.35.2","sass-loader":"^9.0.2","ts-jest":"^27.0.3","typescript":"^3.9.7"},"repository":{"type":"git","url":"git+https://github.com/PawanKolhe/color-calendar.git"},"bugs":{"url":"https://github.com/PawanKolhe/color-calendar/issues"},"homepage":"https://github.com/PawanKolhe/color-calendar","engines":{"node":"^14.0.0"},"keywords":["calendar","event calendar","date-picker","calendar ui","calendar widget","color calendar","typescript","front-end","sass","web","css","ui","events","component","widget","vanilla","simple","dots"],"browserslist":["defaults"],"gitHead":"a14d19ee5c18581f10d9e69815b9a7e51509e8a0","_id":"@cherrol/color-calendar@1.0.11","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-jIfXoPaNwI/7NpIk+XoYjtlBP56ysyFZDLMG6BN9dEugmTDOlOI42ga8jcjqc6Lv4QBiX6AsVX7e26E2B0LHAw==","shasum":"18eaea9c975dbede1c58b794be11aaadea3b5a57","tarball":"https://registry.npmjs.org/@cherrol/color-calendar/-/color-calendar-1.0.11.tgz","fileCount":18,"unpackedSize":148549,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9ZsZHl8nkgCR6mBAzJJU2nujdc3HreDDifXOZDBFBdAiBQ7ulC9FpavSSGE6fHdzwA1K9Dzt0f78ut7XrnpmO4cQ=="}]},"_npmUser":{"name":"cherrol1210_","email":"282505081@qq.com"},"directories":{},"maintainers":[{"name":"cherrol1210_","email":"282505081@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-calendar_1.0.11_1689163129699_0.01359121829312504"},"_hasShrinkwrap":false},"1.0.12":{"name":"@cherrol/color-calendar","version":"1.0.12","description":"A customizable events calendar widget library","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","browser":"dist/bundle.js","types":"dist/index.d.ts","scripts":{"start:js":"rollup -c -w","start:css":"gulp watch","prebuild":"rimraf dist","build":"cross-env mode=production && npm run types && rollup -c && gulp","types":"tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly","clean":"rimraf dist","test":"jest"},"author":{"name":"Pawan Kolhe","email":"contact@pawankolhe.com","url":"https://pawankolhe.com/"},"license":"MIT","devDependencies":{"@babel/core":"^7.10.5","@babel/preset-env":"^7.10.4","@rollup/plugin-babel":"^5.1.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^8.4.0","@rollup/plugin-strip":"^2.0.0","@rollup/plugin-typescript":"^5.0.2","@types/jest":"^26.0.16","autoprefixer":"^9.8.5","babel-loader":"^8.1.0","core-js":"^3.31.1","cross-env":"^7.0.3","css-loader":"^3.6.0","cssnano":"^4.1.10","del":"^5.1.0","file-loader":"^6.0.0","gulp":"^4.0.2","gulp-postcss":"^8.0.0","gulp-sass":"^5.0.0","html-webpack-plugin":"^4.3.0","jest":"^27.0.6","mini-css-extract-plugin":"^0.9.0","postcss-loader":"^3.0.0","postcss-preset-env":"^6.7.0","postcss-url":"^8.0.0","rimraf":"^3.0.2","rollup":"^2.23.0","rollup-plugin-banner":"^0.2.1","rollup-plugin-postcss":"^3.1.3","rollup-plugin-scss":"^2.5.0","rollup-plugin-scss-smart-asset":"0.0.1","rollup-plugin-terser":"^7.0.0","sass":"^1.35.2","sass-loader":"^9.0.2","ts-jest":"^27.0.3","typescript":"^3.9.7"},"repository":{"type":"git","url":"git+https://github.com/PawanKolhe/color-calendar.git"},"bugs":{"url":"https://github.com/PawanKolhe/color-calendar/issues"},"homepage":"https://github.com/PawanKolhe/color-calendar","engines":{"node":"^14.0.0"},"keywords":["calendar","event calendar","date-picker","calendar ui","calendar widget","color calendar","typescript","front-end","sass","web","css","ui","events","component","widget","vanilla","simple","dots"],"browserslist":["defaults"],"gitHead":"26e65fb76694061952691bf756cdd840abf3173e","_id":"@cherrol/color-calendar@1.0.12","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-QcmNaI8oN5XVD93F05u1VjpbBhQLpxEbj760IMCZiT4NSI1JNtjEPPfqMIx16aokbj2J6RXYx2dD8VdDlp22yg==","shasum":"32b31cfb48dc2111154b5514794b1d034868399b","tarball":"https://registry.npmjs.org/@cherrol/color-calendar/-/color-calendar-1.0.12.tgz","fileCount":18,"unpackedSize":148737,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlwMxxGtmTO4JdlZLtP7ZLG9Ph1ci7kDT1hdJ3KyPdSgIgbatO96Jw5HM21iR1DFwagC6D8TGc5sQqMBadbRiWTc8="}]},"_npmUser":{"name":"cherrol1210_","email":"282505081@qq.com"},"directories":{},"maintainers":[{"name":"cherrol1210_","email":"282505081@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-calendar_1.0.12_1689650251112_0.2974750360972407"},"_hasShrinkwrap":false},"1.0.13":{"name":"@cherrol/color-calendar","version":"1.0.13","description":"A customizable events calendar widget library","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","browser":"dist/bundle.js","types":"dist/index.d.ts","scripts":{"start:js":"rollup -c -w","start:css":"gulp watch","prebuild":"rimraf dist","build":"cross-env mode=production && npm run types && rollup -c && gulp","types":"tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly","clean":"rimraf dist","test":"jest"},"author":{"name":"Pawan Kolhe","email":"contact@pawankolhe.com","url":"https://pawankolhe.com/"},"license":"MIT","devDependencies":{"@babel/core":"^7.10.5","@babel/preset-env":"^7.10.4","@rollup/plugin-babel":"^5.1.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^8.4.0","@rollup/plugin-strip":"^2.0.0","@rollup/plugin-typescript":"^5.0.2","@types/jest":"^26.0.16","autoprefixer":"^9.8.5","babel-loader":"^8.1.0","core-js":"^3.31.1","cross-env":"^7.0.3","css-loader":"^3.6.0","cssnano":"^4.1.10","del":"^5.1.0","file-loader":"^6.0.0","gulp":"^4.0.2","gulp-postcss":"^8.0.0","gulp-sass":"^5.0.0","html-webpack-plugin":"^4.3.0","jest":"^27.0.6","mini-css-extract-plugin":"^0.9.0","postcss-loader":"^3.0.0","postcss-preset-env":"^6.7.0","postcss-url":"^8.0.0","rimraf":"^3.0.2","rollup":"^2.23.0","rollup-plugin-banner":"^0.2.1","rollup-plugin-postcss":"^3.1.3","rollup-plugin-scss":"^2.5.0","rollup-plugin-scss-smart-asset":"0.0.1","rollup-plugin-terser":"^7.0.0","sass":"^1.35.2","sass-loader":"^9.0.2","ts-jest":"^27.0.3","typescript":"^3.9.7"},"repository":{"type":"git","url":"git+https://github.com/cherrol/color-calendar.git"},"bugs":{"url":"https://github.com/cherrol/color-calendar/issues"},"homepage":"https://github.com/cherrol/color-calendar","engines":{"node":"^14.0.0"},"keywords":["calendar","event calendar","date-picker","calendar ui","calendar widget","color calendar","typescript","front-end","sass","web","css","ui","events","component","widget","vanilla","simple","dots"],"browserslist":["defaults"],"gitHead":"26e65fb76694061952691bf756cdd840abf3173e","_id":"@cherrol/color-calendar@1.0.13","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-0k460qVDn673dEQSdgsCbbgug3BOSZP3KRi5+xFuDQI4EpLbafMVa481YbHSNFMM2SUngH8GAsLkSjIyiq9tWQ==","shasum":"47b620511964d4679a96884a3928159f2e01d74d","tarball":"https://registry.npmjs.org/@cherrol/color-calendar/-/color-calendar-1.0.13.tgz","fileCount":18,"unpackedSize":151616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmXyE4q+Q0pFBl7QSYZ+kkmvSo63/f5pF0MC7T4N2wTgIhAPG8ryBtOtkiJ4ssTgQIYHh0xMwj04M34Zc97rAoEYVA"}]},"_npmUser":{"name":"cherrol1210_","email":"282505081@qq.com"},"directories":{},"maintainers":[{"name":"cherrol1210_","email":"282505081@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-calendar_1.0.13_1698832545869_0.7604900839084465"},"_hasShrinkwrap":false}},"maintainers":[{"name":"cherrol1210_","email":"282505081@qq.com"}],"description":"A customizable events calendar widget library","homepage":"https://github.com/cherrol/color-calendar","keywords":["calendar","event calendar","date-picker","calendar ui","calendar widget","color calendar","typescript","front-end","sass","web","css","ui","events","component","widget","vanilla","simple","dots"],"repository":{"type":"git","url":"git+https://github.com/cherrol/color-calendar.git"},"author":{"name":"Pawan Kolhe","email":"contact@pawankolhe.com","url":"https://pawankolhe.com/"},"bugs":{"url":"https://github.com/cherrol/color-calendar/issues"},"license":"MIT","readme":"<p><img src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/logo.png\" alt=\"logo\" width=\"20%\" /></p>\n<p>\n    <h1>Color Calendar</h1>\n</p>\n<p>\n    <a href=\"https://www.npmjs.com/package/color-calendar\">\n        <img src=\"https://img.shields.io/npm/v/color-calendar?style=flat-square\" alt=\"npm version\" />\n    </a>\n    <a href=\"https://www.npmjs.com/package/color-calendar\">\n        <img src=\"https://img.shields.io/npm/dw/color-calendar?style=flat-square\" alt=\"npm downloads\" />\n    </a>\n    <img src=\"https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square\" alt=\"size\" />\n    <a href=\"https://www.jsdelivr.com/package/npm/color-calendar\">\n        <img src=\"https://data.jsdelivr.com/v1/package/npm/color-calendar/badge\" alt=\"jsdelivr\" />\n    </a>\n    <img src=\"https://hitcounter.pythonanywhere.com/count/tag.svg?url=https%3A%2F%2Fgithub.com%2FPawanKolhe%2Fcolor-calendar\" alt=\"Hits\">\n    <img src=\"https://img.shields.io/npm/l/color-calendar?style=flat-square\" alt=\"license\" />\n</p>\n\n[![CircleCI](https://circleci.com/gh/PawanKolhe/color-calendar.svg?style=svg)](https://circleci.com/gh/PawanKolhe/color-calendar)\n\n<p>\n    A customizable events calendar component library. Checkout <a href=\"https://online-tech-confs.herokuapp.com/\">Demo 1</a>, <a href=\"https://v84yk.csb.app/\">Demo 2</a> and <a href=\"https://codesandbox.io/s/color-calendar-bnwdu\">Demo 3.</a>\n</p>\n\n<!-- # 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) -->\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<a id=\"features\"></a>\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<a id=\"getting-started\"></a>\n\n## 📦 Getting Started\n\n### CDN\n\n#### JavaScript\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.js\">\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<link\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css\"\n/>\n<!-- or -->\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css\"\n/>\n```\n\n#### Fonts\n\nGet fonts from [Google Fonts](https://fonts.google.com/)\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\nCheck what fonts the [theme](#themes) needs or pass your own fonts in [options](#options-fonts).\n\n### NPM\n\n> _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-<THEME-NAME>.css\";\n```\n\nThen add fonts.\n\n<a id=\"usage\"></a>\n\n## 🔨 Usage\n\n<a id=\"usage-basic\"></a>\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<div id=\"color-calendar\"></div>\n```\n\n[Example](https://codesandbox.io/s/color-calendar-bnwdu)\n\n<a id=\"usage-react\"></a>\n\n### React\n\n[Example](https://codesandbox.io/s/color-calendar-react-y0cyf?file=/src/CalendarComponent.jsx)\n\n<a id=\"usage-vue\"></a>\n\n### Vue\n\n[Example](https://codesandbox.io/s/color-calendar-vue-byo6e?file=/src/components/ColorCalendar.vue)\n\n<a id=\"options\"></a>\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        className: 'important_date',\n        name: 'Blockchain 101'\n      ...\n    },\n    ...\n]\n```\n\nArray of objects containing events information.\n\n> 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<a id=\"options-fonts\"></a>\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<a id=\"events\"></a>\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[]) => {\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<a id=\"methods\"></a>\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<a id=\"types\"></a>\n\n## 💎 Types\n\n<a id=\"type-event-data\"></a>\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    className?: string,   // string\n    [key: string]: any,\n}\n```\n\n<a id=\"type-weekday-display-type\"></a>\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<a id=\"type-month-display-type\"></a>\n\n### `MonthDisplayType`\n\n`\"short\"` | `\"long\"`\n\n```markdown\n// \"short\"\nJan Feb Mar ...\n\n// \"long\"\nJanuary February March ...\n```\n\n<a id=\"type-layout-modifier\"></a>\n\n### `LayoutModifier`\n\n`\"month-align-left\"`\n\n<a id=\"themes\"></a>\n\n## 🎨 Themes\n\nCurrently 2 themes available. More on the way.\n\n### `basic`\n\n<img src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-basic.PNG\" alt=\"Basic Theme\" width=\"400\" />\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<img src=\"https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-glass.PNG\" alt=\"Glass Theme\" width=\"400\" />\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<a id=\"bug\"></a>\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<a id=\"feature-request\"></a>\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<a id=\"release-notes\"></a>\n\n## 📋 Release Notes\n\nCheck [here](https://github.com/PawanKolhe/color-calendar/releases) for release notes.\n\n<a id=\"license\"></a>\n\n## 📜 License\n\nThis software is open source, licensed under the [MIT License](https://github.com/PawanKolhe/color-calendar/blob/master/LICENSE).\n","readmeFilename":"README.md"}