angular-ui-calendar

<!DOCTYPE html> <html lang="en" ng-app="calendarDemoApp" id="top"> <head> <title>AngularUI Calendar for AngularJS</title> <link rel="icon" href="favicon.ico" /> <link rel="stylesheet" href="/../bower_components/bootstrap-css/css/bootstrap.css" /> <link rel="stylesheet" href="/../bower_components/fullcalendar/dist/fullcalendar.css"> <link rel="stylesheet" href="calendarDemo.css" /> <script src="../bower_components/jquery/dist/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> <script src="../bower_components/moment/moment.js"></script> <script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script> <script src="../bower_components/fullcalendar/dist/gcal.js"></script> <script src="../src/calendar.js"></script> <script src="calendarDemo.js"></script> </head> <body data-spy="scroll"> <header class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <div class="dropdown pull-left"> <a class="brand dropdown-toggle" role="button" data-toggle="dropdown" href="#"> AngularUI <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li> <li class="divider"></li> <li><a href="http://angular-ui.github.com/bootstrap/">Bootstrap</a></li> <li><a href="http://angular-ui.github.com/ng-grid/">Grid</a></li> <li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li> <li><a href="http://angular-ui.github.io/ui-router/sample/">Router <span class="label label-success">New!</span></a></li> <li><a href="http://angular-ui.github.com/Tips-n-Tricks/">Tips-n-Tricks <span class="label">WIP</span></a></li> </ul> </div> </div> </div> </header> <div class="hero-unit"> <div class="container"> <h1>UI Calendar</h1> <p>A complete AngularJS directive for the <a href="http://arshaw.com/fullcalendar/">Arshaw FullCalendar</a>.</p> <p class="btn-group"> <a href="https://github.com/angular-ui/ui-calendar" class='btn'><i class='icon-github'></i> Code on Github</a> <a href="https://github.com/angular-ui/ui-calendar/archive/master.zip" class='btn btn-primary'><i class="icon-download-alt icon-white"></i> Download <small>(0.8.1)</small></a> </p> </div> <div class="bs-docs-social"> <div class="container"> <ul class="bs-docs-social-buttons"> <li> <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-calendar&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> </li> <li> <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-calendar&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe> </li> <li> <div class="g-plusone" data-size="medium"></div>  <script type="text/javascript"> (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </li> </ul> </div> </div> </div> <div role="main"> <div class="container"> <section id="directives-calendar" ng-controller="CalendarCtrl"> <div class="page-header"> <h1>UI-Calendar</h1> </div> <div class="well"> <div class="row-fluid"> <div class="span4"> <h3>What?</h3> <p>Attach Angular objects to a calendar.</p> <p>Show the data binding between two differnet calendars using the same event sources.</p> <h3>Why?</h3> <p>Why Not?</p> <div class="btn-group calTools"> <button class="btn" ng-click="changeLang()"> {{changeTo}} </button> <button class="btn" ng-click="addRemoveEventSource(eventSources,eventSource)"> Toggle Source </button> <button type="button" class="btn btn-primary" ng-click="addEvent()"> Add Event </button> </div> <ul class="unstyled"> <li ng-repeat="e in events"> <div class="alert alert-info"> <a class="close" ng-click="remove($index)"><i class="icon-remove"></i></a> <b> <input ng-model="e.title"></b> {{e.start | date:"MMM dd"}} - {{e.end | date:"MMM dd"}} </div> </li> </ul> </div> <div class="span8"> <tabset> <tab select="renderCalender('myCalendar1');"> <tab-heading> <i class="glyphicon glyphicon-bell"></i> Calendar One </tab-heading> <div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''"> <h4>{{alertMessage}}</h4> </div> <div class="btn-toolbar"> <p class="pull-right lead">Calendar One View Options</p> <div class="btn-group"> <button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button> <button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">AgendaWeek</button> <button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button> </div> </div> <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div> </tab> <tab select="renderCalender('myCalendar2');"> <tab-heading> <i class="glyphicon glyphicon-bell"></i> Calendar Two </tab-heading> <div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''"> <h4>{{alertMessage}}</h4> </div> <div class="btn-toolbar"> <p class="pull-right lead">Calendar Two View Options</p> <div class="btn-group"> <button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar2')">AgendaDay</button> <button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar2')">AgendaWeek</button> <button class="btn btn-success" ng-click="changeView('month', 'myCalendar2')">Month</button> </div> </div> <div class="calendar" ng-model="eventSources" calendar="myCalendar2" ui-calendar="uiConfig.calendar"></div> </tab> <tab select="renderCalender('myCalendar3');"> <tab-heading> <i class="glyphicon glyphicon-bell"></i> Calendar Three </tab-heading> <div class="alert-success calAlert"> <h4>This calendar uses the extended form</h4> </div> <div class="btn-toolbar"> <p class="pull-right lead">Calendar Three View Options</p> <div class="btn-group"> <button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar3')">AgendaDay</button> <button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar3')">AgendaWeek</button> <button class="btn btn-success" ng-click="changeView('month', 'myCalendar3')">Month</button> </div> </div> <div class="calendar" ng-model="eventSources2" calendar="myCalendar3" ui-calendar="uiConfig.calendar"></div> </tab> </tabset> </div> </div> </div> <h3>How?</h3> <pre class="prettyprint linenums"> <div ui-calendar="{{uiConfig.calendar}}" class="span8 calendar" ng-model="eventSources"></div> /** * calendarDemoApp - 0.9.0 */ angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']); function CalendarCtrl($scope,$compile,uiCalendarConfig) { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $scope.changeTo = 'Hungarian'; /* event source that pulls from google.com */ $scope.eventSource = { url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic", className: 'gcal-event', // an option! currentTimezone: 'America/Chicago' // an option! }; /* event source that contains custom events on the scope */ $scope.events = [ {title: 'All Day Event',start: new Date(y, m, 1)}, {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)}, {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false}, {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false}, {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}, {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'} ]; /* event source that calls a function on every view switch */ $scope.eventsF = function (start, end, timezone, callback) { var s = new Date(start).getTime() / 1000; var e = new Date(end).getTime() / 1000; var m = new Date(start).getMonth(); var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}]; callback(events); }; $scope.calEventsExt = { color: '#f00', textColor: 'yellow', events: [ {type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false}, {type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false}, {type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'} ] }; /* alert on eventClick */ $scope.alertOnEventClick = function( date, jsEvent, view){ $scope.alertMessage = (date.title + ' was clicked '); }; /* alert on Drop */ $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){ $scope.alertMessage = ('Event Dropped to make dayDelta ' + delta); }; /* alert on Resize */ $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){ $scope.alertMessage = ('Event Resized to make dayDelta ' + delta); }; /* add and removes an event source of choice */ $scope.addRemoveEventSource = function(sources,source) { var canAdd = 0; angular.forEach(sources,function(value, key){ if(sources[key] === source){ sources.splice(key,1); canAdd = 1; } }); if(canAdd === 0){ sources.push(source); } }; /* add custom event*/ $scope.addEvent = function() { $scope.events.push({ title: 'Open Sesame', start: new Date(y, m, 28), end: new Date(y, m, 29), className: ['openSesame'] }); }; /* remove event */ $scope.remove = function(index) { $scope.events.splice(index,1); }; /* Change View */ $scope.changeView = function(view,calendar) { uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view); }; /* Change View */ $scope.renderCalender = function(calendar) { if(uiCalendarConfig.calendars[calendar]){ uiCalendarConfig.calendars[calendar].fullCalendar('render'); } }; /* Render Tooltip */ $scope.eventRender = function( event, element, view ) { element.attr({'tooltip': event.title, 'tooltip-append-to-body': true}); $compile(element)($scope); }; /* config object */ $scope.uiConfig = { calendar:{ height: 450, editable: true, header:{ left: 'title', center: '', right: 'today prev,next' }, eventClick: $scope.alertOnEventClick, eventDrop: $scope.alertOnDrop, eventResize: $scope.alertOnResize, eventRender: $scope.eventRender } }; $scope.changeLang = function() { if($scope.changeTo === 'Hungarian'){ $scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"]; $scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"]; $scope.changeTo= 'English'; } else { $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; $scope.changeTo = 'Hungarian'; } }; /* event sources array*/ $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF]; $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events]; } /* EOF */ </pre> </section> </div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-17352735-3']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>