| Issue 1854: | Show agenda axis on right side also | |
| 1 person starred this issue and may be notified of changes. | Back to list |
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
Feb 17, 2014
hi can you do this? Show agenda axis on right side if yes, how?
Feb 17, 2014
yes, I have done this by changing in fullcalendar.js
Jun 19, 2014
Hi, Could you please tell how did you do this ? (horizontal time and vertical day for week view)
Jun 19, 2014
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 + "'> </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 + "'> </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 + "'> </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 + "'> </th>
<th class='fc-agenda-gutter " + headerClass + "'> </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'> </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'))) :
' '
) +
"</th>" +
"<td class='" + contentClass + "'>" +
"<div style='position:relative'> </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'> </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'))) :
' '
) +
"</th>" +
"<td class='" + contentClass + "'>" +
"<div style='position:relative'> </div>" +
"</td>" +
"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ?
htmlEscape(formatDate(slotDate, opt('axisFormat'))) :
' '
) +
"</th>" +
"</tr>";
slotTime.add(slotDuration);
slotCnt++;
}
s +=
"</tbody>" +
"</table>";
slotTable = $(s).appendTo(slotContainer);
slotBind(slotTable.find('td'));
}
------------------------------------------------------------------------
Enjoy!
Aug 22, 2015
discussion for this has moved to github: https://github.com/fullcalendar/fullcalendar/issues/2121 (google code is shutting down) thanks!
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |
Status: Discussing
Labels: -Type-Enhancement Type-Feature