{"id":13696936,"url":"https://github.com/alexandretok/easy-ionic2-calendar","last_synced_at":"2025-05-03T17:32:38.901Z","repository":{"id":97909699,"uuid":"81155202","full_name":"alexandretok/easy-ionic2-calendar","owner":"alexandretok","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-12T12:43:25.000Z","size":4311,"stargazers_count":16,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-13T00:33:13.629Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/alexandretok.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":"2017-02-07T02:07:41.000Z","updated_at":"2021-04-03T16:58:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f182674-5576-4aad-b912-c0cf1e1425aa","html_url":"https://github.com/alexandretok/easy-ionic2-calendar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandretok%2Feasy-ionic2-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandretok%2Feasy-ionic2-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandretok%2Feasy-ionic2-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandretok%2Feasy-ionic2-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandretok","download_url":"https://codeload.github.com/alexandretok/easy-ionic2-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252226900,"owners_count":21714893,"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":[],"created_at":"2024-08-02T18:00:50.233Z","updated_at":"2025-05-03T17:32:38.888Z","avatar_url":"https://github.com/alexandretok.png","language":"TypeScript","funding_links":[],"categories":["others","UI","Components","Complete projects"],"sub_categories":["Form / Input","Input - Date/Calendar"],"readme":"### An easy calendar for your Ionic 2 App (also works with Ionic 3)\n\nDemo:\n\n  [Live Demo](https://rawgit.com/alexandretok/easy-ionic2-calendar/master/demo/lab.html)\n  \n#### How to use:\nPlace the following in the desired page:\n\n    \u003cion-calendar\n            (onChange)=\"onChange($event)\"\n            [events]=\"myEvents\"\n            (onEventClicked)=\"eventClicked($event)\"\n            [useSwipe]=\"true\"\n            [todayText]=\"Today\"\n            [showEventsList]=\"true\"\n            [disablePastDates]=\"false\"\n            [weekDaysToDisable]=\"[0,6]\"\n            [daysToDisable]=\"[10,11,12]\"\n            [inputDate]=\"myDate\"\u003e\n    \u003c/ion-calendar\u003e\n    \nRead about the options below.\n\n\n#### Installation process:\n\n* Clone the project and copy the ion-calendar folder to your project's components folder (src/components).\n* Import the component on your `app.module.ts`:\n\n    ```\n    import { IonCalendarComponent } from '../components/ion-calendar/ion-calendar';\n    ```\n* Insert it on the declarations array:\n\n    ```\n    declarations: [\n        MyApp,\n        HomePage,\n        IonCalendarComponent\n      ],\n    ```\n\n* Add `\u003cion-calendar\u003e\u003c/ion-calendar\u003e` in your desired view.\n* Set the options and add the callback functions to your controller.\n\n#### Options:\n\n* `(onChange)=\"yourOnDateChangeCallback($event)\"`\n  * This callback is triggered everytime the current selected date is changed.\n  * It passes the new date as the parameter.\n* `(onEventClicked)=\"yourOnEventClickedCallback($event)\"`\n  * This callback is triggered everytime an event is clicked (from the list below the calendar).\n  * It passes the clicked event as the parameter.\n* `[events]=\"yourEventsArray\"`\n  * `yourEventsArray` should be an array of objects with the following properties:\n    * starts: Date object representing the date and time that the events starts.\n    * ends: Date object representing the date and time that the events ends.\n    * title: String with the title to be shown in the events list.\n* `[showEventsList]=\"true\"`\n  * Wheter or not to show the events list on the bottom of the calendar\n* `[disablePastDates]=\"false\"`\n  * Wheter or not to show past dates as disabled (disables user click on those dates)\n* `[weekDaysToDisable]=\"[0,6]\"`\n  * You can use this to disable certain weekdays, in this example we are disabling Sundays (0) and Saturdays (6). Users will not be able to click these days.\n* `[daysToDisable]=\"[10,11,12]\"`\n  * You can use this to disable certain days of the month. In this example, days 10, 11 and 12 of the current month will be disabled.\n* `[useSwipe]=\"false\"`\n  * You can use this to prevent swiping through the months\n* `[todayText]=\"Today\"`\n  * You can use this to translate the today's button content to other languages\n* `[inputDate]=\"yourDateObject\"`\n  * Date object you can use to set the initial date or to set the selected date programmatically.\n    * When you want to set the selected date programmatically, remember to always create a new reference(a new Date object).\n      Example:\n                      \n      ```\n      this.yourDateObject.setDate(5); /* This will NOT work and the view is not going to update correctly */\n      \n      var tmpDate = new Date();\n      tmpDate.setDate(5);\n      this.yourDateObject = tmpDate; /* This will work and date will be updated on the calendar view */\n      ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandretok%2Feasy-ionic2-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandretok%2Feasy-ionic2-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandretok%2Feasy-ionic2-calendar/lists"}