Closed HashtagPurvi closed 8 years ago
Followed @jdnichollsc Solution given below and the events get rendered now.
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events);
@HashtagPurvi where did exactly you put those rows above? same issue here
Just after when I assigned the $scope.eventSources.
Lemme know if this helps !
@HashtagPurvi thank you, i've tried that before, it's not working. i actually managed to fix my problem by pushing the event (again) when the $scope is updated
This is how I used and it's working:
` $scope.myevents = function(start, end, timezone, callback) {
eventsModel.get() // eventsModel called to get events from Google calendar
.success(function(data) {
var events = [];
angular.forEach(data,function(event,key){
$scope.events.push({
id: event.id,
title: event.time,
start: event.start
});
});
callback(events);
});
}
$scope.eventSources = [$scope.events, $scope.myevents]; `
@avastamin
I am getting 'source is undefined' and $scope.event is undefined
, can you please let me know what is wrong with my codes ?
` $scope.eventList = function(callback) {
service.event_list($scope, function (response) {
var events = [];
angular.forEach(response,function(event,key){
$scope.events.push({
id: event.id,
title: event.name,
start: event.start_date_time
});
});
callback(events);
});
}
$scope.eventSources = [$scope.events, $scope.eventList];`
I am using your directions , I also tried @HashtagPurvi solution but couldn't success , please help!!!
@sachinvrg maybe you should defined it first outside the function/service.
@revzankamarullah I've tried $scope.event = [] but it is not working, can you please share working codes if you have? I have also posted question at stackoverflow but still waiting for answer http://stackoverflow.com/questions/38989253/how-to-display-the-events-fetched-from-database-on-the-full-calendar-angular-js?noredirect=1#comment65331119_38989253
@sachinvrg what about $scope.eventSources
? Have you define that? if you haven't, define it as an object. Because i thought the calendar initialized before the request to the server done. After that you could watch $scope.eventSources
and push the array.
@revzankamarullah - I've posted full code base here - http://stackoverflow.com/questions/38989253/how-to-display-the-events-fetched-from-database-on-the-full-calendar-angular-js?noredirect=1#comment65331119_38989253 Can you please check it and let me know what is wrong? Thanks much for your response.
@sachinvrg i see $scope.eventSource
instead of $scope.eventSources
on your code
See my code here: http://stackoverflow.com/a/38990209/1960558
it's working for me
I don't know what I am missing here , but I paste your code - `app.controller('eventController', function($scope,$http, factoryInfo, service, $routeParams, Lightbox, $route, Upload, $compile) {
$scope.events = [];
$scope.calendarConfig = {
calendar: {
allDaySlot: false,
timezone: 'local',
editable: true,
lang: 'de',
header: {
left: 'title',
center: 'Custom text',
right: 'today prev,next'
},
eventClick: $scope.eventClick,
eventResizeStop: $scope.alertResize,
eventDragStop: $scope.alertDrag,
eventRender: $scope.eventRender,
dayClick: $scope.dayClick
}
};
$scope.myevents = function(start, end, timezone, callback) {
service.event_list($scope, function (response) {
// $rootScope.myobject = data;
var events = [];
angular.forEach(response,function(event,key){
$scope.events.push({
id: event.id,
title: event.name,
start: event.start_date_time
});
});
callback(events);
});
}
$scope.eventSources = [$scope.events,$scope.myevents];
});`
In HTML view <div ng-controller="eventController" data-ng-init="eventList(callback())" class="main-container">
and <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
I don't think, data-ng-init will work here....
I tried after remove it but didn't work , I checked in console while use your codes , it is throwing eventProps.start is undefined
Finally these codes worked for me, thanks much all of you!!! `app.controller('eventController', function($scope,$http, factoryInfo, service) {
$scope.events = [];
$scope.calendarConfig = {
calendar: {
allDaySlot: false,
timezone: 'local',
editable: true,
lang: 'de',
header: {
left: 'title',
center: 'Custom text',
right: 'today prev,next'
},
eventClick: $scope.eventClick,
eventResizeStop: $scope.alertResize,
eventDragStop: $scope.alertDrag,
eventRender: $scope.eventRender,
dayClick: $scope.dayClick
}
};
$scope.myevents = function(start, end, timezone, callback) {
service.event_list($scope, function (response) {
var events = [];
for (var i = 0; i < response.result.length; i++) {
$scope.events.push({
id: response.result[i].id,
title: response.result[i].name,
start: response.result[i].start_date_time
});
}
callback(events);
});
}
$scope.eventSources = [$scope.events,$scope.myevents];
});`
I tried everything said in that thread but I am unable to get the events to render.
My HTML (Jade):
div(calendar="bookingCalendar"
ui-calendar="calendarConfig.calendar"
data-ng-show="viewType === 'calendar'"
data-ng-model="eventSources")
My Controller Logic:
/**
* CALENDAR CODE
*/
$scope.booking = {
events: []
};
/* event source that calls a function on every view switch */
$scope.getEvents = function (start, end, timezone, callback) {
console.log('Getting events for START: ' + start + ' and END: ' + end);
$scope.booking.events = [];
var queryParams = {
from: moment(start).toDate().getTime(),
to: moment(end).toDate().getTime()
};
ServiceBooking.getBookings(queryParams).then(
function (response) {
for (var i = 0; i < response.bookings.length; i++) {
var bookingEvent = response.bookings[i];
var title = (bookingEvent.amenityName ? bookingEvent.amenityName : bookingEvent.serviceName) + ' - ' + bookingEvent.residentName;
$scope.booking.events.push({
title: title,
start: moment(bookingEvent.startTimestamp).toDate(),
end: moment(bookingEvent.endTimestamp).toDate(),
allDay: false,
stick: true,
url: '//google.com/',
});
}
uiCalendarConfig.calendars.bookingCalendar.fullCalendar('removeEvents');
uiCalendarConfig.calendars.bookingCalendar.fullCalendar('addEventSource', $scope.booking.events);
callback($scope.booking.events);
}
);
};
/* event sources array*/
$scope.eventSources = [$scope.booking.events, $scope.getEvents];
/* config object */
$scope.calendarConfig = {
calendar:{
height: 450,
timezone: 'local',
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.eventClick,
eventResizeStop: $scope.alertResize,
eventDragStop: $scope.alertDrag,
eventRender: $scope.eventRender,
dayClick: $scope.dayClick,
viewRender: function(view, element) {
console.log("View Changed: ", view.start.format('YYYY-MM-DD HH:mm'), view.end.format('YYYY-MM-DD HH:mm'));
}
}
};
why don't you try exactly the way I did here: https://stackoverflow.com/a/38990209/1960558 if works then refactor your code.
Otherwise create a online fiddle so that we can check it online.
Thanks
@avastamin tried exactly that still no luck. I can see both $scope.events and $scope.eventSources being changed when I move between months but no event is rendered.
Re-order the position of the code:
` $scope.booking = { events: [] };
$scope.calendarConfig = {
calendar:{
height: 450,
timezone: 'local',
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.eventClick,
eventResizeStop: $scope.alertResize,
eventDragStop: $scope.alertDrag,
eventRender: $scope.eventRender,
dayClick: $scope.dayClick,
viewRender: function(view, element) {
console.log("View Changed: ", view.start.format('YYYY-MM-DD HH:mm'), view.end.format('YYYY-MM-DD HH:mm'));
}
}
};
/ event source that calls a function on every view switch / $scope.getEvents = function (start, end, timezone, callback) {
console.log('Getting events for START: ' + start + ' and END: ' + end);
$scope.booking.events = [];
var queryParams = {
from: moment(start).toDate().getTime(),
to: moment(end).toDate().getTime()
};
ServiceBooking.getBookings(queryParams).then(
function (response) {
for (var i = 0; i < response.bookings.length; i++) {
var bookingEvent = response.bookings[i];
var title = (bookingEvent.amenityName ? bookingEvent.amenityName : bookingEvent.serviceName) + ' - ' + bookingEvent.residentName;
$scope.booking.events.push({
title: title,
start: moment(bookingEvent.startTimestamp).toDate(),
end: moment(bookingEvent.endTimestamp).toDate(),
allDay: false,
stick: true,
url: '//google.com/',
});
}
uiCalendarConfig.calendars.bookingCalendar.fullCalendar('removeEvents');
uiCalendarConfig.calendars.bookingCalendar.fullCalendar('addEventSource', $scope.booking.events);
callback($scope.booking.events);
}
);
};
/* event sources array*/
$scope.eventSources = [$scope.booking.events, $scope.getEvents];`
I am new to AngularJS and have to incorporate an Admin LTE full calendar feature in my webapp. I am using Angular directive for the Arshaw FullCalendar JQuery plugin. Although I am able to display the calendar, I am not able to render the data fetched from the DB. Below is the code for the controller.
In the above code, displayCalendar is the service which gets the data from the DB and getEvents() function is called to get the data in controller. The variable "result" contains the DB data and is then assigned to eventsources. My issue is I want to use this $scope.eventsources outside the getEvents() function so that I can use it to display the events on to the calendar. But when I do console.log(eventsources) outside the getEvents() it gives undefined. I did some digging and that helped me to understand that the getEvents() return the results late and that is the reason that when I console.log(eventsources) outside the function it is unassigned as by that time getEvents() has not returned anything. Please help m badly stuck. How can I make sure that first getEvents() should return the data and then the code below the function should get executed.