Is it possible to add event description to the EventSource?

[twinssbc]

@jmblank09 Yes, you can add a description field in your event object, and use customized weekview normal event template to display it. You can get more information from View Customization Options section in README.

[jmblank09]

How can i automatically display the dates with events because when i'm calling the load event function it is not automatically shown when the calendar is opened. At first the event is not display in the calendar but when i got to another month then go back to the previous month, the event is plotted in the calendar.

[twinssbc]

The calendar displays events each time the eventSource array is changed. I suppose you set the queryMode of the calendar to remote? So you need to set the eventSource array in the rangeChanged callback method.

[jmblank09]

Is this what are you saying?

[twinssbc]

@jmblank09 Is this getEvents function async call? If it is, you need to modify the eventSource in the getEvents callback.

[jmblank09]

angular.module('HIKAlendar.controllers')

.controller('CalendarCtrl', function($scope, $state, ValidationService, CalendarService){ $scope.calendar = {};

$scope.goToaddEvent = function() { $state.go('menu.calendar-options'); };

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

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

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

$scope.onTimeSelected = function (selectedTime, events, disabled) { // console.log('Selected time: ' + selectedTime + ', hasEvents: ' + (events !== undefined && events.length !== 0) + ', disabled: ' + disabled); };

$scope.onEventSelected = function (event) { if (event.eventType == 'appointment') { var title = 'Appointment'; var array = CalendarService.calendarAppointmentDetails(event.description); var detail = '

Date: ' + array['date'] + '

'

• '

  Start Time: ' + array['start_time'] + ''

• '

  End Time: ' + array['end_time'] + ''

• '

  Doctor: Dr. ' + array['doctor_name'] + ''

• '

  Purpose: ' + array['purpose_text'] + '

  ';

  } var cssClass = 'createPopupSuccess'; // ValidationService.popUp(title, detail, cssClass); };

  function getEvents() { var events = []; $scope.showLoading(); CalendarService.get_calendar_appointments().then(function(data) { for(var i in data) { var date = new Date(); var startTime = data[i]['start_time']; var endTime = data[i]['end_time']; var day = data[i]['date']; startTime = new Date(day + ' ' + startTime); endTime = new Date(day + ' ' +endTime); events.push({ title: 'Appointment', startTime: startTime, endTime: endTime, allDay: false, eventType: 'appointment', description: data[i]['date'] + ',' + data[i]['start_time'] + ',' + data[i]['end_time'] + ',' + data[i]['doctor_name'] + ',' + data[i]['purpose_text'] });

  };
  $scope.hideLoading();

  });

  return events; }

  $scope.loadEvents(); });

the getEvents is just like your createRandomEvents. I just called the loadEvents function in the controller.

[twinssbc]

@jmblank09 Oh, you just modify the array element in your callback. The calendar only watches the eventSource variable, not the element change in elementSource for performance reason. Each time you can rangeChanged, it first returns an empty array, so the calendar gets nothing to display. To fix that, there are two options.

1. You can directly set eventSource to the array you constructed in your get_calendar_appointment callback.
2. You can fire eventSourceChanged event, once you've modify the elements in the eventSource. You can get more information from README.

[jmblank09]

Your method is not working. How can i reload the calendar after i get the values.

[twinssbc]

When you get the values you need to assign a new array to eventSource. The calendar will display the events in the new array.

[jmblank09]

I've assigned the array events to the eventSource but it is still not working. Can you please give a snippet example code?

[twinssbc]

Try this? And don't assign the return value of getEvents to $scope.calendar.eventSource.

        function getEvents() {
            var events = [];
            $scope.showLoading();
            CalendarService.get_calendar_appointments().then(function(data) {
                for(var i in data) {
                    var date = new Date();
                    var startTime = data[i]['start_time'];
                    var endTime = data[i]['end_time'];
                    var day = data[i]['date'];
                    startTime = new Date(day + ' ' + startTime);
                    endTime = new Date(day + ' ' +endTime);
                    events.push({
                        title: 'Appointment',
                        startTime: startTime,
                        endTime: endTime,
                        allDay: false,
                        eventType: 'appointment',
                        description: data[i]['date'] + ',' + data[i]['start_time'] + ',' +
                        data[i]['end_time'] + ',' + data[i]['doctor_name'] + ',' + data[i]['purpose_text']
                    });
                };
                $scope.calendar.eventSource = events;
                $scope.hideLoading();
            });
        }

[jmblank09]

Thanks! I've tried to use broadcast in the documentation along with your solution and it worked! Thanks a lot!