I'm using the Resource Timeline view more or less as shown here: https://fullcalendar.io/docs/timeline-custom-view-demo, but I'd like to show a separation between days because otherwise it's really difficult to tell where one day ends and another begins.
Something like this (though behind the events obviously):
The question was already asked ages ago here: FullCalendar dividing lines between days, but the answers don't work with Fullcalendar 4.
Here's a partial solution: As #ADyson suggested, it's possible to target the table cells using the data-date attribute. Unfortunately this is a bit fragile. At the moment, our calendar shows visible hours from 8am to 6pm, so I have to target td cells which have a data attribute of "08:00:00" as follows:
td[data-date$="08:00:00"] {
border-left: 1px solid red;
}
And this highlights the cells as below (though you can see that the red line is in fact below the horizontal grid lines
However, this doesn't affect the header cells. I can add another rule:
th[data-date$="08:00:00"] {
border-left: 1px solid yellow;
}
But when the border width is only 1px, it doesn't show up, even if I add important. If I make it 2px wide, then it works. So here are the final CSS rules:
th[data-date$="08:00:00"] {
border-left: 2px solid red;
}
td[data-date$="08:00:00"] {
border-left: 2px solid red;
}
And here's what it looks like:
I managed to get this going using a similar method to above on version 3 of FullCalendar, by using the eventAfterAllRender method as my start and end hours can differ
$(".fc-timeline .fc-head .fc-time-area tr:first-child th").attr("style", "border-left-color: #C0C1C1 !important; border-right-color: #C0C1C1 !important")
$(".fc-timeline .fc-head .fc-time-area tr:nth-child(2) th[data-date$='" + startString + "']").attr("style", "border-left-color: #C0C1C1 !important")
$(".fc-timeline .fc-head .fc-time-area tr:nth-child(2) th[data-date$='" + finishString + "']").attr("style", "border-right-color: #C0C1C1 !important")
$(".fc-timeline .fc-body .fc-time-area .fc-bg .fc-slats td[data-date$='" + startString + "']").attr("style", "border-left-color: #C0C1C1 !important")
Where the start/finishStrings look like "08:00:00" for example
Related
JS-Fiddle example
<time datetime="2020-1-1"> </time>
with css:
time:empty:after{content:attr(datetime)}
shows:
2020-1-1
but can i reformat it somehow, to get something like:
01/01/19
without using Javascript, but only CSS?
I'm sure this has been already asked an been answered somewhere, but I just can't find it.
If you can parse the date in HTML then you can pick up each number and build the string however you'd like. I'm not sure if this would be a reasonable approach for you but I figured I'd post just in case.
time {
border: 1px solid black;
}
time:empty {
border: 1px solid red;
}
time:empty::after {
content: attr(data-month)"/"attr(data-day)"/"attr(data-year);
}
<time datetime="2020-01-01" data-year="20" data-month="01" data-day="01"></time>
All I want to do is select multiple elements and with a certain class so that I don't have redundancy in my CSS file
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36 .fieldStateError {
border: 1px solid #d6dbdc!important;
}
But the last element does not get the stlye while the others do. And I am not certain why that is happening.
Thank you in advance!
Spaces in a selector cause looking for child elements. You can select an element with multiple conditions by simply putting all selectors right behind each other:
#resp36.fieldStateError,
#physicalResp36.fieldStateError,
#nonResp36.fieldStateError,
#physicalNonResp36.fieldStateError {
border: 1px solid #d6dbdc !important;
}
Note that this is pretty much one of the most redundant things you could do in CSS, as classes are meant to unify such declarations into a single selector. Unless you were slinging the .fieldStateError class around, this should have the same effect as the code above:
.fieldStateError {
border: 1px solid #d6dbdc !important;
}
If all your elements have that class, you only need to use the class selector.
If you wanted to select the last id that also has that class, remove the space between class and id, because you are asking for a son of that id with that class.
you do not have a comma before ".fieldStateError".
Example:
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36, .fieldStateError {
border: 1px solid #d6dbdc!important;
}
or remove the gap (<div id="#physicalNonResp36" class="fieldStateError">)
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36.fieldStateError {
border: 1px solid #d6dbdc!important;
}
Is there any way, of having a if like syntax, where I can check (for an example) there are more than input[type="text"]
Something like:
.my-element >= 1 {
border: 1px solid red; // Each .my-element will have a red border
}
.my-lement == 1 {
border: 1px solid green; // The only .my-element will have a green border
}
In javascript I would do something like:
if ($('input[type="text"]').length >= 1)
I mentioned LESS in the title, because I'm writing my css code in a LESS syntax
You can, in some cases, approximate this (albeit it requires an up-to-date browser, compliant with CSS3):
input {
border-color: #f00;
}
input:only-of-type {
border-color: #0f0;
}
JS Fiddle demo.
The above works on the assumption that you're trying to style an input element which is the only input element (or 'element of that type') as a child of its parent (it has no siblings of the same input element-type).
If, however, you're trying to style an element differently according to whether it has any sibling elements, you can use:
input {
border-color: #f00;
}
input:only-child {
border-color: #0f0;
}
JS Fiddle demo.
References:
:only-of-type (Mozilla Developer Network).
:only-of-type (W3C.org).
NO, in CSS there is no if else . Use JavaScript for changing your css dynamically.
the if statement is not present in LESS as well. But this language supports guard expression which may help in mimicking some if statements.
Check this tutorial
I can't find any way to put a line between items in my list. Am I missing something?
A style sheet would be easiest, for example:
myListWidget->setStyleSheet( "QListWidget::item { border-bottom: 1px solid black; }" );
You'll want to look at some of the style sheet documentation
2 improvements to the accepted answer:
Use the color palette of the widget to achieve a uniform look across different systems.
It is necessary to restore the item:selected style when restyling item
E.g. like this:
const auto & palette = tableWidget.palette();
tableWidget.setStyleSheet(QString("QListWidget::item { border-bottom: 1px solid %1; } QListWidget::item:selected { background-color: %2; color: %3; }")
.arg(palette.midlight().color().name(),
palette.highlight().color().name(),
palette.highlightedText().color().name()));
Here you can see that the separator lines and selection color fit the default style of the widget:
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.