angular-ui / ui-calendar

A complete AngularJS directive for the Arshaw FullCalendar.
http://angular-ui.github.io/ui-calendar/
MIT License
1.49k stars 729 forks source link

Events Not displaying On page load in live, it workes perfect on local #504

Closed irfankazi56 closed 7 years ago

irfankazi56 commented 7 years ago

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()
                  })
                })
            })
          }
irfankazi56 commented 7 years ago

I solved this issue by updating fullcalendar to 3.4.0