Issue 521: Agenda view without scrollbars, natural height
Status:  Released
Owner: ----
Closed:  Aug 2014
Reported by tuma.ma...@gmail.com, Jun 16, 2010
Hi, while working with your calendar, 
I wanted to remove scrollbars from agenda views,so i used contentHeight property. But when i load some allday events, scrollbars might be shown again (depending on amount of allday events in one slot).
So I thing agendaHeight property would nicely solve this issue.
Meanwhile I use this (calendarid and agendaHeight are parameters for my function which returns options for calendar):
loading:function(is_loading,view){
if(!is_loading){ //false when event loading ends
		var all_day_height = parseInt($('#'+calendarid+' .fc-all-day th.fc-axis').height());
		if(!isNaN(all_day_height)){
			$('#'+calendarid).fullCalendar('option', 'contentHeight', all_day_height+agendaHeight);
		}
		
	}
}

Jun 16, 2010
Project Member #1 adamrs...@gmail.com
this is sort of a related issue: https://code.google.com/p/fullcalendar/issues/detail?id=235

but on a separate note, it might be useful to completely remove scrollbars and let agenda view take up its natural height. but will hold off until i know more people need this. thanks
Summary: agenda view without scrollbars
Labels: Type-Enhancement
Jul 6, 2010
#2 ljau...@gmail.com
I think it can be a good enhancement. I'd really appreciate such feature. +1
Jul 9, 2010
#3 fred.gasse
This feature would be a huge enhancement! 
Aug 25, 2010
Project Member #4 adamrs...@gmail.com
 Issue 543  has been merged into this issue.
Aug 25, 2010
Project Member #5 adamrs...@gmail.com
 Issue 610  has been merged into this issue.
Aug 25, 2010
Project Member #6 adamrs...@gmail.com
 Issue 611  has been merged into this issue.
Sep 22, 2010
#7 tanguy.pruvot@gmail.com
the fix for  issue 235  body.height(tableHeight) should fix that if the height is bigger than needed (ex height: 1900,) for week view... but this height is also used in other views so... we maybe need a new special setting for that, like "scrollbar: false"
Sep 22, 2010
#8 travisco...@gmail.com
def need this!  
Oct 7, 2010
Project Member #9 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: agenda view without scrollbars, natural height
Status: Accepted
Nov 7, 2010
#10 borys.po...@gmail.com
Here's another voice for this enhacement :-)
Dec 8, 2010
#11 jimmy.mi...@gmail.com
Does anyone have a patch for fixing the height and removing the right column that is meant to hold the scrollbar?
Dec 8, 2010
#12 yowza...@gmail.com
jimmy -

I worked around the problem to a degree. Not perfect, but ok for now. See  issue #610  for what I did.

Tauren

Dec 13, 2010
#13 jacobvan...@gmail.com
Well it is easier than you think. Just take a very high height: e.g. height: 3000. The calendar just makes it fit, if height is actually less.
Dec 18, 2010
#14 antfri...@gmail.com
The option to have no scroll bars in agenda view would be really quite a logical feature for a web app such as mine... I have tried to acheive this through a few methods i found on tha net but to no avail. Each method just caused another problem furthur down the line. For now i am just having to live with the scroll bars. Such a cool plugin though.. has changed my site massively for the better!!!

Thanks,

Anthony
Dec 26, 2010
Project Member #15 adamrs...@gmail.com
 Issue 742  has been merged into this issue.
Jan 4, 2011
#16 tuma.ma...@gmail.com
Hi again,
I have just updated to new vesion and must say, it's a good piece of work.
One problem still persists (the one I originally ment):

When calendar is loaded, it takes its proper height, that's ok, scrollbar is hidden.
But then i load some allday events and part of the calendar hides itself, and scrollbar does not apperar.

see pictures attached

I fix this with function I originally posted. It remembers the height of agenda without all day slot and after loading of events is done it changes the contentHeight to agendaHeight+ allDayHeight;

calendar_full.png
48.8 KB   View   Download
Jan 4, 2011
#17 tuma.ma...@gmail.com
sorry bad screen,
here is the proper one
calendar_empty.png
19.5 KB   View   Download
Mar 28, 2011
#18 ploeger....@gmail.com
That would be a huge enhancement !

I would really really really appreciate it as well.


Apr 19, 2011
#19 malko...@gmail.com
Hi,

At the risk of "me too!" I would love to see this feature.  

I don't know if something has changed in the latest version but I haven't had any luck with removing the scrollbars.  I've tried some of the solutions in other threads with no luck and manually manipulating in Firebug, but the elements I need to change don't have a class or an id so I'm a bit stumped on how to achieve it.

I went for the simplest choice of making contentHeight really big (3000px) but even then there is still a bit of a scrollbar left on an empty calendar when it should have plenty of space.  Any way to get rid of this?  Screenshot is for contentHeight of 3000 which should be more than enough.  In fact the contentHeight doesn't change for values over about 1200px I reckon.

Thanks,
Anthony.


calendar.jpg
51.5 KB   View   Download
Jun 6, 2011
#20 fag...@syonet.com
I am using in my project the property height: 'auto'. It automatically defines an auto height if this is specified. It would be nice if somebody could make some tests and check if it is really working. This is just a few adjustements.

You can check in:
https://code.google.com/p/fullcalendar/issues/detail?id=610#c5
May 3, 2012
#21 i...@dejong-it.nl
The height: 'auto' isn't working for me because I don't want the monthview to be that large.

I have another solution.
I'm setting the height to 1500 on the agendaWeek and agendaDay views. Saving the old height when you're switching to the monthview.
You have to re-render the full calendar, else it won't work.


Add the following lines to the function changeView(newViewName) just above renderView();



if (newViewName == 'agendaWeek' || newViewName == 'agendaDay') {
	if (options.height != 1500) {
		if (options.height !== undefined) options.oldheight = options.height;
		options.height = 1500;
		render();
	}
} else {
	if (options.height != options.oldheight) {
		options.height = options.oldheight;
		render();
	}
}


Aug 9, 2012
#22 greg.gof...@gmail.com
Hi Adam, great plugin!  Would it be possible to get an update on this when you have some free time?  I would love the option to not have scrollbars on agenda week and agenda day views, just curious if this has any traction?  Looks like it's been around for a couple years and is still open.  Thanks so much!
Aug 13, 2013
Project Member #23 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Agenda view without scrollbars, natural height (was: agenda view without scrollbars, natural height)
Labels: -Type-Enhancement Type-Feature
Oct 17, 2013
#24 ryansle...@gmail.com
was this ever completed?
Dec 19, 2013
#25 gprod....@gmail.com
As a simple workaround for now I just disabled to `month` view and set aspect ratio to .5
Jun 15, 2014
Project Member #26 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: milestone-skeleton
Jul 23, 2014
Project Member #28 adamrs...@gmail.com
This is now possible in v2.1 (beta)

Simply set the `height` or `contentHeight` setting to the string 'auto' and agenda view will stretch the entire height with no scrollbars.

http://blog.arshaw.com/1/post/2014/07/fullcalendar-210-beta.html

I would really appreciate if you could verify this. Thanks a lot!
Jul 28, 2014
#29 m...@trou.pl
Using agenda-views.html and following settings:
$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: '',
			},
			defaultView: 'agendaWeek',
			slotDuration: '01:00:00',
			editable: true,
			timeFormat: 'H:mm',
			axisFormat: 'H:mm',
			contentHeight: 'auto',
			height: 'auto',
			selectable: true,
			selectHelper: true,
			select: function(start, end) {
				alert(start.format()+'-'+end.format());
			},
			events: [
				{
					title: 'All Day Event',
					start: '2014-06-01'
				},
				{
					title: 'Long Event',
					start: '2014-06-07',
					end: '2014-06-10'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-06-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-06-16T16:00:00'
				},
				{
					title: 'Meeting',
					start: '2014-06-12T10:30:00',
					end: '2014-06-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2014-06-12T12:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2014-06-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2014-06-28'
				}
			]
		});
		
	});

this is how calendar is rendered: 
Selection_085.png
10.1 KB   View   Download
Jul 28, 2014
Project Member #30 adamrs...@gmail.com
Hi @mk@trou.pl

I made a JSFiddle recreation of your code:
http://jsfiddle.net/arshaw/8VESD/

I don't see any problem. Are there any other forces at work? Can you try to manipulate that fiddle until you can recreate the problem?

BTW, here are the JS/CSS paths I used to get the beta version in there:
https://cdn.rawgit.com/arshaw/fullcalendar/v2.1.0-beta1/dist/fullcalendar.css
https://cdn.rawgit.com/arshaw/fullcalendar/v2.1.0-beta1/dist/fullcalendar.js
Aug 14, 2014
Project Member #31 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Implemented
Aug 26, 2014
Project Member #32 adamrs...@gmail.com
This issue has been resolved with the official release of v2.1.0:
http://blog.arshaw.com/1/post/2014/08/fullcalendar-210-released.html

Please post any follow-up bug reports or feature requests as separate issues. Thanks.
Status: Released