Is it possible to make fullcalendar not overflow events? - json

I'm trying to get fullcalendar to work with my JSON data, and so far it is going good.
I've got my JSON loaded and everything but on certain days their are a lot of events.
Is it possible to make it so each square in the calendar is a set height?
I've tried both contentHeight and height but neither of them seemed to help with this problem.

Yes, see http://arshaw.com/fullcalendar/docs/display/eventLimit/ for details on the eventLimit option introduced in v2.1.0 of FullCalendar.

Related

Searching for algorithm/logic to place overlapping calendar event items (like toast ui calendar for example)

I have these items already successfully placed vertically with position: absolute and a calculated top value–
my library of choice for all things time related (dayjs) also comes with functionality to check if one item overlaps with another one, nice.
Each item has a startedAt and endedAt property holding ISO datetime strings, i.e. 2022-03-31T17:34Z – using dayjs I can convert them to anything the overlap detection needs.
In the screenshot you can see some examples of overlaps we would like to see in the final result. After some research the TUI calendar solves the issue pretty much just like we want it.
For a lot of reasons we can't use tui-calendar as a whole and extracting the logic to place the items (basically get width and left for each overlapping item) is way beyond my skills (although I think I've found the functions that are responsible for this)
So far I've failed miserably to solve this myself; both using recursion and loops :X
Questions:
– Is there an easier way?
– Is there a dedicated library to solve this?
– Any ideas how to kickstart a solution myself?
Kinda desperate here :D
Thanks!

Scrollable list with resizable items

I need to put together a prototype of a scrollable list with items that can be vertically resized. For example, a list of charts. I wish I could post any code but dont even know where to start from. Tried googling but nothing came up.
Any idea what a good starting point might be?
Thanks
Personally I would start with creating a list of elements in a vertical fashion. That should be pretty straight forward.
Second I'd reuse a library which may already have a resizable component that you can use. This should allow you to learn about resizable elements.
http://jqueryui.com/resizable/
Finally, put them together and see where your bugs are!

Different layout display on website over multiple loads

I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).

css scroll/touch slide view - how to use -ms-scroll-snap or the like?

I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024

Prevent Chrome from setting scrollbar position to last on history state change

I used https://github.com/browserstate/history.js in a recent project to manage state changes in an ajax rich website.
Chrome exhibits a very annoying behaviour at times where it decides to reposition the scrollbar to some arbitrary position after a state change event. I have not experienced this problem with any other browser.
Does anyone have any suggestions? I would post code, but am not sure which parts will be relevant and I am hoping there is an obvious solution to this problem.
There are some obvious workarounds. Scroll to the top if that's what you want, or add a field to data object to store scroll position and restore it yourself. If it's a Chrome bug, work around it; if it's a feature you don't like, work around it; and if it's something you just have to implement yourself with three lines of code, work around it.