{"id":19435348,"url":"https://github.com/heliomarpm/ion-calendar","last_synced_at":"2025-10-26T08:33:02.069Z","repository":{"id":105892831,"uuid":"367521018","full_name":"heliomarpm/ion-calendar","owner":"heliomarpm","description":"📅 A date picker component for ionic6+","archived":false,"fork":false,"pushed_at":"2025-04-20T22:17:51.000Z","size":958,"stargazers_count":3,"open_issues_count":6,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-20T23:23:55.583Z","etag":null,"topics":["angular","angular-component","angular2","calendar","component","datepicker","datepicker-component","ion-calendar","ionic","ionic-component","ionic6","ionic7"],"latest_commit_sha":null,"homepage":"https://ioncalendar-demo.web.app/","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/heliomarpm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":"heliomarpm","ko_fi":"heliomarpm","liberapay":"heliomarpm","custom":["https://bit.ly/paypal-sponsor-heliomarpm","https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=BRL","https://www.pixme.bio/heliomarpm"]}},"created_at":"2021-05-15T02:12:42.000Z","updated_at":"2025-04-20T22:17:54.000Z","dependencies_parsed_at":"2024-05-31T16:59:34.596Z","dependency_job_id":"7042d3b7-da35-4095-a877-7ea950bcdbe0","html_url":"https://github.com/heliomarpm/ion-calendar","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fion-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fion-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fion-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fion-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heliomarpm","download_url":"https://codeload.github.com/heliomarpm/ion-calendar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250704957,"owners_count":21473789,"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":["angular","angular-component","angular2","calendar","component","datepicker","datepicker-component","ion-calendar","ionic","ionic-component","ionic6","ionic7"],"created_at":"2024-11-10T15:05:40.321Z","updated_at":"2025-10-26T08:33:01.993Z","avatar_url":"https://github.com/heliomarpm.png","language":"TypeScript","funding_links":["https://github.com/sponsors/heliomarpm","https://ko-fi.com/heliomarpm","https://liberapay.com/heliomarpm","https://bit.ly/paypal-sponsor-heliomarpm","https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=BRL","https://www.pixme.bio/heliomarpm"],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\" align=\"center\" style=\"text-align:center;\"\u003e\n\u003ch1\u003e\n  \u003cbr\u003e 📅 Ionic Component IonCalendar\n\n  [![DeepScan grade][url-deepscan-badge]][url-deepscan]\n  [![CodeFactor][url-codefactor-badge]][url-codefactor] \n  ![CodeQL][url-codeql] \n  ![Publish][url-publish]\n  [![NPM version][url-npm-badge]][url-npm]\n  [![Downloads][url-downloads-badge]][url-downloads]\n  \u003ca href=\"https://navto.me/heliomarpm\" target=\"_blank\"\u003e\u003cimg src=\"https://navto.me/assets/navigatetome-brand.png\" width=\"32\"/\u003e\u003c/a\u003e\n\n  ![@angular/core](https://img.shields.io/github/package-json/dependency-version/heliomarpm/ion-calendar/@angular/core)\n  ![@ionic/angular](https://img.shields.io/github/package-json/dependency-version/heliomarpm/ion-calendar/@ionic/angular)\n  ![luxon](https://img.shields.io/github/package-json/dependency-version/heliomarpm/ion-calendar/luxon)\n\u003c/h1\u003e\n\n\u003cp\u003e\n  \u003c!-- PixMe --\u003e\n  \u003ca href=\"https://www.pixme.bio/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"pixme url\" src=\"https://img.shields.io/badge/donate%20on-pixme-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=28f4f4\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- PayPal --\u003e\n  \u003ca href=\"https://bit.ly/paypal-sponsor-heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"paypal url\" src=\"https://img.shields.io/badge/paypal-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=0475fe\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Ko-fi --\u003e\n  \u003ca href=\"https://ko-fi.com/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"kofi url\" src=\"https://img.shields.io/badge/kofi-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=ff5f5f\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- LiberaPay --\u003e  \n  \u003ca href=\"https://liberapay.com/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n     \u003cimg alt=\"liberapay url\" src=\"https://img.shields.io/badge/liberapay-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=f6c915\"/\u003e\n  \u003c/a\u003e  \n  \u003c!-- GitHub Sponsors --\u003e\n  \u003ca href=\"https://github.com/sponsors/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"github sponsors url\" src=\"https://img.shields.io/badge/GitHub%20-Sponsor-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=db61a2\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\n![screenshot](https://github.com/heliomarpm/ion-calendar/assets/13087389/8b1e79dd-b5f8-4774-aebf-7222d13f9b2f)\n![screenshot2](https://github.com/heliomarpm/ion-calendar/assets/13087389/1bf6c1f5-7ef8-4eb0-8954-0976d00bba16)\n\n_*live demo:* [click here](https://ioncalendar-demo.web.app)_\n\n## Summary\nThe `@heliomarpm/ion-calendar` is a calendar component for Ionic Framework-based applications. \\\nIt uses [Luxon](https://moment.github.io/luxon/) to handle dates and times, so it's fully compatible with\nInternational Organization for Standardization (ISO) 8601 formats.\n\n## The main features are:\n\n* Fully customizable layout;\n* Customizable date format;\n* Multiple selection mode;\n* Range selection mode;\n* Calendar can be placed in content area or as an overlay;\n* Theming using SCSS variables.\n* Disable weekdays or weekends.\n* Setting days event.\n* Setting localization.\n* Material design from Ionic Framework.\n* Adapted for Ionic dark theme\n\n## Support\n\n- @angular/core `^16.+\"`\n- @ionic/angular `^6.+\"`\n\n## Installation\n\nYou can install the library using `npm` or `yarn`:\n\n```bash\nnpm i @heliomarpm/ion-calendar \n# or \nyarn add @heliomarpm/ion-calendar \n```\n\n## Example Usage\n\n### Import module\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { IonicApp, IonicModule } from '@ionic/angular';\n...\nimport { AppComponent } from './app.component';\nimport { IonCalendarModule } from '@heliomarpm/ion-calendar';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    ...,\n    IonicModule.forRoot(),\n    IonCalendarModule\n  ],\n  ...\n})\nexport class AppModule {}\n```\n\n### Change Defaults\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { IonicApp, IonicModule } from '@ionic/angular';\n...\nimport { AppComponent } from './app.component';\nimport { IonCalendarModule } from '@heliomarpm/ion-calendar';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    ...,\n    IonicModule.forRoot(),\n    // See ICalendarComponentOptions for options\n    IonCalendarModule.forRoot({\n      doneLabel: 'Confirm',\n      closeIcon: true\n    })\n  ],\n  ...\n})\nexport class AppModule {}\n```\n\n## Components Mode\n\n### Basic\n\n```html\n\u003cion-calendar [(ngModel)]=\"date\"\n              (onChange)=\"onChange($event)\"\n              [type]=\"type\"\n              format=\"yyyy-MM-dd\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  date: string;\n  type: 'string'; // 'string' | 'js-date' | 'luxon' | 'time' | 'object'\n  constructor() { }\n\n  onChange($event) {\n    console.log($event);\n  }\n  ...\n}\n```\n\n### Date range\n\n```html\n\u003cion-calendar [(ngModel)]=\"dateRange\"\n              [options]=\"optionsRange\"\n              [type]=\"type\"\n              [format]=\"'yyyy-MM-dd'\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ICalendarComponentOptions } from '@heliomarpm/ion-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  dateRange: { from: string; to: string; };\n  type: 'string'; // 'string' | 'js-date' | 'luxon' | 'time' | 'object'\n  optionsRange: ICalendarComponentOptions = {\n    pickMode: 'range'\n  };\n\n  constructor() { }\n  ...\n}\n```\n\n### Multi Date\n\n```html\n\u003cion-calendar [(ngModel)]=\"dateMulti\"\n              [options]=\"optionsMulti\"\n              [type]=\"type\"\n              format=\"yyyy-MM-dd\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ICalendarComponentOptions } from '@heliomarpm/ion-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  dateMulti: string[];\n  type: 'string'; // 'string' | 'js-date' | 'luxon' | 'time' | 'object'\n  optionsMulti: ICalendarComponentOptions = {\n    pickMode: 'multi'\n  };\n\n  constructor() { }\n  ...\n}\n```\n\n### Input Properties\n\n| Name      | Type                      | Default       | Description\n| -         | -                         | -             | - \n| options   | ICalendarComponentOptions | null          | options\n| format    | string                    | 'yyyy-MM-dd'  | value format\n| type      | string                    | 'string'      | value type\n| readonly  | boolean                   | false         | readonly\n\n### Output Events\n\n| Name          | Type         | Description     \n| -             | -            | - \n| onChange      | EventEmitter | event for model change\n| onMonthChange | EventEmitter | event for month change when displayMode = month\n| onWeekChange  | EventEmitter | event for month change when displayMode = week\n| onSelect      | EventEmitter | event for click day-button\n| onSelectStart | EventEmitter | event for click day-button\n| onSelectEnd   | EventEmitter | event for click day-button\n\n### ICalendarComponentOptions\n\n| Name                  | Type                    | Default                               | Description\n| - | - | - | -\n| from                  | Date                    | `new Date()`                          | start date\n| to                    | Date                    | 0 (Infinite)                          | end date \n| color                 | string                  | `'primary'`                           | 'primary', 'secondary','tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light', 'custom', 'transparent'\n| colorSubtitle         | string                  | `undefined`                           | 'primary', 'secondary','tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light', 'custom', 'transparent'\n| pickMode              | string                  | `single`                              | 'multi', 'range', 'single' \n| showToggleButtons     | boolean                 | `true`                                | show toggle buttons \n| monthsTitle           | Array\u003cstring\u003e           | `['JAN', 'FEB', ..., 'NOV', 'DEC']`   | month picker format \n| showMonthPicker       | boolean                 | `true`                                | show month picker \n| showYearPicker        | boolean                 | `true`                                | show year picker \n| defaultTitle          | string                  | ''                                    | default title in days \n| defaultSubtitle       | string                  | ''                                    | default subtitle in days \n| disableWeeks          | Array\u003cnumber\u003e           | `[]`                                  | week to be disabled (0-6)                         |\n| monthFormat           | string                  | `'MMM yyyy'`                          | month title format                                |\n| weekdays              | Array\u003cstring\u003e           | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | weeks text\n| weekStart             | number                  | `0`                                   | set week start day `0` of sundaty, `1` of monday\n| IDayConfig            | Array\u003c**_IDayConfig_**\u003e | `[]`                                  | days configuration \n| displayMode           | string                  | `month`                               | 'month', 'week' \n| showAdjacentMonthDay  | boolean                 | `true`                                | show days of adjacent months when `displayMode: 'month'`\n| showMonthAdjacentDays | boolean                 | `false`                               | show the month on days adjacent to the selected month when `displayMode: 'week'`\n| weeks                 | number                  | `1`                                   | number of week to show in week display mode \n| locale                | ICalendarLocale         | {locale: 'en', weekdays: 'initial' }  | change calendar locale and set default name to weeks\n\n## Modal Mode\n\n### Basic\n\nImport ion2-calendar in component controller.\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { CalendarModalComponent, ICalendarModalOptions, IDayConfig, ICalendarResult } from '@heliomarpm/ion-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  constructor(public modalCtrl: ModalController) {}\n\n  openCalendar() {\n    const options: ICalendarModalOptions = {\n      title: 'BASIC'\n    };\n\n    const myCalendar = await this.modalCtrl.create({\n      component: CalendarModalComponent,\n      componentProps: { options }\n    });\n\n    myCalendar.present();\n\n    const event: any = await myCalendar.onDidDismiss();\n    const date: ICalendarResult = event.data;\n    if (event.role === 'done') {\n      console.log('date:', date); // date selected\n    }\n  }\n}\n```\n\n### Date range\n\nSet pickMode to 'range'.\n\n```typescript\nopenCalendar() {\n  const options: ICalendarModalOptions = {\n    pickMode: 'range',\n    title: 'RANGE'\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date = event.data;\n  const from: ICalendarResult = date.from;\n  const to: ICalendarResult = date.to;\n\n  console.log(date, from, to);\n}\n```\n\n### Multi Date\n\nSet pickMode to 'multi'.\n\n```typescript\nopenCalendar() {\n  const options = {\n    pickMode: 'multi',\n    title: 'MULTI'\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: ICalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### Disable weeks\n\nUse index eg: `[0, 6]` denote Sunday and Saturday.\n\n```typescript\nopenCalendar() {\n  const options: ICalendarModalOptions = {\n    disableWeeks: [0, 6]\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: ICalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### Localization\n\u003c!-- \nyour root module\n\n```typescript\nimport { NgModule, LOCALE_ID } from '@angular/core';\n...\n\n@NgModule({\n  ...\n  providers: [{ provide: LOCALE_ID, useValue: \"zh-CN\" }]\n})\n\n...\n``` --\u003e\n\n```typescript\nopenCalendar() {\n  const options: ICalendarModalOptions = {\n    locale: { locale: 'zn-CN', weekdays:'short' },\n    weekStart: 1,\n    monthFormat: 'yyyy 年 MM 月',\n    defaultDate: new Date()\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: ICalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### Days Config\n\nConfigure one day.\n\n```typescript\nopenCalendar() {\n  let holidays: IDayConfig[] = [];\n  \n  holidays.push({date: new Date(2023, 0, 1), title: '🎉', subTitle: 'New Year'});\n  holidays.push({date: new Date(2023, 4, 1), subTitle: 'Labor Day', disable: true});\n  holidays.push({date: new Date(2023, 11, 25), subTitle: '🎅', disable: true});\n\n  const options: ICalendarModalOptions = {\n    from: new Date(2023, 0, 1),\n    to: new Date(2023, 11, 31),\n    defaultDate: new Date(),\n    efaultScrollTo: new Date(),\n    IDayConfig: holidays,\n    color: 'success'\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: ICalendarResult = event.data;\n  console.log(date);\n}\n```\n\n# API\n\n### Modal Options\n\n| Name                  | Type                     | Default                               | Description\n| -                     | -                        | -                                     | -\n| from                  | Date                     | `new Date()`                          | start date\n| to                    | Date                     | `undefined`                           | end date\n| title                 | string                   | `'CALENDAR'`                          | title\n| color                 | string                   | `'primary'`                           | 'primary', 'secondary', 'danger', 'light', 'dark'\n| defaultScrollTo       | Date                     | from                                  | let the view scroll to the default date\n| defaultDate           | Date                     | `null`                                | default date data, apply to single\n| defaultDates          | Array\u003cDate\u003e              | `null`                                | default dates data, apply to multi\n| defaultDateRange      | { from: Date, to: Date } | `null`                                | default date-range data, apply to range\n| defaultTitle          | string                   | ''                                    | default title in days\n| defaultSubtitle       | string                   | ''                                    | default subtitle in days\n| cssClass              | string                   | `''`                                  | Additional classes for custom styles, separated by spaces.\n| canBackwardsSelected  | boolean                  | `false`                               | can backwards selected\n| pickMode              | string                   | `single`                              | 'multi', 'range', 'single'\n| disableWeeks          | Array\u003cnumber\u003e            | `[]`                                  | week to be disabled (0-6)\n| closeLabel            | string                   | `CANCEL`                              | cancel button label\n| doneLabel             | string                   | `DONE`                                | done button label\n| clearLabel            | string                   | `null`                                | clear button label\n| closeIcon             | boolean                  | `false`                               | show cancel button icon\n| doneIcon              | boolean                  | `false`                               | show done button icon\n| monthFormat           | string                   | `'MMM yyyy'`                          | month title format\n| weekdays              | Array\u003cstring\u003e            | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | weeks text\n| weekStart             | number                   | `0` (0 or 1)                          | set week start day\n| weeks                 | number                   | `1`                                   | number of weeks will be displayed when `displayMode: week`\n| IDayConfig            | Array\u003c**_IDayConfig_**\u003e  | `[]`                                  | days configuration\n| step                  | number                   | `12`                                  | month load stepping interval to when scroll\n| autoDone              | boolean                  | false                                 | done automatically when selecting date\n| showAdjacentMonthDay  | boolean                  | true                                  | show days of adjacent months\n\n### onDidDismiss Output `{ data } = event`\n\n| pickMode | Type\n| -------- | -\n| single   | { date: **_ICalendarResult_** }\n| range    | { from: **_ICalendarResult_**, to: **_ICalendarResult_** }\n| multi    | Array\u003c**_ICalendarResult_**\u003e\n\n### onDidDismiss Output `{ role } = event`\n\n| Value      | Description\n| ---------- | -\n| 'cancel'   | dismissed by click the cancel \n| 'done'     | dismissed by click the done button\n| 'backdrop' | dismissed by click the backdrop\n\n#### IDayConfig\n\n| Name     | Type    | Default  | Description\n| -------- | ------- | -------- | -\n| cssClass | string  | `''`     | separated by spaces\n| date     | Date    | required | configured days\n| marked   | boolean | false    | highlight color\n| disable  | boolean | false    | disable\n| title    | string  | none     | displayed title eg: `'today'`\n| subTitle | string  | none     | subTitle subTitle eg: `'New Year\\'s\n\n### ICalendarResult\n\n| Name    | Type   |\n| ------- | ------ |\n| time    | number |\n| secondas| number |\n| dateObj | Date   |\n| string  | string |\n| year    | number |\n| month   | number |\n| day     | number |\n\n\n## Dependencies\n- [@angular/core](https://angular.io): Angular - the core framework\n- [@ionic/angular](https://ionicframework.com/): Ionic Angular specific building blocks on top of @ionic/core components.\n- [luxon](moment.github.io/luxon): Luxon is a library for working with dates and times in JavaScript.\n\n\n## Contributing\n\nPlease make sure to read the [Contributing Guide](https://github.com/heliomarpm/ion-calendar/blob/main/docs/CONTRIBUTING.md) before making a pull request.\n\nThank you to all the people who already contributed to project!\n\n\u003ca href=\"https://github.com/heliomarpm/ion-calendar/graphs/contributors\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=heliomarpm/ion-calendar\" /\u003e\n\u003c/a\u003e\n\n###### Made with [contrib.rocks](https://contrib.rocks).\n\nThat said, there's a bunch of ways you can contribute to this project, like by:\n\n- :beetle: Reporting a bug\n- :page_facing_up: Improving this documentation\n- :rotating_light: Sharing this project and recommending it to your friends\n- :dollar: Supporting this project on GitHub Sponsors or Ko-fi\n- :star2: Giving a star on this repository\n\n\n## Donate\n\nIf you appreciate that, please consider donating to the Developer.\n\n\u003cp\u003e\n  \u003c!-- PixMe --\u003e\n  \u003ca href=\"https://www.pixme.bio/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"pixme url\" src=\"https://img.shields.io/badge/donate%20on-pixme-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=28f4f4\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- PayPal --\u003e\n  \u003ca href=\"https://bit.ly/paypal-sponsor-heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"paypal url\" src=\"https://img.shields.io/badge/paypal-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=0475fe\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Ko-fi --\u003e\n  \u003ca href=\"https://ko-fi.com/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"kofi url\" src=\"https://img.shields.io/badge/kofi-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=ff5f5f\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- LiberaPay --\u003e  \n  \u003ca href=\"https://liberapay.com/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n     \u003cimg alt=\"liberapay url\" src=\"https://img.shields.io/badge/liberapay-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=f6c915\"/\u003e\n  \u003c/a\u003e  \n  \u003c!-- GitHub Sponsors --\u003e\n  \u003ca href=\"https://github.com/sponsors/heliomarpm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"github sponsors url\" src=\"https://img.shields.io/badge/GitHub%20-Sponsor-1C1E26?style=for-the-badge\u0026labelColor=1C1E26\u0026color=db61a2\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT © Heliomar P. Marques](LICENSE) \u003ca href=\"#top\"\u003e🔝\u003c/a\u003e\n\n\n----\n[url-npm]: https://www.npmjs.com/package/@heliomarpm/ion-calendar\n[url-npm-badge]: https://img.shields.io/npm/v/@heliomarpm/ion-calendar.svg\n[url-downloads-badge]: https://img.shields.io/npm/dm/@heliomarpm/ion-calendar.svg\n[url-downloads]: http://badge.fury.io/js/@heliomarpm/ion-calendar.svg\n[url-license-badge]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[url-deepscan-badge]: https://deepscan.io/api/teams/19612/projects/25662/branches/805908/badge/grade.svg\n[url-deepscan]: https://deepscan.io/dashboard#view=project\u0026tid=19612\u0026pid=25662\u0026bid=805908\n[url-codefactor-badge]: https://www.codefactor.io/repository/github/heliomarpm/ion-calendar/badge\n[url-codefactor]: https://www.codefactor.io/repository/github/heliomarpm/ion-calendar\n[url-codeql]: https://github.com/heliomarpm/ion-calendar/actions/workflows/codeql.yml/badge.svg \n[url-publish]: https://github.com/heliomarpm/ion-calendar/actions/workflows/publish.yml/badge.svg \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliomarpm%2Fion-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheliomarpm%2Fion-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliomarpm%2Fion-calendar/lists"}