{"id":36151658,"url":"https://github.com/mgwidmann/ui-calendar","last_synced_at":"2026-01-11T00:00:18.882Z","repository":{"id":27212561,"uuid":"30683491","full_name":"mgwidmann/ui-calendar","owner":"mgwidmann","description":"A complete AngularJS directive for the Arshaw FullCalendar.","archived":false,"fork":true,"pushed_at":"2015-02-12T05:06:45.000Z","size":3657,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T20:20:11.053Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://angular-ui.github.io/ui-calendar/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"angular-ui/ui-calendar","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mgwidmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-12T03:26:32.000Z","updated_at":"2015-02-12T03:26:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mgwidmann/ui-calendar","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/mgwidmann/ui-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgwidmann%2Fui-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgwidmann%2Fui-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgwidmann%2Fui-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgwidmann%2Fui-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgwidmann","download_url":"https://codeload.github.com/mgwidmann/ui-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgwidmann%2Fui-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28261727,"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":"2026-01-10T02:00:06.867Z","response_time":57,"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":[],"created_at":"2026-01-11T00:00:03.710Z","updated_at":"2026-01-11T00:00:18.872Z","avatar_url":"https://github.com/mgwidmann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui-calendar directive [![Build Status](https://travis-ci.org/angular-ui/ui-calendar.svg?branch=master)](https://travis-ci.org/angular-ui/ui-calendar)\r\n\r\nA complete AngularJS directive for the Arshaw FullCalendar.\r\n\r\n# Requirements\r\n- ([AngularJS](http://code.angularjs.org/1.2.1/angular.js))\r\n- ([fullcalendar.js 2.0 and it's dependencies](http://arshaw.com/fullcalendar/download/))\r\n- optional - ([gcal-plugin](http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/gcal.js))\r\n\r\n# Testing\r\n\r\nWe use karma and grunt to ensure the quality of the code.\r\n\r\n    npm install -g grunt-cli\r\n    npm install\r\n    bower install\r\n    grunt\r\n\r\n# Usage\r\n\r\nWe use [bower](http://twitter.github.com/bower/) for dependency management.  Add\r\n\r\n    dependencies: {\r\n        \"angular-ui-calendar\": \"latest\"\r\n    }\r\n\r\nTo your `components.json` file. Then run\r\n\r\n    bower install\r\n\r\nThis will copy the ui-calendar files into your `components` folder, along with its dependencies. Load the script and style files in your application:\r\n\r\n    \u003clink rel=\"stylesheet\" href=\"bower_components/fullcalendar/fullcalendar.css\"/\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/jquery/jquery.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/jquery-ui/ui/jquery-ui.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/angular-ui-calendar/src/calendar.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/fullcalendar/fullcalendar.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"bower_components/fullcalendar/gcal.js\"\u003e\u003c/script\u003e\r\n\r\nAdd the calendar module as a dependency to your application module:\r\n\r\n    var myAppModule = angular.module('MyApp', ['ui.calendar'])\r\n\r\nApply the directive to your div elements. The calendar must be supplied an array of decoumented event sources to render itself:\r\n\r\n    \u003cdiv ui-calendar ng-model=\"eventSources\"\u003e\u003c/div\u003e\r\n\r\nDefine your model in a scope e.g.\r\n\r\n    $scope.eventSources = [];\r\n\r\n## Options\r\n\r\nAll the Arshaw Fullcalendar options can be passed through the directive. This even means function objects that are declared on the scope.\r\n\r\n    myAppModule.controller('MyController', function($scope) {\r\n        /* config object */\r\n        $scope.uiConfig = {\r\n          calendar:{\r\n            height: 450,\r\n            editable: true,\r\n            header:{\r\n              left: 'month basicWeek basicDay agendaWeek agendaDay',\r\n              center: 'title',\r\n              right: 'today prev,next'\r\n            },\r\n            dayClick: $scope.alertEventOnClick,\r\n            eventDrop: $scope.alertOnDrop,\r\n            eventResize: $scope.alertOnResize\r\n          }\r\n        };\r\n    });\r\n\r\n    \u003cdiv ui-calendar=\"uiConfig.calendar\" ng-model=\"eventSources\"\u003e\r\n\r\n## Working with ng-model\r\n\r\nThe ui-calendar directive plays nicely with ng-model.\r\n\r\nAn Event Sources objects needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.\r\n\r\nThe ui-calendar directive expects the eventSources object to be any type allowed in the documentation for the fullcalendar. [docs](http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/)\r\nNote that all calendar options which are functions that are passed into the calendar are wrapped in an apply automatically.\r\n\r\n## Accessing the calendar object\r\n\r\nIt is possible to access a specific calendar object by declaring a name for it on the uiCalendar directive. In this next line we are naming the calendar 'myCalendar'. This will be attached to the uiCalendarConfig constant object, that can be accessed via DI.\r\n\r\n    \u003cdiv ui-calendar=\"calendarOptions\" ng-model=\"eventSources\" calendar=\"myCalendar\"\u003e\r\n\r\nNow the calendar object is available in uiCalendarConfig.calendars:\r\n\r\n    uiCalendarConfig.calendars.myCalendar\r\n\r\nThis allows you to declare any number of calendar objects with distinct names.\r\n\r\n## Custom event rendering\r\n\r\nYou can use fullcalendar's `eventRender` option to customize how events are rendered in the calendar.\r\nHowever, only certain event attributes are watched for changes (they are `id`, `title`, `url`, `start`, `end`, `allDay`, and `className`).\r\n\r\nIf you need to automatically re-render other event data, you can use `calendar-watch-event`.\r\n`calendar-watch-event` expression must return a function that is passed `event` as argument and returns a string or a number, for example:\r\n\r\n    $scope.extraEventSignature = function(event) {\r\n       returns \"\" + event.price;\r\n    }\r\n\r\n    \u003cui-calendar calendar-watch-event=\"extraEventSignature\" ... \u003e\r\n    // will now watch for price\r\n\r\n## Watching the displayed date range of the calendar\r\n\r\nThere is no mechanism to $watch the displayed date range on the calendar due to the JQuery nature of fullCalendar.  If you want\r\nto track the dates displayed on the calendar so you can fetch events outside the scope of fullCalendar (Say from a caching store\r\nin a service, instead of letting fullCalendar pull them via AJAX), you can add the viewRender callback to the calendar config.\r\n\r\n    $scope.calendarConfig = {\r\n        calendar:{\r\n            height: \"100%\",\r\n            ...\r\n            viewRender: function(view, element) {\r\n                $log.debug(\"View Changed: \", view.visStart, view.visEnd, view.start, view.end);\r\n            }\r\n        }\r\n    };\r\n\r\n## Documentation for the Calendar\r\n\r\nThe calendar works alongside of all the documentation represented [here](http://arshaw.com/fullcalendar/docs)\r\n\r\n## PR's R always Welcome\r\nMake sure that if a new feature is added, that the proper tests are created.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgwidmann%2Fui-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgwidmann%2Fui-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgwidmann%2Fui-calendar/lists"}