• {{e.start | date:"MMM dd"}} - {{e.end | date:"MMM dd"}}
Calendar One

{{alertMessage}}

Calendar One View Options

 Calendar Two

{{alertMessage}}

Calendar Two View Options

 Calendar Three

This calendar uses the extended form

Calendar Three View Options

How?

<div ui-calendar="{{uiConfig.calendar}}" calendar="pakainfoCalendar" class="span8 calendar" ng-model="familypartySources"></div> 

angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

function LiveCalcCalenderController($scope,$compile,uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    
    $scope.changeTo = 'Hungarian';

    $scope.familypartySource = {
            url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
            className: 'gcal-familyparty',           // an option!
            currentTimezone: 'America/Chicago' // an option!
    };

    $scope.familyfunctions = [
      {title: 'All Day FamilyFunction',start: new Date(y, m, 1)},
      {title: 'Long FamilyFunction',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating FamilyFunction',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating FamilyFunction',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/'}
    ];

    $scope.familyfunctionsF = 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 familyfunctions = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
      callback(familyfunctions);
    };

    $scope.calFamilyFunctionsExt = {
       color: '#f00',
       textColor: 'yellow',
       familyfunctions: [ 
          {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 familypartyClick */
    $scope.alertOnFamilyFunctionClick = function( date, jsFamilyFunction, view){
        $scope.alertMessage = (date.title + ' was clicked ');
    };

     $scope.alertOnDrop = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view){
       $scope.alertMessage = ('FamilyFunction Dropped to make dayDelta ' + delta);
    };

    $scope.alertOnResize = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view ){
       $scope.alertMessage = ('FamilyFunction Resized to make dayDelta ' + delta);
    };

    $scope.inlineAddedDeletedFunction = 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 familyparty*/
    $scope.addFamilyFunction = function() {
      $scope.familyfunctions.push({
        title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']
      });
    };
    /* remove familyparty */
    $scope.remove = function(index) {
      $scope.familyfunctions.splice(index,1);
    };

    $scope.changeView = function(view,calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
    };

    $scope.renderCalender = function(calendar) {
      if(uiCalendarConfig.calendars[calendar]){
        uiCalendarConfig.calendars[calendar].fullCalendar('render');
      }
    };

    $scope.familypartyRender = function( familyparty, element, view ) { 
        element.attr({'tooltip': familyparty.title,
                     'tooltip-append-to-body': true});
        $compile(element)($scope);
    };

    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        familypartyClick: $scope.alertOnFamilyFunctionClick,
        familypartyDrop: $scope.alertOnDrop,
        familypartyResize: $scope.alertOnResize,
        familypartyRender: $scope.familypartyRender
      }
    };

    $scope.changeLang = function() {
      if($scope.changeTo === 'Hungarian'){
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["ndmsj", "DGfdg", "pikl", "modi", "webs", "demos", "Skmj"];
        $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';
      }
    };

    $scope.familypartySources = [$scope.familyfunctions, $scope.familypartySource, $scope.familyfunctionsF];
    $scope.familypartySources2 = [$scope.calFamilyFunctionsExt, $scope.familyfunctionsF, $scope.familyfunctions];
}