Facing Events and Title Problem

[akashsky44]

I would like to load the events on the calendar load(Without the need to click the load events button)
Im facing some issues as well

1. When the calendar is loaded at the beginning the title is missing/empty, to get the title I have to scroll to the next/previous month to get it displayed.
2. The same happens and when I load the events. I'm tabbing the load events button, but no events will be shown, until I scroll to the next/previous month.
   

[twinssbc]

@akashsky44 I guess your load event method is an async call? You need to manipulate the eventSource in your callback. Also could you put a breakpoint in your onViewTitleChanged method see if it's triggered on loading?

[akashsky44]

please help me i m stuck in this how to solve load event method is an async call. i dont understand how to do this. below here my controller

.controller('CalendarDemoCtrl', function ($scope, fireBaseData, $rootScope) {
$rootScope.extras = true;
$scope.monthviewEventDetailTemplateUrl = 'templates/calendarOrderDetail.html';

'use strict';
$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, events, disabled) {
  console.log('Selected time: ' + selectedTime + ', hasEvents: ' + (events !== undefined && events.length !== 0) + ', disabled: ' + disabled);
};

function createRandomEvents() {
var events = [];
var startTime;
var endTime;
var Time;

fireBaseData.refOrder()
.orderByChild('user_id')
.startAt(firebase.auth().currentUser.uid).endAt(firebase.auth().currentUser.uid)
.once('value', function (snapshot) {
snapshot.forEach(function (snapshot) {
var orders = snapshot.val();
Time = snapshot.child("time");
startTime = new Date(Time.val());
endTime = new Date(Time.val());
console.log("startTime", startTime);
console.log("endTime", startTime);
foo();
});
});
function foo(){
events.push({
title: 'Events ',
startTime: startTime,
endTime: endTime
});
}
return events;
}

})

[twinssbc]

@akashsky44
This line doesn't work, as createRandomEvent won't return anything.

$scope.calendar.eventSource = createRandomEvents();

In your foo method, once you filled the events array, you just need to assign it to eventSource

$scope.calendar.eventSource= events;

[akashsky44]

• 1.thanks sir i need to load events without click events button when calendar is load events automatic show how to do this.

• 2.below here my view code here i face title problem view title not show starting of calendar when swipe then show.

<ion-view class=" " id="page18" title="{{viewTitle}}">
    <ion-nav-buttons side="right" class="button-bar" style="background-color: #607d8b;color: #fff;"></ion-nav-buttons>
        <div class="bar bar-header" style="background-color: #607d8b;color: #fff;">
  <h1 class="title" style="color: #fff;">{{viewTitle}}</h1>
</div>
<ion-content scroll="false" class="main-content">
        <calendar auto-select="false" no-events-label="" all-day-label="Time" format-day="d" format-month-title="MMM yyyy" format-week-title="MMM yyyy, Week w" format-week-view-day-header="EEE, d-MMM-yyyy" 
        format-day-title="EEE, d-MMM-yyyy" starting-day-week="1" starting-day-month="1" is-date-disabled="isDateDisabled(date)" 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, events, disabled)"
            step="30" monthview-event-detail-template-url="monthviewEventDetailTemplateUrl" weekview-all-day-event-template-url="weekviewAllDayEventTemplateUrl"></calendar>

    </ion-content>
      <div class="tabs" style="border:#fff">
<div class="button-bar">
        <a class="button button-balanced" style="border:1px solid #fff;border-radius: 4px;" ng-disabled="isToday()" ng-click="today()" >Today</a>
        <a class="button button-balanced" style="border:1px solid #fff;border-radius: 4px;"  ng-click="changeMode('month')" >Month</a>
        <a class="button button-balanced" style="border:1px solid #fff;border-radius: 4px;"  ng-click="changeMode('week')" >Week</a>
        <a class="button button-balanced" style="border:1px solid #fff;border-radius: 4px;"  ng-click="loadEvents()" >Event's</a>
  </div>
  </div>
</ion-view>

[twinssbc]

@akashsky44

1. You could use ng-init method on your controller and load events in your ng-init method.
2. Your onViewTitleChanged method is responsible for setting the text of the view.
   Could you put a breakpoint in your onViewTitleChanged method see if it's triggered on loading?
   Also why do you need to put two {{viewTitle}}? Is it possible they are conflicting with each other?

[akashsky44]

@twinssbc how to do calendar load events without click on event button. i m trying many times but i cant do. please help me in my controller how to do calendar load events on startup, i m trying ng-init but that not working so tell me where to put what lines of code and what to do changes in view part.

[twinssbc]

In your html page, you could put ng-init like below:

        <ion-content scroll="false" class="main-content" ng-init="init()">
            <calendar ng-model="calendar.currentDate" calendar-mode="calendar.mode" event-source="calendar.eventSource"
                      range-changed="reloadSource(startTime, endTime)" monthview-display-event-template-url="monthviewTemplateUrl"
                      event-selected="onEventSelected(event)" title-changed="onViewTitleChanged(title)"
                      time-selected="onTimeSelected(selectedTime, events, disabled)" step="30"></calendar>
        </ion-content>

Then in your controller code, you could fill the eventSource in the init function.

        $scope.init = function() {
            createRandomEvents();
        };