Search code examples
javascriptjqueryfullcalendar-3

Is there possible to add a moreLink to display all events in a popup regardless the space available in the dayCell?


I am trying to add a moreLink in full calendar on each day i have events and in the more link i want to force displaying all the events on that day!

this is the solutin i choose because the title of the events are very long and do not fit in a tablet or phone screen!

so far i am unsuccesfull on the days i have one single event because the function computeRowLevelLimit returns false!

i am open to any crazy idea that helps me but keep in mind that i am a java dev with minimal kowledge of js and add some extra info if possible


Solution

  • since i was under presure i took the matter in my own hands so here is the resolve

    here i added the last else in order to be able to execute 2 methods when levelLimit is false
    
    limitRows: function (levelLimit) {
                var rowStructs = this.eventRenderer.rowStructs || [];
                var row; // row #
                var rowLevelLimit;
    
                for (row = 0; row < rowStructs.length; row++) {
                    this.unlimitRow(row);
    
                    if (!levelLimit) {
                        rowLevelLimit = false;
                    }
                    else if (typeof levelLimit === 'number') {
                        rowLevelLimit = levelLimit;
                    }
                    else {
                        rowLevelLimit = this.computeRowLevelLimit(row);
                    }
    
                    if (rowLevelLimit !== false) {
                        this.limitRow(row, rowLevelLimit);
                    } else {
                        this.unlimitRow2(row);
                        this.addMoreLink(row);
                    }
    
                }
            },
    
    The added metod are: 
       - one for clearing the existing links 
       -  second for adding new links - remember this is for days with only one event
    
    the methods are the following:
    
    unlimitRow2: function (row) {
                var rowStruct = this.eventRenderer.rowStructs[row];
    
                var cellMatrix;
                var oneDayCell;
                cellMatrix = rowStruct.cellMatrix;
                var _this = this;
    
                for (i = 0; i < cellMatrix.length; i++) {
                    // console.log("celmatrix ", cellMatrix[i]);
                    oneDayCell = cellMatrix[i];
                    console.log("outati", oneDayCell)
    
                    if (oneDayCell.moreEls) {
                        oneDayCell.moreEls.remove();
                        oneDayCell.moreEls = null;
                    }
    
                    if (oneDayCell.limitedEls) {
                        oneDayCell.limitedEls.removeClass('fc-limited');
                        oneDayCell.limitedEls = null;
                    }
                }
            },
    
    and, 
    
    addMoreLink: function (row) {
                // console.log("inside addMoreMethod", row);
                var rowStruct = this.eventRenderer.rowStructs[row];
                var cellMatrix;
                var oneDayCell;
                var coloana;
                var nrCol;
                var td, moreWrap, moreLink;
                var moreNodes = [];
                var segsBelow;
                // console.log ("structura randului", rowStruct);
                cellMatrix = rowStruct.cellMatrix;
                var _this = this;
    
                for (i = 0; i < cellMatrix.length; i++) {
                    // console.log("celmatrix ", cellMatrix[i]);
                    oneDayCell = cellMatrix[i];
                    for (j = 0; j < oneDayCell.length; j++) {
                        coloana = oneDayCell[j];
                        nrCol = j;
                        segsBelow = _this.getCellSegs(row, nrCol);
    
                        console.log($(coloana));
                        moreLink = _this.renderMoreLink(row, nrCol, segsBelow);
                        moreWrap = $('<div/>').append(moreLink);
                        coloana.append(moreWrap);
                        moreNodes.push(moreWrap[0]);
    
                        // rowStruct.limitedEls = $(limitedNodes);
                    }
                    rowStruct.moreEls = $(moreNodes); // for easy undoing later
                }
            },
    
    and for the rest i manipulated a litle bit limitRow: function (row, levelLimit)
    
    also i had to hide the text and i choose a nasty method, not proud of it but ...
    
    in getMoreLinkText(num) i added a last else if 
    
    else if (num === 0 ){
                    return '';
                }