I'm not looking for the height of every row in my month view in FullCalendar to be the exact same height; I just want to be able to see the full content of every cell in the calendar.
contentHeight: 'auto'
doesn't appear to solve anything in this view, and adjusting the contentHeight to a specific integer adjusts all rows evenly, which makes the calendar unnecessarily huge if it's just one particular cell, and thus row, that needs to be bigger to display all events.
Additionally, it appears that I'd have to figure out how big to set contentHeight in a fairly complicated manner, as 'auto' doesn't appear to make adjustments for additional events on one particular date.
It's easy to reproduce by adding around 10 events to one date, and setting contentHeight to 'auto'.
Is there any way to make this work?
I'm not really sure how you expected contentHeight to help you in this case, since the documentation makes clear that this affects the whole calendar area, not just individual rows.
You haven't made it entirely clear, but it sounds like you're trying to deal with a scenario where you have a lot of events on one particular day, and would like the calendar to expand the height of that row so they are all visible.
As far as I can observe, the calendar will do this for you by default. See this demo: http://jsfiddle.net/7nsbjya5/1/ . There are 9 events all on one day, and no events elsewhere in the month. The row on which the events occur is automatically expanded to accommodate them.
The only way I can see where this would not happen is if you had set the eventLimit value to something other than its default.
e.g. if you set
eventLimit: 3
then the calendar will never display more than 3 events in any cell, and will replace the others with a link where they are then displayed in a popover when clicked.
Whereas, if, as per my demo, if you either do not set eventLimit, or set it to
eventLimit: false
(which is the default anyway) then you should have no problem. You also should not have any need to set any value for contentHeight, unless you wish to use it for its stated purpose instead. Either way it has no effect on the height of individual rows.
N.B. If that isn't your problem, then you'll need to update your question with enough relevant code for us to be able to diagnose the exact issue. A screenshot of your problem might also be helpful.
Related
my project is a scrollable scheduler, similar to vis-timeline and using Vue.js.
One of my biggest problems is how to scroll infinitely and smoothly in every direction (past and future).
I'll readily admit that I'm not that experienced as a programmer yet, so I'd appreciate it if you'd check and evaluate my approach.
My solution currently looks like this:
JS:
let datelist = [yesterday, today, tomorrow]
HTML:
<div v-for="date of datelist">
<div width="100%" height="100%">{{date}}</div>
</div>
Because 3 divs take up 300% of the screen, an overflow occurs (scroll bar visible). After rendering, I centre the middle one (today).
While scrolling via drag&drop and 50% of the previous or following day is visible, an event is triggered that modifies the datelist:
Scrolling to the left:
*Generate previous day of yesterday and remove tomorrow *
datelist = [yesterday -1 day, yesterday, today]
Scrolling to the right:
*Generate following day of tomorrow and remove yesterday *
datelist = [today, tomorrow, tomorrow + 1]
However, this also has a few disadvantages:
Every time the list changes, it has to be completely re-rendered. If each day gets a lot of content later (appointments), this could cost performance.
You can actually only scroll linearly, as soon as I want to jump to a date, for example with a date picker, I have to recreate the whole list.
Maybe more ?
How would you solve the problem?
I am more concerned with the way to solve the problem than with a solution.
Constraints:
No third-party libs
high performance
easy
Using IntersectionObserver is your go-to here. Thanks to it, you will be able to set various behavior, fetch content and allow for interactivity regarding the other "date cells".
The useIntersectionObserver composable is a good candidate for such a purpose.
Only displaying what is currently visible can also be helpful, so that you don't have too much content in the DOM. This may help but can also be done yourself (check the source code there).
I'm not sure why your list needs to be re-rendered but maybe consider not nuking the whole thing and applying some modifications at the given locations.
Or use a memoization approach, depending on what you need to memorize it may be quite quick to implement yourself.
With the given approaches listed above, you may not even need to remove dates from your list, just hide (CSS) or let it off the screen. Aka rather than having let datelist = [yesterday, today, tomorrow], consider having let datelist = [..., x , y, today, z, a, b, ...] each time you reach a boundary.
TLDR: for your constraints, you can pick only 2 from the 3.
So, I am working on a feature where I need to build a table which has some fixed and some dynamic columns. As the question indicates, I am using the Ant design table component.
In short, I have a column for the actions, within this column, I am conditionally populating its cells with either 2 or 3 buttons, each triggering a process.
Now, these buttons, by default only show the icon, however, when hovering over one of them they expand and thus take more space. My objective is to find a solution where the column`s width adjusts itself (i.e. expands to the right) such that all the content fits in on the same line. Furthermore, it is a requirement that the space of the column from both left and right should be kept to a minimum as much as possible, hence, the width adjustment.
Attempts:
use the className property and attempt to use min/max-width, width with all the properties and combinations - If we use the "auto" than, unfortunately, the width will be handled by ant design
use the width property on the column object
Here are some additional imgs the first one (1) represents the column object while the second one (2) represents the table with its properties
(1)
(2)
If there is anything else you think I could provide to further clarify this issue, please let me know, also, thank you in advance for taking the time solving this issue 👩💻👩💻
Fullcalendar v4 - when I select a time range in timeGridWeek, the calendar changes appearance. The grid is visible, but the time bar and header disappear, leaving the only feedback as the small time display within the shaded selection range. Everything returns after I release the mouse/touch. Using jQuery 3.5.1 for some Bootstrap v4 elements.
Has anybody encountered this before?
Well, who have believed it? User error! In my css overrides I had given class 'fc-unselectable' a colo(u)r of '#fff' and this was causing not only the headers and time bar, but also any text not within a calendar event to 'disappear'. Naturally I would have tested the effects of this override at the time, so assume that some other change since then had brought about the unwanted behaviour. Now I am wracking my brain to find out why I felt that the white font was necessary in the first place. Must add more detailed comments to my code in future...
I'm trying to find a way to collapse events that have the same titles, and have overlapping start and end times. This is using FullCalendar js (FullCalendar.io).
This is so that when a person loads the calendar, the duplicate events are collapsed together but with a caret (triangle) that shows the events can be expanded out.
Looking at the docs for FullCalendar, I haven't found any methods to do this directly. I have found a similar question on StackOverflow that shows a calendar merging events when they are within 30 minutes of each other, but wasn't able to adapt that code to get what I wanted (Fullcalendar: How to merge two events that are next to each other?). That also puts the two events into the same event, which isn't exactly what I want to do.
I've tried modifying the code in the other question, and also looking to see if I could perhaps take the elements and add classes to them with jQuery to get the similar events, but the problem is that the events are on different rows, and don't seem to be predictable where the next one would be.
I've also considered trying to do something like add a <details><summary>Duplicate Event Titles</summary></details> tag around the duplicates, which will collapse them and show them with a caret, but they are on different rows and I am not sure that will work because the html would need to wrap around unrelated rows and also collapse those.
Unmerged:
Unmerged Events with the same title
Test case showing duplicate events (https://codepen.io/anon/pen/QYQOwy)
I'm using Adobe LiveCycle Designer to create dynamic forms which are automatically filled from an XML document. Unfortunately, I'm not very familiar with LiveCycle so I ran into a problem I cannot solve. Let me give you a simplified version of what I want to do and what I have tried so far.
I have a table with two columns, "Song" and "Lyrics". Each row of the table contains two textfields, one for the song and one for the lyrics, which are automatically populated automatically from an XML document. Unfortunately, some entries in the "Lyrics" column are too big so they expand beyond the page. In order to solve that, I wrapped each textField in a Flowed subform, and for each of them I checked the "Allow page breaks within context" option.
The problem with this approach is that the two textfields are no longer growing together. So, although I'm getting a big Lyrics which is spanning in several pages, the Song textField doesn't grow along with the Lyrics.
I was trying to find a solution for that and I realized that the only way might be to dynamically change (using Javascript) the height of the Song textfield to match the one in the Lyrics. But since the lyrics textField is set to "Expand to fit" I cannot take the height value, it always returns "0in" even though it's not.
Do you guys have any solution for getting the height of a field that is set to "Expand to fit", or maybe a better way to make the textFields grow together?
Thank you in advance for all your help
You have to use the following script in a layout ready event:
var heightField = xfa.layout.h(xfa.resolveNode(fieldName), "pt"));
Remember that you can access this property only in the layout ready event, when the form is rendered and so the height is effectively calculated.
In my opinion the best way to achieve your result is to put the two field in the same subform (autofit in height checkboxed) and then put the height of the two fields to the same value of the height of their parent. So, you can simply write something like that:
var heightField = xfa.layout.h(this.parent, "pt"));
this.h = heightField + "pt";