calendar.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * calendarDemoApp - 0.1.3
  3. */
  4. app.controller('FullcalendarCtrl', ['$scope', function($scope) {
  5. var date = new Date();
  6. var d = date.getDate();
  7. var m = date.getMonth();
  8. var y = date.getFullYear();
  9. /* event source that pulls from google.com */
  10. $scope.eventSource = {
  11. url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  12. className: 'gcal-event', // an option!
  13. currentTimezone: 'America/Chicago' // an option!
  14. };
  15. /* event source that contains custom events on the scope */
  16. $scope.events = [
  17. {title:'All Day Event', start: new Date(y, m, 1), className: ['b-l b-2x b-info'], location:'New York', info:'This a all day event that will start from 9:00 am to 9:00 pm, have fun!'},
  18. {title:'Dance class', start: new Date(y, m, 3), end: new Date(y, m, 4, 9, 30), allDay: false, className: ['b-l b-2x b-danger'], location:'London', info:'Two days dance training class.'},
  19. {title:'Game racing', start: new Date(y, m, 6, 16, 0), className: ['b-l b-2x b-info'], location:'Hongkong', info:'The most big racing of this year.'},
  20. {title:'Soccer', start: new Date(y, m, 8, 15, 0), className: ['b-l b-2x b-info'], location:'Rio', info:'Do not forget to watch.'},
  21. {title:'Family', start: new Date(y, m, 9, 19, 30), end: new Date(y, m, 9, 20, 30), className: ['b-l b-2x b-success'], info:'Family party'},
  22. {title:'Long Event', start: new Date(y, m, d - 5), end: new Date(y, m, d - 2), className: ['bg-success bg'], location:'HD City', info:'It is a long long event'},
  23. {title:'Play game', start: new Date(y, m, d - 1, 16, 0), className: ['b-l b-2x b-info'], location:'Tokyo', info:'Tokyo Game Racing'},
  24. {title:'Birthday Party', start: new Date(y, m, d + 1, 19, 0), end: new Date(y, m, d + 1, 22, 30), allDay: false, className: ['b-l b-2x b-primary'], location:'New York', info:'Party all day'},
  25. {title:'Repeating Event', start: new Date(y, m, d + 4, 16, 0), alDay: false, className: ['b-l b-2x b-warning'], location:'Home Town', info:'Repeat every day'},
  26. {title:'Click for Google', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://google.com/', className: ['b-l b-2x b-primary']},
  27. {title:'Feed cat', start: new Date(y, m+1, 6, 18, 0), className: ['b-l b-2x b-info']}
  28. ];
  29. /* alert on dayClick */
  30. $scope.precision = 400;
  31. $scope.lastClickTime = 0;
  32. $scope.alertOnEventClick = function( date, jsEvent, view ){
  33. var time = new Date().getTime();
  34. if(time - $scope.lastClickTime <= $scope.precision){
  35. $scope.events.push({
  36. title: 'New Event',
  37. start: date,
  38. className: ['b-l b-2x b-info']
  39. });
  40. }
  41. $scope.lastClickTime = time;
  42. };
  43. /* alert on Drop */
  44. $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
  45. $scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
  46. };
  47. /* alert on Resize */
  48. $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view){
  49. $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
  50. };
  51. $scope.overlay = $('.fc-overlay');
  52. $scope.alertOnMouseOver = function( event, jsEvent, view ){
  53. $scope.event = event;
  54. $scope.overlay.removeClass('left right').find('.arrow').removeClass('left right top pull-up');
  55. var wrap = $(jsEvent.target).closest('.fc-event');
  56. var cal = wrap.closest('.calendar');
  57. var left = wrap.offset().left - cal.offset().left;
  58. var right = cal.width() - (wrap.offset().left - cal.offset().left + wrap.width());
  59. if( right > $scope.overlay.width() ) {
  60. $scope.overlay.addClass('left').find('.arrow').addClass('left pull-up')
  61. }else if ( left > $scope.overlay.width() ) {
  62. $scope.overlay.addClass('right').find('.arrow').addClass('right pull-up');
  63. }else{
  64. $scope.overlay.find('.arrow').addClass('top');
  65. }
  66. (wrap.find('.fc-overlay').length == 0) && wrap.append( $scope.overlay );
  67. }
  68. /* config object */
  69. $scope.uiConfig = {
  70. calendar:{
  71. height: 450,
  72. editable: true,
  73. header:{
  74. left: 'prev',
  75. center: 'title',
  76. right: 'next'
  77. },
  78. dayClick: $scope.alertOnEventClick,
  79. eventDrop: $scope.alertOnDrop,
  80. eventResize: $scope.alertOnResize,
  81. eventMouseover: $scope.alertOnMouseOver
  82. }
  83. };
  84. /* add custom event*/
  85. $scope.addEvent = function() {
  86. $scope.events.push({
  87. title: 'New Event',
  88. start: new Date(y, m, d),
  89. className: ['b-l b-2x b-info']
  90. });
  91. };
  92. /* remove event */
  93. $scope.remove = function(index) {
  94. $scope.events.splice(index,1);
  95. };
  96. /* Change View */
  97. $scope.changeView = function(view, calendar) {
  98. $('.calendar').fullCalendar('changeView', view);
  99. };
  100. $scope.today = function(calendar) {
  101. $('.calendar').fullCalendar('today');
  102. };
  103. /* event sources array*/
  104. $scope.eventSources = [$scope.events];
  105. }]);
  106. /* EOF */