Якорные ссылки не работают в представлении «Неделя и день» в FullCalendar

Я использую FullCalendar 3.5.1

Мои события обрабатываются через eventRender путем внедрения некоторых ссылок в данные события. Эти ссылки работают в режиме просмотра «Месяц». Но когда я переключаюсь в режим просмотра «Неделя» или «День», эти ссылки становятся недоступными для кликов. Я поставил здесь jsfiddle https://jsfiddle.net/y8d0v6o3/1/ На скрипке в представлении месяца выдает ошибку консоли, но это потому, что не все функции есть на скрипке, но это также означает, что ссылки нажимаются. В представлении «День/Неделя» даже ошибки нет.

eventRender: function(event, element, view) {
                element.find(".fc-title").remove();
                //element.find(".fc-time").remove();
                $(element).css("margin-top", "3px");
                $(element).addClass('event-on-' + event.start.format('YYYY-MM-DD'));
                var wsTitleStyle = 'class="titlelinkConfirm"';
                if(event.autoscheduled){
                    wsTitleStyle = 'class="titlelinkAutoSchd"'; 
                }
                if(event.missed){
                    //if missed change title color
                    wsTitleStyle = 'class="titlelinkMissed"'; 
                }
                var pbSurveyFlag = event.isSurvey ? 2 : 1;
                if(event.title == 'ZZZZXXXYYY'){
                    event.eventBorderColor = '#FFF';
                    var wsMomentDate = event.start.format('YYYY-MM-DD');
                    var new_description ='<br/><a class="alink" href="javascript:calDetails('+ '&#39;'+'audits-appt-day.cfm' + '&#39;'+',500,400,' + '&#39;'+event.encryptedStart +'&#39;' +',' + '&#39;'+ 'dayView' + '&#39;' + ','+'0' +')">'
                + 'Details'  + '</a>' + '&nbsp;&nbsp;&nbsp;&nbsp;'
                + '<a class="alink" href="javascript:calDetails('+ '&#39;'+'audits-mapDay.cfm' + '&#39;'+',800,600,' + '&#39;'+event.encryptedStart +'&#39;' +',' + '&#39;'+ 'dayView' + '&#39;' +',' + '&#39;' + wsMomentDate +'&#39;' +')">'
                + '<strong>Map Day</strong>'  + '</a>'
                ;

                element.append(new_description);
                //do not allow this to be dragged
                event.editable = false; 
                }else{

                if (event.autoscheduled && !event.missed){
                    slink = '<a class="alink" href="javascript:doConfirmCal(' + '&#39;'+ event.auditID+'&#39;'+','+event.eventID+')">Confirm</a>';
                } else if(!event.missed){ 
                    slink = '<a class="alink" href="javascript:popupReDirectEncryptedURL('+ '&#39;'+ 'auditID=' + event.auditID +'&missed='+ event.eventID +'&type=' + pbSurveyFlag+ '&#39;'+',' + '&#39;'+ 'ticket-progress.cfm' +'&#39;' + ','  + '800,500,'+ '&#39;'+'apptLetter' + '&#39;'+')">Missed</a>';
                }
                var new_description =   '<a ' +wsTitleStyle+ ' href="javascript:LoadApptPage(' + event.eventID +',' + pbSurveyFlag +')">'
                    + event.title + '</a><br/><br/>'
                    + '<a class="alink" href="javascript:LoadFlexPage(' + '&#39;' + event.auditID + '&#39;' +',' + '&#39;'+pbSurveyFlag +'&#39;' +')">'
                    + 'View'  + '</a>' + '&nbsp;&nbsp;'
                    + slink
                    + '<br/>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<a class="alink" href="admin-timeTracking.cfm?isSurvey=' +pbSurveyFlag+'&auditID=' + event.auditID +'&date='+event.encryptedStart  +'">'
                    + 'Submit Time'  + '</a>' 
                    ;

                element.append(new_description);
                }
            }

person CFML_Developer    schedule 21.10.2017    source источник


Ответы (1)


Я обнаружил, что это проблема z-index. Fullcalendar.css добавляет z-index к своим элементам CSS. Поэтому я добавил position:relative;

и достаточно высокий z-индекс в моем теге привязки css, и это решило проблему.

person CFML_Developer    schedule 22.10.2017