{"id":19924048,"url":"https://github.com/twinssbc/ionic-calendar","last_synced_at":"2025-10-07T03:05:54.242Z","repository":{"id":58222113,"uuid":"46666610","full_name":"twinssbc/Ionic-Calendar","owner":"twinssbc","description":"A calendar directive for Ionic framework","archived":false,"fork":false,"pushed_at":"2018-05-23T15:11:52.000Z","size":200,"stargazers_count":158,"open_issues_count":83,"forks_count":73,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-09-09T03:51:59.436Z","etag":null,"topics":["calendar","ionic"],"latest_commit_sha":null,"homepage":"http://twinssbc.github.io/Ionic-Calendar/demo","language":"JavaScript","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/twinssbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-22T15:32:57.000Z","updated_at":"2025-04-03T03:51:26.000Z","dependencies_parsed_at":"2022-08-31T02:51:51.848Z","dependency_job_id":null,"html_url":"https://github.com/twinssbc/Ionic-Calendar","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/twinssbc/Ionic-Calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FIonic-Calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FIonic-Calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FIonic-Calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FIonic-Calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twinssbc","download_url":"https://codeload.github.com/twinssbc/Ionic-Calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FIonic-Calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278712710,"owners_count":26032742,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","ionic"],"created_at":"2024-11-12T22:16:10.134Z","updated_at":"2025-10-07T03:05:54.214Z","avatar_url":"https://github.com/twinssbc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic-Calendar directive\n\nIonic calendar directive\n\nThis repository only supports Ionic v1.\n\nPlease visit https://github.com/twinssbc/Ionic2-Calendar which supports higher version of Ionic.\n\n# Demo\nhttp://twinssbc.github.io/Ionic-Calendar/demo/\n\n# Usage\n\nBower Install: `bower install ionic-calendar`\n\nLoad the necessary dependent files:\n\n    \u003clink rel=\"stylesheet\" href=\"http://code.ionicframework.com/1.1.1/css/ionic.min.css\"/\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003cbower lib installation path\u003e/ionic-calendar/dist/css/calendar.min.css\"/\u003e\n    \u003cscript src=\"http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"\u003cbower lib installation path\u003e/ionic-calendar/dist/js/calendar-tpls.min.js\"\u003e\u003c/script\u003e\n\nAdd the calendar module as a dependency to your application module:\n\n    var myAppModule = angular.module('MyApp', ['ui.rCalendar'])\n\nAdd the directive in the html page\n\n    \u003ccalendar calendar-mode=\"mode\" event-source=\"eventSource\"\u003e\n\n\nTo change calendar selected date, simply use ng-model\n\n    $scope.selectedDate = new Date();\n    \u003ccalendar calendar-mode=\"mode\" event-source=\"eventSource\" ng-model=\"selectedDate\"\u003e\u003c/calendar\u003e\n\n# Options\n\n* formatDay    \nThe format of the date displayed in the month view.    \nDefault value: 'dd'\n* formatDayHeader    \nThe format of the header displayed in the month view.    \nDefault value: 'EEE'\n* formatDayTitle    \nThe format of the title displayed in the day view.    \nDefault value: 'MMMM dd, yyyy'\n* formatWeekTitle    \nThe format of the title displayed in the week view.    \nDefault value: 'MMMM yyyy, Week w'\n* formatMonthTitle    \nThe format of the title displayed in the month view.    \nDefault value: 'MMMM yyyy'\n* formatWeekViewHeader    \nThe format of the header displayed in the week view.    \nDefault value: 'EEE d'\n* formatHourColumn    \nThe format of the hour column displayed in the week and day view.    \nDefault value: 'ha'\n* calendarMode    \nThe initial mode of the calendar.    \nDefault value: 'month'\n* showEventDetail    \nIf set to true, when selecting the date in the month view, the events happened on that day will be shown below.    \nDefault value: true\n* startingDayMonth    \nControl month view starting from which day.    \nDefault value: 0\n* startingDayWeek    \nControl week view starting from which day.    \nDefault value: 0\n* allDayLabel    \nThe text displayed in the allDay column header.    \nDefault value: ‘all day’\n* noEventsLabel    \nThe text displayed when there’s no event on the selected date in month view.    \nDefault value: ‘No Events’\n* eventSource    \nThe data source of the calendar, when the eventSource is set, the view will be updated accordingly.    \nDefault value: null    \nThe format of the eventSource is described in the EventSource section\n* queryMode    \nIf queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view    \nIf queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.    \nUsers will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.    \nDefault value: 'local'\n* step    \nIt can be set to 15 or 30, so that the event can be displayed at more accurate position in weekview or dayview.\n* autoSelect    \nIf set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view.    \nDefault value: true\n\n# View Customization Options\n\n* monthviewDisplayEventTemplateUrl    \nThe template url to provide customized view for event displayed in the monthview    \nDefault value: 'templates/rcalendar/monthviewDisplayEvent.html'\n\n```\n        \u003ccalendar ... monthview-display-event-template-url=\"monthviewDisplayEventTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.monthviewDisplayEventTemplateUrl = 'myTemplate.html';\n```\n* monthviewEventDetailTemplateUrl    \nThe template url to provide customized view for event detail section in the monthview    \nDefault value: 'templates/rcalendar/monthviewEventDetail.html'\n\n```\n        \u003ccalendar ... monthview-event-detail-template-url=\"monthviewEventDetailTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.monthviewEventDetailTemplateUrl = 'myTemplate.html';\n```\n* weekviewAllDayEventTemplateUrl    \nThe template url to provide customized view for all day event in the weekview   \nDefault value: 'templates/rcalendar/displayEvent.html'\n\n```\n        \u003ccalendar ... weekview-all-day-event-template-url=\"weekviewAllDayEventTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.weekviewAllDayEventTemplateUrl = 'myTemplate.html';\n```\n* weekviewNormalEventTemplateUrl    \nThe template url to provide customized view for normal event in the weekview    \nDefault value: 'templates/rcalendar/displayEvent.html'\n\n```\n        \u003ccalendar ... weekview-normal-event-template-url=\"weekviewNormalEventTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.weekviewNormalEventTemplateUrl = 'myTemplate.html';\n```\n* dayviewAllDayEventTemplateUrl    \nThe template url to provide customized view for all day event in the dayview    \nDefault value: 'templates/rcalendar/displayEvent.html'\n\n```\n        \u003ccalendar ... dayview-all-day-event-template-url=\"dayviewAllDayEventTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.dayviewAllDayEventTemplateUrl = 'myTemplate.html';\n```\n* dayviewNormalEventTemplateUrl    \nThe template url to provide customized view for normal event in the dayview    \nDefault value: 'templates/rcalendar/displayEvent.html'\n\n```\n        \u003ccalendar ... dayview-normal-event-template-url=\"dayviewNormalEventTemplateUrl\"\u003e\u003c/calendar\u003e\n        \n        $scope.dayviewNormalEventTemplateUrl = 'myTemplate.html';\n```\n\n# Callback Options\n\n* rangeChanged    \nThe callback function triggered when the range or mode is changed if the queryMode is set to 'remote'\n\n        $scope.rangeChanged = function (startTime, endTime) {\n            Events.query({startTime: startTime, endTime: endTime}, function(events){\n                $scope.eventSource=events;\n            });\n        };\n\n* eventSelected    \nThe callback function triggered when an event is clicked\n\n        \u003ccalendar ... event-selected=\"onEventSelected(event)\"\u003e\u003c/calendar\u003e    \n    \n        $scope.onEventSelected = function (event) {\n            console.log(event.title);\n        };\n\n* timeSelected    \nThe callback function triggered when a date is selected in the monthview. If there's no event at the selected time, the events parameter will be either undefined or empty array\n\n        \u003ccalendar ... time-selected=\"onTimeSelected(selectedTime, events, disabled)”\u003e\u003c/calendar\u003e\n        \n        $scope.onTimeSelected = function (selectedTime, events, disabled) {\n            console.log('Selected time: ' + selectedTime + ', hasEvents: ' + (events !== undefined \u0026\u0026 events.length !== 0) + ‘, disabled: ’ + disabled);\n        };\n\n* titleChanged    \nThe callback function triggered when the view title is changed\n\n        \u003ccalendar ... title-changed=\"onViewTitleChanged(title)”\u003e\u003c/calendar\u003e\n        \n        $scope.onViewTitleChanged = function (title) {\n            $scope.viewTitle = title;\n        };\n\n* isDateDisabled\nThe callback function to determine if the date should be disabled\n\n        \u003ccalendar ... is-date-disabled=\"isDateDisabled(date)”\u003e\u003c/calendar\u003e\n        \n        $scope.isDateDisabled = function (date) {\n            var currentDate = new Date();\n            currentDate.setHours(0,0,0);\n            return date \u003c= currentDate;\n        };\n\n# EventSource\n\nEventSource is an array of event object which contains at least below fields:\n\n* title\n* startTime    \nIf allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.    \nFor example, if an allDay event starting from 2014-05-09, then startTime is\n\n        var startTime = new Date(Date.UTC(2014, 4, 8));\n\n* endTime    \nIf allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.    \nFor example, if an allDay event ending to 2014-05-10, then endTime is\n\n        var endTime = new Date(Date.UTC(2014, 4, 9));\n\n* allDay    \nIndicates the event is allDay event or regular event\n\n**Note**\nIn the current version, the calendar controller only watches for the eventSource reference as it's the least expensive.\nThat means only you manually reassign the eventSource value, the controller get notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend.\nIn case you want to manually insert/remove/update the element in the eventSource array, you can call broadcast the 'eventSourceChanged' event to notify the controller manually.\n\n# Events\n\n* changeDate    \nWhen receiving this event, the calendar will move the current view to previous or next range.  \nParameter: direction  \n1 - Forward  \n-1 - Backward\n\n        $scope.$broadcast('changeDate', 1);\n\n* eventSourceChanged    \nThis event is only needed when you manually modify the element in the eventSource array.  \nParameter: value  \nThe whole event source object\n\n        $scope.$broadcast('eventSourceChanged',$scope.eventSource);\n\n# i18n support\nWhen including the angular locale script, the viewTitle and header of the calendar will be translated to local language automatically.\n\n        \u003cscript src=\"http://code.angularjs.org/1.4.3/i18n/angular-locale_xx.js\"\u003e\u003c/script\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fionic-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwinssbc%2Fionic-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fionic-calendar/lists"}