last day (15 days later) » 

11:36
0
Q: How to hover each cell for each day with react FullCalendar?

CodeLover1 I have a Reactjs FullCalendar and I want when, I hover the cell of the days, the background will be blue also, the time of this cell will be appeared. I try this : .fc-widget-content td:hover { background-color: blue; } But, I get : https://i.sstatic.net/sCKOq.gif But, I want, to hov...

You can't, because the cells are not individual HTML elements. It's an optical illusion caused by two separate HTML tables overlaid on top of each other. If you use your browser's element inspector you can start to see how it's done. So there's no single element for an individual "cell" which you can attach the hover rule onto. It's impossible.
But it's only a little bit of a minor enhancement to your GUI, so it shouldn't be a big deal if you can't do it. It doesn't affect any actual functionality.
@ADyson, but this i.stack.imgur.com/v9FSh.gif is developed with fullcalendar and jquery
Is it? Where did you get that from? Does it have source code?
<td onmouseover="highlightBG(this);" onmouseout="nohighlightBG(this);" style="color: transparent; height: 1.5em; text-align: right; padding-right: 2px; background-color: initial;"><span style="font-weight:900;">8:35</span></td>
function highlightBG(element) { element.style.backgroundColor = '#39b6f0'; element.style.color = 'black'; } function nohighlightBG(element) { element.style.backgroundColor = 'initial'; element.style.color = 'transparent'; }
if you have code to share please use the "edit" button of your question to add it there, then it can be formatted properly. Code in comments is very hard to read, as you can hopefully see yourself.
Anyway, this code is simply generic code to highlight a <td>. You claimed "this is developed with fullCalendar and jQuery". But this code cannot work with fullCalendar to create what you see in that gif, because there is no single <td> which represents an individual cell. So again I ask...how was that gif generated? Is it the result of real HTML/CSS/JS code, or just from someone creating an animation themselves in a graphics program? As far as I know there is no way to reproduce that with code, because of the reasons I've already explained in my first comment.
(Well, actually you could probably create it, but only by modifying the source code of the timegrid view in fullCalendar - fullCalendar knows where the "cells" are because it knows the co-ordinates where they will appear on the screen - so that when you select a slot, it knows what you selected. It does this based on positioning though, not on elements. So you couldn't do it with a simple CSS hover rule, you'd have to get more in-depth. You'd end up making a custom view based on timegrid. It won't be a simple task - probably not worth it for what you gain (as I hinted in my second comment)).
11:36
I use react fullcalendar, and probably it can be created because, fullcalendar have a select mirror whichcan selecting a grid
The fact you're using React is irrelevant, the underlying fullCalendar implementation is identical, the react part is just a connector between React and fullCalendar to make integration easier
Anyway, yes, it probably can be done - if you look at what selectMirror creates, or at the highlight the "select" functionality creates if you don't use the mirror, you'll see it creates an absolutely-positioned div over the relevant part of the grid. Like I said, fullCalendar internally knows the co-ordinates of the "cells". But they just co-ordinates, not HTML elements. And the API doesn't expose them to you. That's why it's possible, but you'd have to fork the fullCalendar source code to do it. And that's quite hard, so probably not worth bothering for this minor UI gain.
Hello @ADyson
can you help me to develop it please ?
No, sorry I can't. Like I said, it's really quite a big job. Far too big for free help on a question on StackOverflow. See fullcalendar.io/docs/custom-view-with-js for more details. I don't have enough free time.
Besides, I have no experience at all with the fullCalendar source code, so I don't really have any better idea of what exactly needs to be done than you do. I've described the mechanism, as can be observed simply by inspecting what fullCalendar outputs from the "select" process, but after that my knowledge ends. All I can suggest is that you start with the existing timeGrid code, and create new view by cloning that and modifying it.
But really my advice to you is "don't bother". Because all you're gaining is a tiny usability improvement. I don't think your users will care that much. And if you create a custom view like this and make it work, then the story doesn't stop there. You give yourself a big maintenance headache, because if any bugs are found in timeGrid, you have to port those changes into your version, in order to stay compatible, and if fullCalendar releases a new version, you have to test your view with that too
And if they make a whole new version 6, then it probably has breaking changes, so you'd have to re-write and re-test then as well, unless you want to be stuck on v5 forever, and never be able to use new features or receive bug fixes. This is why I'm saying, the big effort involved in doing this is totally disproportionate to the tiny value you'll add to your application.
IMO you would be far better to make a feature request to the maintainers of fullCalendar, and ask them to make this idea integrated into the main timeGrid view, with an option to switch it on if people want it. That way you don't have to maintain this code separately, or write the code for it yourself (unless you want to contribute to the project, of course), and I'm sure your users can live without it until it's ready.
See fullcalendar.io/requesting-features for how to request a feature, and fullcalendar.io/contributing for how to contribute code to the main project.
@CodeLover see my comments above. I hope they are useful to explain the situation.
 
1 hour later…
13:19
okay thank you

last day (15 days later) »