Issue 1854: Show agenda axis on right side also
Status:  ExportedToGithub
Owner: ----
Closed:  Aug 2015
Reported by chintanm...@gmail.com, Jun 2, 2013
Hello,

First of all I thank you for such a great plugin. I have implement fullcalendar and it's very easy to use and implement.

My requirement is, I require timeline at both side also in agenda week view. I tried to show it at right side by customizing fullcalendar.js, and it works fine. But while rendering events there is an issue with designing regarding events postition. 

So I want your help, It will be great if you provide and extra configuration to show time line (agenda axis) on right side also.

Thanks in advance :).

I am waiting for your positive reply.


With regards,
Chintan Mirani


Aug 24, 2013
Project Member #1 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Show agenda axis on right side also (was: Show ageda axis on right side also in agendaweek view.)
Status: Discussing
Labels: -Type-Enhancement Type-Feature
Feb 17, 2014
#2 r.hours...@gmail.com
hi
can you do this?
Show agenda axis on right side

if yes, how?
Feb 17, 2014
#3 chintanm...@gmail.com
yes, I have done this by changing in fullcalendar.js
Jun 19, 2014
#4 hichamel...@gmail.com
Hi,

Could you please tell how did you do this ? (horizontal time and vertical day for week view)
Jun 19, 2014
#6 chintanm...@gmail.com
Replace below two function into your fullcalendar.js.  That's it.
Old function:
------------------------------------------------------------------------
function buildDayTableHeadHTML() {
                var headerClass = tm + "-widget-header";
                var date;
                var html = '';
                var weekText;
                var col;

                html +=
                        "<thead>" +
                        "<tr>";

                if (opt('weekNumbers')) {
                        date = cellToDate(0, 0);
                        weekText = calculateWeekNumber(date);
                        if (rtl) {
                                weekText += opt('weekNumberTitle');
                        }
                        else {
                                weekText = opt('weekNumberTitle') + weekText;
                        }
                        html +=
                                "<th class='fc-agenda-axis fc-week-number " + headerClass + "'>" +
                                htmlEscape(weekText) +
                                "</th>";
                }
                else {
                        html += "<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
                }

                for (col=0; col<colCnt; col++) {
                        date = cellToDate(0, col);
                        html +=
                                "<th class='fc-" + dayIDs[date.day()] + " fc-col" + col + ' ' + headerClass + "'>" +
                                htmlEscape(formatDate(date, colFormat)) +
                                "</th>";
                }

                html +=
                        "<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>" +
                        "</tr>" +
                        "</thead>";

                return html;
        }
------------------------------------------------------------------------
        
        
        
        
New function:
------------------------------------------------------------------------
function buildDayTableHeadHTML() {
                var headerClass = tm + "-widget-header";
                var date;
                var html = '';
                var weekText;
                var col;

                html +=
                        "<thead>" +
                        "<tr>";

                if (opt('weekNumbers')) {
                        date = cellToDate(0, 0);
                        weekText = calculateWeekNumber(date);
                        if (rtl) {
                                weekText += opt('weekNumberTitle');
                        }
                        else {
                                weekText = opt('weekNumberTitle') + weekText;
                        }
                        html +=
                                "<th class='fc-agenda-axis fc-week-number " + headerClass + "'>" +
                                htmlEscape(weekText) +
                                "</th>";
                }
                else {
                        html += "<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
                }

                for (col=0; col<colCnt; col++) {
                        date = cellToDate(0, col);
                        html +=
                                "<th class='fc-" + dayIDs[date.day()] + " fc-col" + col + ' ' + headerClass + "'>" +
                                htmlEscape(formatDate(date, colFormat)) +
                                "</th>";
                }

                html +=
                        "<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>
                        <th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>" +
                        "</tr>" +
                        "</thead>";

                return html;
        }
------------------------------------------------------------------------


Old buildSkeleton function
------------------------------------------------------------------------
function buildSkeleton() {
                var s;
                var headerClass = tm + "-widget-header";
                var contentClass = tm + "-widget-content";
                var slotTime;
                var slotDate;
                var minutes;
                var slotNormal = slotDuration.asMinutes() % 15 === 0;
                
                buildDayTable();
                
                slotLayer =
                        $("<div style='position:absolute;z-index:2;left:0;width:100%'/>")
                                .appendTo(element);
                                
                if (opt('allDaySlot')) {
                
                        daySegmentContainer =
                                $("<div class='fc-event-container' style='position:absolute;z-index:8;top:0;left:0'/>")
                                        .appendTo(slotLayer);
                
                        s =
                                "<table style='width:100%' class='fc-agenda-allday' cellspacing='0'>" +
                                "<tr>" +
                                "<th class='" + headerClass + " fc-agenda-axis'>" +
                                (
                                        opt('allDayHTML') ||
                                        htmlEscape(opt('allDayText'))
                                ) +
                                "</th>" +
                                "<td>" +
                                "<div class='fc-day-content'><div style='position:relative'/></div>" +
                                "</td>" +
                                "<th class='" + headerClass + " fc-agenda-gutter'>&nbsp;</th>" +
                                "</tr>" +
                                "</table>";
                        allDayTable = $(s).appendTo(slotLayer);
                        allDayRow = allDayTable.find('tr');
                        
                        dayBind(allDayRow.find('td'));
                        
                        slotLayer.append(
                                "<div class='fc-agenda-divider " + headerClass + "'>" +
                                "<div class='fc-agenda-divider-inner'/>" +
                                "</div>"
                        );
                        
                }else{
                
                        daySegmentContainer = $([]); // in jQuery 1.4, we can just do $()
                
                }
                
                slotScroller =
                        $("<div style='position:absolute;width:100%;overflow-x:hidden;overflow-y:auto'/>")
                                .appendTo(slotLayer);
                                
                slotContainer =
                        $("<div style='position:relative;width:100%;overflow:hidden'/>")
                                .appendTo(slotScroller);
                                
                slotSegmentContainer =
                        $("<div class='fc-event-container' style='position:absolute;z-index:8;top:0;left:0'/>")
                                .appendTo(slotContainer);
                
                s =
                        "<table class='fc-agenda-slots' style='width:100%' cellspacing='0'>" +
                        "<tbody>";

                slotTime = moment.duration(+minTime); // i wish there was .clone() for durations
                slotCnt = 0;
                while (slotTime < maxTime) {
                        slotDate = t.start.clone().time(slotTime); // will be in UTC but that's good. to avoid DST issues
                        minutes = slotDate.minutes();
                        s +=
                                "<tr class='fc-slot" + slotCnt + ' ' + (!minutes ? '' : 'fc-minor') + "'>" +
                                "<th class='fc-agenda-axis " + headerClass + "'>" +
                                ((!slotNormal || !minutes) ?
                                        htmlEscape(formatDate(slotDate, opt('axisFormat'))) :
                                        '&nbsp;'
                                        ) +
                                "</th>" +
                                "<td class='" + contentClass + "'>" +
                                "<div style='position:relative'>&nbsp;</div>" +
                                "</td>" +
                                "</tr>";
                        slotTime.add(slotDuration);
                        slotCnt++;
                }

                s +=
                        "</tbody>" +
                        "</table>";

                slotTable = $(s).appendTo(slotContainer);
                
                slotBind(slotTable.find('td'));
        }
        
        
        
New buildSkeleton function
------------------------------------------------------------------------

function buildSkeleton() {
                var s;
                var headerClass = tm + "-widget-header";
                var contentClass = tm + "-widget-content";
                var slotTime;
                var slotDate;
                var minutes;
                var slotNormal = slotDuration.asMinutes() % 15 === 0;
                
                buildDayTable();
                
                slotLayer =
                        $("<div style='position:absolute;z-index:2;left:0;width:100%'/>")
                                .appendTo(element);
                                
                if (opt('allDaySlot')) {
                
                        daySegmentContainer =
                                $("<div class='fc-event-container' style='position:absolute;z-index:8;top:0;left:0'/>")
                                        .appendTo(slotLayer);
                
                        s =
                                "<table style='width:100%' class='fc-agenda-allday' cellspacing='0'>" +
                                "<tr>" +
                                "<th class='" + headerClass + " fc-agenda-axis'>" +
                                (
                                        opt('allDayHTML') ||
                                        htmlEscape(opt('allDayText'))
                                ) +
                                "</th>" +
                                "<td>" +
                                "<div class='fc-day-content'><div style='position:relative'/></div>" +
                                "</td>" +
                                "<th class='" + headerClass + " fc-agenda-gutter'>&nbsp;</th>" +
                                "</tr>" +
                                "</table>";
                        allDayTable = $(s).appendTo(slotLayer);
                        allDayRow = allDayTable.find('tr');
                        
                        dayBind(allDayRow.find('td'));
                        
                        slotLayer.append(
                                "<div class='fc-agenda-divider " + headerClass + "'>" +
                                "<div class='fc-agenda-divider-inner'/>" +
                                "</div>"
                        );
                        
                }else{
                
                        daySegmentContainer = $([]); // in jQuery 1.4, we can just do $()
                
                }
                
                slotScroller =
                        $("<div style='position:absolute;width:100%;overflow-x:hidden;overflow-y:auto'/>")
                                .appendTo(slotLayer);
                                
                slotContainer =
                        $("<div style='position:relative;width:100%;overflow:hidden'/>")
                                .appendTo(slotScroller);
                                
                slotSegmentContainer =
                        $("<div class='fc-event-container' style='position:absolute;z-index:8;top:0;left:0'/>")
                                .appendTo(slotContainer);
                
                s =
                        "<table class='fc-agenda-slots' style='width:100%' cellspacing='0'>" +
                        "<tbody>";

                slotTime = moment.duration(+minTime); // i wish there was .clone() for durations
                slotCnt = 0;
                while (slotTime < maxTime) {
                        slotDate = t.start.clone().time(slotTime); // will be in UTC but that's good. to avoid DST issues
                        minutes = slotDate.minutes();
                        s +=
                                "<tr class='fc-slot" + slotCnt + ' ' + (!minutes ? '' : 'fc-minor') + "'>" +
                                "<th class='fc-agenda-axis " + headerClass + "'>" +
                                ((!slotNormal || !minutes) ?
                                        htmlEscape(formatDate(slotDate, opt('axisFormat'))) :
                                        '&nbsp;'
                                        ) +
                                "</th>" +
                                "<td class='" + contentClass + "'>" +
                                "<div style='position:relative'>&nbsp;</div>" +
                                "</td>" +
                                "<th class='fc-agenda-axis " + headerClass + "'>" +
                                ((!slotNormal || !minutes) ?
                                        htmlEscape(formatDate(slotDate, opt('axisFormat'))) :
                                        '&nbsp;'
                                        ) +
                                "</th>" +
                                "</tr>";
                        slotTime.add(slotDuration);
                        slotCnt++;
                }

                s +=
                        "</tbody>" +
                        "</table>";

                slotTable = $(s).appendTo(slotContainer);
                
                slotBind(slotTable.find('td'));
        }
------------------------------------------------------------------------





Enjoy!
Aug 22, 2015
Project Member #7 adamrs...@gmail.com
discussion for this has moved to github:
https://github.com/fullcalendar/fullcalendar/issues/2121

(google code is shutting down)

thanks!
Status: ExportedToGithub