JQuery UI DatePicker stylen ?
Die zijn alleen ma , di en woensdag.
Ik hoef dus niet de hele kalender te zien ,
kan ik de andere dagen helemaal laten verdwijnen/onzichtbaar maken ?
b.v.d.
echter dat is niet wat ik bedoel (ik weet natuurlijk dat je dagen kan disablen)
Aangezien ik alleen maar 3 dagen ga gebruiken zou het me mooi uitkomen als ik de andere 4 kolommen uit de agenda geheel er uit kan laten verdwijenen !
Een agenda/kalender met 3 kolommen !
Toevoeging op 25/04/2013 12:43:53:
Het begin is er....
Ha ha , ja heel makkelijk:
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
Echter nu nog de donderdag, en vrijdag zien te krijgen . ....
??
[edit'] zien WEG te krijgen :-)
Toevoeging op 25/04/2013 13:53:52:
met css: nth-child()
Gewijzigd op 25/04/2013 12:45:10 door - Roland -
Open de website met Google chrome webbrowser, laat de kalender verschijnen.
Rechter-muisklik op het vakje dat je wil veranderen => "Inspect Element"
Dan zie je welke id en class dat vakje heeft; zie je welke css zorgt voor wat ...
En dat overschrijf je dan.
bv.
Waarom is de achtergrond grijs?
In dev tools zie je
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
/* jquery-ui.css */
.ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
...
<a class="ui-state-default" href="#">1</a>
.ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
...
<a class="ui-state-default" href="#">1</a>
Dus; nu weet je wat je moet doen om dit te veranderen.
( merk op: om css te overschrijven, moet je nieuwe <style></style> onder de oude staan (meer beneden, in de HTML broncode). De laatste waarde die de pagina ziet, wordt genomen)
Overschrijf dat met
Code (php)
1
2
3
4
2
3
4
.ui-state-default {
color: #ffffff;
background-color: #000000;
}
color: #ffffff;
background-color: #000000;
}
Gewijzigd op 25/04/2013 14:38:35 door Kris Peeters
.ui-datepicker-calendar tr td:nth-child(1) { display: none !important; }
.ui-datepicker-calendar tr th:nth-child(2) { display: none !important; }
.ui-datepicker-calendar tr td:nth-child(2) { display: none !important; }
Ik had dit bedacht om alle maandagen en de dinsdagen uit de agenda te verwijderen . (heb alleen de overige dagen nodig)
Werkt mooi ! een agenda met de 5 overige dagen .... maar alleen niet in IE8 en omdat ik de maten had aangepast voor 5 dagen loopt het dan als een enorme rommel doorelkaar!
Waarom ? IE8 kent nth-child(x) niet .
Daarom ook dit geprobeerd:
$(".ui-datepicker-calendar tr th:nth-child(1)").css("display", "none");
$(".ui-datepicker-calendar tr td:nth-child(1)").css("display", "none");
maar helaas dit doet niets..
Zijn er nog meer mogelijkheden om een paar kolommen van de datapicker te verbergen ?