Events Not displaying On page load in live, it workes perfect on local
irfankazi56 opened this issue · 1 comments
I am working on laravel-angular project and I am using angular ui-calendar, I am also using jquery context menu plugin to create dynamic menu for each events.
I am using fullcalendar# 2.7.3 , angular-ui-calendar#1.0.2 , jQuery-contextMenu#2.4.4 and moment#2.18.1
->When i load full calendar page on server, It does not display current month nor any events on current month, But as i change the view like day or week and return to month view then it is displaying events properly. And because of this the next/prev and today buttons are not working.
->When i change the view from next or previous buttons, The events are displayed properly but the header title containing month is wrong, it always displays 1 month greater when i use next or previous button.
This Code is working fine on local, I have also tried to change timezone but it still i face the issue.
Here is my code:
//To get Data
function datasetsevents(){
let Subcourses = API.service('subcoursescalender')
return Subcourses.one().get();
}
$scope.eventsF = function(start, end, timezone, callback) {
var events = [];
datasetsevents()
.then(function(response){
var instdata = API.copy(response)
var insname=instdata.data.instructeursroleusersforlist
angular.forEach(instdata.data.subcoursescalender, function (value) {
var insintitle='';
if(value.Instructeurs!=''){
var res = value.Instructeurs.split(',');
var insno=1;
angular.forEach(res, function (valueins) {
angular.forEach(insname, function (Insdatafor) {
if(Insdatafor.id==valueins){
insintitle=insintitle.concat('<br>Instructor-' +insno + ' : ' +Insdatafor.name +' '+Insdatafor.LastName)
insno=insno+1;
}
})
})
}
var color='';
//category 1
if(value.MainCategoryId==1){
if(value.IsActive==1){
color='#FF00CC';
}else{
color='#ee6fd5';
}
}else
//category 2
if(value.MainCategoryId==2){
if(value.IsActive==1){
color='#6fdc6f';
}else{
color='#8dd88d';
}
}else{
color=''
}
events.push({
title: value.title.concat("<br>WeekNos: "+value.WeekNos+insintitle+"<br>Number Of Inscriptions : " + value.count),
start: value.start,
end: value.end,
color:color,
courseID: value.id,
IsActive: value.IsActive,
textColor:'white'
});
insintitle='';
})
callback(events);
})
};
/* Change View */
$scope.changeView = function(view,calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalender = function(calendar) {
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
};
/* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
var title_act_dea='';
title_act_dea=event.IsActive;
if(title_act_dea==1){
title_act_dea='De-activate';
var image_url = '/img/deactive-course.png';
}else{
title_act_dea='activate';
var image_url = '/img/complete2.png';
}
element.find('span.fc-title').html(element.find('span.fc-title').text());
var menu = [{
name: 'Voir Inscriptions',
img: '/img/sre.png',
title: 'Voir button',
fun: function () {
var flag = confirm('View Inscriptions?');
if(flag){
window.open('/#/subcourse-view/'+event.courseID, "_blank");
return false;
}else{
return false;
}
}
}, {
name: 'Modifier',
img: '/img/Copy-icon.png',
title: 'Modifier bouton',
fun: function () {
var flag = confirm('Êtes- vous sûr de vouloir mettre à jour cet événement?');
if(flag){
window.open('/#/subcourse-edit/'+event.courseID, "_blank");
return false;
}else{
return false;
}
return false;
}
}, {
name: 'Supprimer',
img: '/img/dust-bin.png',
title: 'Supprimer bouton',
fun: function () {
var dta=deletes(event.courseID);
}
},{
name: title_act_dea,
img: image_url,
title: 'active/deactive button',
fun: function () {
var statusch=statuschange(event.courseID);
}
}, {
name: 'Fermer',
img: '/img/cross.png',
title: 'Fermer Menu',
fun: function () {
}
}
];
if(event.title != "blocked" || event.arrive == 0){
element.contextMenu(menu);
}
};
$scope.uiConfig = {
calendar:{
defaultView: "month",
editable: false,
height: 'auto',
firstDay: moment(new Date()).day(),
header:{
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
eventRender: $scope.eventRender,
eventClick: function(event,element) {
element.stopPropagation();
},
}
}
$scope.eventSources = [$scope.eventsF];
function deletes (courseID) {
swal({
title: 'Are you sure?',
text: 'You will be able to recover this data From Archive!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, Archive it!',
closeOnConfirm: false,
showLoaderOnConfirm: true,
html: false
}, function () {
let Blog = API.all('subcourse/deletes')
Blog.post({
'data': [courseID],
})
.then(() => {
swal({
title: 'Archived!',
text: 'Course has been Archived.',
type: 'success',
confirmButtonText: 'OK',
closeOnConfirm: true
}, function () {
$state.reload()
})
})
})
}
function statuschange (courseID) {
// console.log(courseID,Status)
swal({
title: 'Are you sure?',
text: 'You want to change status of course',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, change it!',
closeOnConfirm: false,
showLoaderOnConfirm: true,
html: false
}, function () {
let Blog = API.all('subcourse/statuschange')
Blog.post({
'data': courseID,
})
.then(() => {
swal({
title: 'Archived!',
text: 'Course has been Updated.',
type: 'success',
confirmButtonText: 'OK',
closeOnConfirm: true
}, function () {
$state.reload()
})
})
})
}
I solved this issue by updating fullcalendar to 3.4.0