Anchor links not working in Week & Day view in FullCalendar

Question

I am using FullCalendar 3.5.1

My events are rendered through eventRender by injecting some links on the event data. These links works on Month view. But when I switch to Week or Day view, those links are un-clickable. I have put a jsfiddle here https://jsfiddle.net/y8d0v6o3/1/ On the fiddle in month view throw console error but that is because not all functions are there on the fiddle but it also implies that links are getting clicked. On the Day/Week view there is not even an error.

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);
                }
            }

Answer 1

I found that it was issue of z-index. Fullcalendar.css add z-index to it's css elements. So I added postion:relative;

and a z-index high enough on my anchor tag css and that solved the issue.