I am using Fullcalendar with Scheduler and I have set the slotDuration to 15 minutes. But, this causes a solid grid separator on the hour AND half-hour. With a dotted separator on the quarter hour.
In the old version of Fullcalendar, I had the solid separator ONLY on the hour, with dotted separators on the quarter and half hours.
How do I set the code to have dotted on the quarter and half hours with solid on the hour?
Just an idea:
tr[data-time="06:15:00"] > td:not(:first-child)
{
border-top: 1px dotted green;
}
Please check this fiddle:
https://jsfiddle.net/zrLm0kew/
You would have to add css for all the hours (x:15 x:30). Not very elegant. I will try to come up with the better idea.
Related
I am trying to make a header of multistage form containing the page number and description .
What I want to do is divide each step with an arrow mark something like this
1 step > 2tep > 3 step> 4 step
This is mostly a css question I just need to know how to make those boder into arrow sign
Fiddle
Explanation
As you can see in the fiddle I have icons that changes to check mark when you slide to next step . So I am trying to separate these icons with > arrow and then add some css background colors to separate the active,previous, next steps
Looking at your fiddle, does this do what you want?
.divider:before { content: ">"; }
are you searching something like this fiddle (I've done a simple arrow with text)?
.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;}
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;}
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;}
refer this site to generate it
for a single arrow refer this demo
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
<div class="arrow-right"></div>
I am using the jquery fullcalendar and it's working great however in the agendaweek view there are no dividing lines between the days.
I have reviewed the fullcalendar site and even tried to find what css handled displaying the dividing lines with no luck.
How do I get the day dividing lines to show?
Thanks
I had the same issue in angular js (bower install), solved it with:
.fc-time-grid .fc-slats td {
background: transparent;
}
to add dividing lines between days
.fc-border-separate td {
border-width: 1px 0 0 1px;
border-color: red;
}
adjust pixels and color
I had the exact same issue using styling from http://jqueryui.com/themeroller/. If using themerolled calendar, try adding opacity to css class fc-agenda-slots td.
.fc-agenda-slots td {
border-width: 1px 0 0;
background: none;
opacity:0.15;
}
This is my solution.
$('.fc-timeGridWeek-button').click(function(){
$(".fc-time").next("td").removeClass('fc-widget-content').addClass('fc-widget-skeleton');
});
in webkit safari and chrome ive found that they render the last px of the css rule border:1px dotted; oddly it kind of combines the last 2 pixels into 1 so you get a black mark at the end of the line ..?
has any one else encountered this / got a work arround for it ? please see attached image bellow
Give it a border-right: 1px solid transparent; style: http://jsfiddle.net/4CktD/
It's weird, but hey, it works.
Needing help for some homework. I hope someone can help me out as I have tried all combinations with not much success. I've been asked to simplify the following:
border-top: 1px solid #8B8BA2;
border-left: 1px solid #8B8BA2;
border-bottom: 1px solid #8B8BA2;
Anyone have any great ideas. I did try the following but it didn't seem to work:
border: 1px solid none solid solid #8B8BA2;
Hope someone out there can help.
Mari
Specifying the border attribute let's you specify all borders at once. Since three out of four are the same, specify the border for all sides, and then remove the border for the one it doesn't apply to:
border: 1px solid #8B8BA2;
border-right: 0;
As an addition to SeanA's answer (+1), - if this is for homework you might be being asked if you actually know the shorthand border order.. so while the above works too, this might be the answer they're after.
border: 1px solid #8B8BA2;
border-width: 1px 0 1px 1px;
the first declares all borders, the second zero's the "right" border, using the four sided notation.. border (and margins and padding) are written Top - Right - Bottom - Left - TRBL and the word used to remember this is "TRouBLe" or you can just think clockwise :)
i used:
border: 1px 1px 1px 1px;
border-style:solid;
but the border line seems to be so thick. i can almost be sure that i have seen thinner border line somewhere. could you make it thinner or did they use images for it?
** Copied from my comment on the question itself **
Actually, I just noticed that you have the border short-hand declaration, which expects several parameters in a precise order. (ie. border: 1px solid black) What you have specified above is invalid. Could that be your problem?
Instead of
border: 1px 1px 1px 1px
try
border-width: 1px
Perhaps a lighter color was used on the border, (silver instead of black) which often gives the illusion of being thinner.
If you mean the borders around the table cells then they will appear thicker because they aren't "collapsable" - you have to write this:
table {
border-collapse: collapse;
}
and it should make the borders on every side of a cell one pixel thick (or thin as you want to call it!) within a table.
You may try consolidating your rules into a single short-hand declaration:
border: 1px solid black;