{"id":19924046,"url":"https://github.com/twinssbc/angularjs-responsivecalendar","last_synced_at":"2025-06-25T00:33:22.622Z","repository":{"id":16852215,"uuid":"19612110","full_name":"twinssbc/AngularJS-ResponsiveCalendar","owner":"twinssbc","description":"A pure AngularJS responsive calendar directive","archived":false,"fork":false,"pushed_at":"2019-03-20T23:35:10.000Z","size":144,"stargazers_count":112,"open_issues_count":30,"forks_count":77,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-07T13:11:12.247Z","etag":null,"topics":["angular","calendar"],"latest_commit_sha":null,"homepage":"http://twinssbc.github.io/AngularJS-ResponsiveCalendar/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":"2014-05-09T13:32:57.000Z","updated_at":"2024-04-08T01:57:35.000Z","dependencies_parsed_at":"2022-08-30T13:41:35.444Z","dependency_job_id":null,"html_url":"https://github.com/twinssbc/AngularJS-ResponsiveCalendar","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngularJS-ResponsiveCalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngularJS-ResponsiveCalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngularJS-ResponsiveCalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngularJS-ResponsiveCalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twinssbc","download_url":"https://codeload.github.com/twinssbc/AngularJS-ResponsiveCalendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252156877,"owners_count":21703367,"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","calendar"],"created_at":"2024-11-12T22:16:09.717Z","updated_at":"2025-05-03T07:31:15.464Z","avatar_url":"https://github.com/twinssbc.png","language":"JavaScript","readme":"# ui-rCalendar directive\n\nA pure AngularJS responsive calendar directive    \n\nYou could also check https://github.com/twinssbc/Angular-Customizable-Calendar for the Angular version.  \nIf you want to only use it in Ionic framework, please check https://github.com/twinssbc/Ionic2-Calendar for the Ionic specific version\n\n# Demo\nhttp://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/\n\n# Usage\n\nBower Install: `bower install ng-responsive-calendar`\n\nLoad the necessary dependent files:\n\n    \u003clink rel=\"stylesheet\" href=\"../lib/bootstrap/dist/css/bootstrap.css\"/\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003cbower lib installation path\u003e/ng-responsive-calendar/dist/css/calendar.min.css\"/\u003e\n    \u003cscript src=\"../lib/angular/angular.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"\u003cbower lib installation path\u003e/ng-responsive-calendar/dist/js/calendar-tpls.min.js\"\u003e\u003c/script\u003e\n\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# 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 month 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* showWeeks    \nIf set to true, a week number column will be displayed in the month view.       \nDefault value: false\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* startingDay    \nControl month 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* 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    \n        $scope.onEventSelected = function (event) {\n            console.log(event.title);\n        };\n\n* timeSelected    \nThe callback function triggered when a date or time is selected\n\n        \u003ccalendar ... time-selected=\"onTimeSelected(selectedTime, events)\"\u003e\u003c/calendar\u003e\n        \n        $scope.onTimeSelected = function (selectedTime, events) {\n\t\t\tconsole.log('Selected time: ' + selectedTime + ' hasEvents: ' + (events !== undefined \u0026\u0026 events.length !== 0));\n        };\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fangularjs-responsivecalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwinssbc%2Fangularjs-responsivecalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fangularjs-responsivecalendar/lists"}