viewTitle don't show onload

[danny-36]

I put the CalendarDemoCtrl from the demo to my controller but when I load my app the viewTitle with current month don't show, if I change month viewTitle appers.

[twinssbc]

@danny-36 Could you provide your html code that declares the calendar directive?

[twinssbc]

@danny-36 I saw you closed this issue, is it solved?

[danny-36]

no sorry. this is my template:

<ion-view view-title={{viewTitle}}>
  <ion-nav-buttons side="right">
    <button class="button" ng-disabled="isToday()" ng-click="today()">Today</button>
    <button class="button" ng-click="changeMode('month')">M</button>
    <button class="button" ng-click="changeMode('week')">W</button>
    <button class="button" ng-click="changeMode('day')">D</button>
    <button class="button" ng-click="loadEvents()">Load Events</button>
  </ion-nav-buttons>

  <ion-content scroll="false" class="main-content">
    <calendar ng-model="calendar.currentDate" calendar-mode="calendar.mode" event-source="calendar.eventSource"
              range-changed="reloadSource(startTime, endTime)"
              event-selected="onEventSelected(event)"
              title-changed="onViewTitleChanged(title)"
              time-selected="onTimeSelected(selectedTime)"
              all-day-label="Tutto il giorno"
              step="30"></calendar>
  </ion-content>
</ion-view>

[twinssbc]

Do you have below callback in your controller? Could you set the breakpoint to see if it is called when the view is loaded?

$scope.onViewTitleChanged = function (title) {
            $scope.viewTitle = title;
};

[danny-36]

this is my controller:

angular.module('Events', ['ui.rCalendar'])
  .controller('eventsCtrl', function($scope, $rootScope, webdesktop, $state, $stateParams, dataShare, calendarConfig) {

    'use strict';

    var currentSite = dataShare.getData();

    $scope.calendar = {};
    $scope.changeMode = function (mode) {
      $scope.calendar.mode = mode;
    };

    $scope.loadEvents = function () {
      $scope.calendar.eventSource = createRandomEvents();
    };

    $scope.onEventSelected = function (event) {
      console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
    };

    $scope.onViewTitleChanged = function (title) {
      $scope.viewTitle = title;
    };

    $scope.today = function () {
      $scope.calendar.currentDate = new Date();
    };

    $scope.isToday = function () {
      var today = new Date(),
        currentCalendarDate = new Date($scope.calendar.currentDate);

      today.setHours(0, 0, 0, 0);
      currentCalendarDate.setHours(0, 0, 0, 0);
      return today.getTime() === currentCalendarDate.getTime();
    };

    $scope.onTimeSelected = function (selectedTime) {
      console.log('Selected time: ' + selectedTime);
    };

.... from this point code part to populate events in calendar

  });

[twinssbc]

That's weird, your code is exactly the same as my demo page. Do you also define the ion-nav-bar as below? Could you set the breakpoint on onViewTitleChanged method to see if it's triggered?

<ion-nav-bar class="bar-positive" align-title="left">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

[twinssbc]

That's weird, your code is exactly the same as my demo page. Do you also define the ion-nav-bar as below? Could you set the breakpoint on onViewTitleChanged method to see if it's triggered?

<ion-nav-bar class="bar-positive" align-title="left">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

[danny-36]

no I miss this part. now works. thank you very much.