{"id":13696943,"url":"https://github.com/redpandatronicsuk/ionic2calendar","last_synced_at":"2025-08-23T02:13:55.606Z","repository":{"id":78683220,"uuid":"64175125","full_name":"redpandatronicsuk/ionic2calendar","owner":"redpandatronicsuk","description":"Calendar directive for Ionic 2","archived":false,"fork":false,"pushed_at":"2017-09-22T02:48:21.000Z","size":3670,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-10T17:57:54.182Z","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/redpandatronicsuk.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}},"created_at":"2016-07-25T23:44:18.000Z","updated_at":"2017-06-01T05:18:49.000Z","dependencies_parsed_at":"2023-11-23T07:15:18.606Z","dependency_job_id":null,"html_url":"https://github.com/redpandatronicsuk/ionic2calendar","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/redpandatronicsuk%2Fionic2calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpandatronicsuk%2Fionic2calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpandatronicsuk%2Fionic2calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpandatronicsuk%2Fionic2calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redpandatronicsuk","download_url":"https://codeload.github.com/redpandatronicsuk/ionic2calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245924453,"owners_count":20694731,"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.340Z","updated_at":"2025-03-27T21:19:21.580Z","avatar_url":"https://github.com/redpandatronicsuk.png","language":"TypeScript","readme":"# No longer maintained\nI wrote this calendar component some time ago, when Ionic 2 was still in the beta phase. Back then I was very excited about the upcoming Ionic 2 release, but the Ionic team took way longer to build a release version of Ionic 2 (mainly because the Angular team was slow in releasing the next version of Angular) and I shifted my interests from Angular to React and from Ionic/Cordova to React Native. You could still use this code though as a starting point for writing your own Angular/Ionic based calendar and I will keep this repository for reference.\n\n# Ionic 2 Calendar\n## A responsive calendar directive for Ionic 2\n\n### Demo\nDemo \u003ca href=\"https://redpandatronicsuk.github.io/ionic2calendar/\"\u003ehere\u003c/a\u003e\n\n### Installation\nClone this directory and in the base directory run `npm i` to install the\ndependencies and `ionic serve` to test the app in the browser. If you need more\nhelp on using Ionic 2, have a look  \n\u003ca href=\"http://ionicframework.com/docs/v2/\"\u003ehere\u003c/a\u003e.\n\nAt the moment, if you want to use the calendar in your Ionic 2 app, you will\nhave to copy the folder *app/components/calendar* to your app. Once the calendar\ndirective is out of alpha stage, we will make a NPM repository for it.\n\n### Usage\nFor an example of how to use calendar directive have a look at \n*app/pages/calendar*. In the component you will have to import the directive as:\n```\nimport {CalendarComponent} from '../../components/calendar/calendar.component';\n```\nand add this property to the object passed to the @Component annotation function\n```\ndirectives: [CalendarComponent]\n```\nIf you want to access methods of the calendar from the parents component, you\nshould also annotate the CalendarComponent as a ViewChild:\n```\n@ViewChild(CalendarComponent)\nprivate calendarComponent: CalendarComponent;\n```\nthen in the parent component we can, for example, access the calendar's\n*addCalendarEvent* methods to add new calendar events. **NOTE:** Angular 2 and\nIonic 2 offer several options for Component interaction/communication. In Ionic\n2 apps, using the Ionic 2 \n\u003ca href=\"http://ionicframework.com/docs/v2/api/util/Events/\"\u003eEvents API\u003c/a\u003e\nmight be a better choice. We are still considering which option(s) to offer, if\nyou have any comments, please drop us a line.\n\nThen in the components template use:\n```\n \u003cionic2-calendar [calEvents]=\"calEvents\" \n    (afterEventMove)=\"afterEventMoved($event)\"\n    (onEventTap)=\"onEventTap($event)\"\n    (onEventDoubletap)=\"onEventDoubleTap($event)\"\n    (onEventPress)=\"onEventPress($event)\"\u003e\u003c/ionic2-calendar\u003e\n```\n*calEvents* is the only required parameter. The other parameters are event\nlisteners in the calendar's parent component. Every event is also fired using\nthe Ionic 2 Events Api.\n\n#### Input data structure\nThe calendar expects events in a array of the following form:\n```typescript\n[\n    {\n      id: 'item-1', // Value that will be used for the items id attribute, if\n                    // no value is suplied a random one will be generated and\n                    // used internally to identify items. If supplied, it must\n                    // be unique.\n      data: {}, // Optional object to hold custom data\n      icon: 'alarm', // Icon of the alert. This is compulsory when using the \n                     // calendar on small screens, as the name of the event will\n                     // not be displayed in the month grid. It has to be a valid\n                     // IonicIcons icon name.\n      class: 'class', // Class of the item in the month grid cell\n      iconStyle: { color: 'green' }, // Style for the item's icon\n      style: { color: 'red' }, // Style for the item\n      name: 'Item 1', // Name of the item\n      startDate: new Date(), // Start date\n      endDate: new Date(this.now + this.millisInHour * 1), // End date\n      allDay: false, // Boolean for all day events\n      ontap: (item: CalendarEvent) =\u003e { // Custom on-tap function for the item\n        this.nav.present(Toast.create({\n          message: 'Custom click event',\n          duration: 3000,\n          position: 'bottom'\n        }));\n      },\n      ondoubeltap: (item: CalendarEvent) =\u003e {...},\n      onpress: (item: CalendarEvent) =\u003e {...},\n    },\n```\nThe class and style parameters can be strings, arrays or objects, the same as\n[ngClass](https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html) \nand [ngStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) use.\nIf custom event handlers are given, they will be used instead of the default\nevent handler for a certain type of event. Ionic 2 events will be emitted in\neither case. For more info, check out the TypeScript interface definitions in\n*app/components/calendar/calendar.component.ts*.\n\n### TO-DO:\n- Day view\n- Year view\n- Transitions between views\n- Code clean up and documentation\n","funding_links":[],"categories":["UI","Components","Complete projects"],"sub_categories":["Form / Input","Input - Date/Calendar"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredpandatronicsuk%2Fionic2calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredpandatronicsuk%2Fionic2calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredpandatronicsuk%2Fionic2calendar/lists"}