YUI Library Home

YUI Library Examples: Calendar Control: Skinning The Calendar

Calendar Control: Skinning The Calendar

The Calendar and CalendarGroup controls are provided with an implementation of the default YUI skin called "Sam Skin". This example highlights the CSS you'll need to modify to customize Calendar's default "Sam Skin" implementation to develop a custom look and feel.

My Calendar
Su Mo Tu We Th Fr Sa
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
Close

Customizing Calendar's Skin

YUI controls that support "skinning" generally have two levels of CSS: one that is core to the control and its functioning and another that is purely presentational.

Both the Skin and Core CSS for Calendar/CalendarGroup is show below. To modify the presentation of your Calendar instance, add rules that override those you see here or use this CSS block as a starting point for creating your own custom skin.

As a rule, you should avoid changes that affect the core CSS for a skinned control; rather, you should modify the presentation of a control by building upon (or replacing) its skin-level CSS. For more information about the skinning of YUI controls, please review our skinning reference article which goes into much more detail about how skins are created and how they operate.

Skin CSS

1/**
2 * SAM
3 *
4 * Skin colors used:
5 *
6 * - Control Border : 808080
7 * - Control Chrome : f2f2f2
8 * - Cell Borders : cccccc
9 * - Normal Cell BG : ffffff
10 * - Date Links : 0066cc
11 * - Selected Cells BG : b3d4ff
12 * - Cell Hover BG : 426fd9
13 * - Disabled BG : cccccc
14 * - Disabled Text Color : a6a6a6
15 **/ 
16 
17/* CALENDAR BOUNDING BOX */ 
18.yui-skin-sam .yui-calcontainer { 
19    background-color:#f2f2f2
20    border:1px solid #808080
21    padding:10px
22} 
23 
24/* CALENDARGROUP BOUNDING BOX */ 
25.yui-skin-sam .yui-calcontainer.multi { 
26    padding:0 5px 0 5px
27} 
28 
29/* BOUNDING BOX FOR EACH CALENDAR GROUP PAGE */ 
30.yui-skin-sam .yui-calcontainer.multi .groupcal { 
31    background-color:transparent
32    border:none
33    padding:10px 5px 10px 5px
34    margin:0
35} 
36 
37/* TITLE BAR */ 
38.yui-skin-sam .yui-calcontainer .title { 
39    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0
40    border-bottom:1px solid #cccccc; 
41    font:100% sans-serif; 
42    color:#000
43    font-weight:bold
44    height:auto
45    padding:.4em
46    margin:0 -10px 10px -10px
47    top:0
48    left:0
49    text-align:left
50} 
51
52.yui-skin-sam .yui-calcontainer.multi .title { 
53    margin:0 -5px 0 -5px
54} 
55
56.yui-skin-sam .yui-calcontainer.withtitle { 
57    padding-top:0
58} 
59 
60/* CLOSE BUTTON */ 
61.yui-skin-sam .yui-calcontainer .calclose { 
62    background:url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -300px
63    width:25px
64    height:15px
65    top:.4em
66    right:.4em
67    cursor:pointer
68} 
69 
70/* CALENDAR TABLE */ 
71.yui-skin-sam .yui-calendar { 
72    border-spacing:0
73    border-collapse:collapse
74    font:100% sans-serif; 
75    text-align:center
76    margin:0
77} 
78 
79/* NAVBAR BOUNDING BOX */ 
80.yui-skin-sam .yui-calendar .calhead { 
81    background:transparent
82    border:none
83    vertical-align:middle
84    padding:0
85} 
86 
87/* NAVBAR TEXT CONTAINER */ 
88.yui-skin-sam .yui-calendar .calheader { 
89    background:transparent
90    font-weight:bold
91    padding:0 0 .6em 0
92    text-align:center
93} 
94
95.yui-skin-sam .yui-calendar .calheader img { 
96    border:none
97} 
98 
99/* NAVBAR LEFT ARROW */ 
100.yui-skin-sam .yui-calendar .calnavleft { 
101    background:url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -450px
102    width:25px
103    height:15px
104    top:0
105    bottom:0
106    left:-10px
107    margin-left:.4em
108    cursor:pointer
109} 
110 
111/* NAVBAR RIGHT ARROW */ 
112.yui-skin-sam .yui-calendar .calnavright { 
113    background:url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -500px
114    width:25px
115    height:15px
116    top:0
117    bottom:0
118    right:-10px
119    margin-right:.4em
120    cursor:pointer
121} 
122 
123/* WEEKDAY HEADER ROW */ 
124.yui-skin-sam .yui-calendar .calweekdayrow { 
125    height:2em
126} 
127
128.yui-skin-sam .yui-calendar .calweekdayrow th { 
129    padding:0
130    border:none
131} 
132 
133/* WEEKDAY (Su, Mo, Tu...) HEADER CELLS */ 
134.yui-skin-sam .yui-calendar .calweekdaycell { 
135    color:#000
136    font-weight:bold
137    text-align:center
138    width:2em
139} 
140 
141/* CALENDAR FOOTER. NOT IMPLEMENTED BY DEFAULT */ 
142.yui-skin-sam .yui-calendar .calfoot { 
143    background-color:#f2f2f2
144} 
145 
146/* WEEK NUMBERS (ROW HEADERS/FOOTERS) */ 
147.yui-skin-sam .yui-calendar .calrowhead, .yui-skin-sam .yui-calendar .calrowfoot { 
148    color:#a6a6a6
149    font-size:85%
150    font-style:normal
151    font-weight:normal
152    border:none
153} 
154
155.yui-skin-sam .yui-calendar .calrowhead { 
156    text-align:right
157    padding:0 2px 0 0
158} 
159
160.yui-skin-sam .yui-calendar .calrowfoot { 
161    text-align:left
162    padding:0 0 0 2px
163} 
164 
165/* NORMAL CELLS */ 
166.yui-skin-sam .yui-calendar td.calcell { 
167    border:1px solid #cccccc; 
168    background:#fff; 
169    padding:1px
170    height:1.6em
171    line-height:1.6em/* set line height equal to cell height to center vertically */ 
172    text-align:center
173    white-space:nowrap
174} 
175 
176/* LINK INSIDE NORMAL CELLS */ 
177.yui-skin-sam .yui-calendar td.calcell a { 
178    color:#0066cc; 
179    display:block
180    height:100%
181    text-decoration:none
182} 
183 
184/* TODAY'S DATE */ 
185.yui-skin-sam .yui-calendar td.calcell.today { 
186    background-color:#000
187} 
188
189.yui-skin-sam .yui-calendar td.calcell.today a { 
190    background-color:#fff; 
191} 
192 
193/* OOM DATES */ 
194.yui-skin-sam .yui-calendar td.calcell.oom { 
195    background-color:#cccccc; 
196    color:#a6a6a6
197    cursor:default
198} 
199 
200/* SELECTED DATE */ 
201.yui-skin-sam .yui-calendar td.calcell.selected { 
202    background-color:#fff; 
203    color:#000
204} 
205
206.yui-skin-sam .yui-calendar td.calcell.selected a { 
207    background-color:#b3d4ff; 
208    color:#000
209} 
210 
211/* HOVER DATE */ 
212.yui-skin-sam .yui-calendar td.calcell.calcellhover { 
213    background-color:#426fd9
214    color:#fff; 
215    cursor:pointer
216} 
217
218.yui-skin-sam .yui-calendar td.calcell.calcellhover a { 
219    background-color:#426fd9
220    color:#fff; 
221} 
222 
223/* DEFAULT OOB DATES */ 
224.yui-skin-sam .yui-calendar td.calcell.previous { 
225    color:#e0e0e0
226} 
227 
228/* CUSTOM RENDERERS */ 
229.yui-skin-sam .yui-calendar td.calcell.restricted { text-decoration:line-through} 
230.yui-skin-sam .yui-calendar td.calcell.highlight1 { background-color:#ccff99} 
231.yui-skin-sam .yui-calendar td.calcell.highlight2 { background-color:#99ccff; } 
232.yui-skin-sam .yui-calendar td.calcell.highlight3 { background-color:#ffcccc; } 
233.yui-skin-sam .yui-calendar td.calcell.highlight4 { background-color:#ccff99} 
234 
235/* CalendarNavigator */ 
236 
237/* MONTH/YEAR LABEL */ 
238.yui-skin-sam .yui-calendar a.calnav {  
239    border1px solid #f2f2f2
240    padding:0 4px
241    text-decoration:none
242    color:#000
243    zoom:1
244} 
245
246.yui-skin-sam .yui-calendar a.calnav:hover {  
247    backgroundurl(../../../../assets/skins/sam/sprite.png) repeat-x 0 0
248    border-color:#A0A0A0
249    cursor:pointer
250} 
251 
252/* NAVIGATOR MASK */ 
253.yui-skin-sam .yui-calcontainer .yui-cal-nav-mask { 
254    background-color:#000
255    opacity:0.25
256    *filter:alpha(opacity=25); /* IE */ 
257} 
258 
259/* NAVIGATOR BOUNDING BOX */ 
260.yui-skin-sam .yui-calcontainer .yui-cal-nav { 
261    font-family:arial,helvetica,clean,sans-serif; 
262    font-size:93%
263    border:1px solid #808080
264    left:50%
265    margin-left:-7em
266    width:14em
267    padding:0
268    top:2.5em
269    background-color:#f2f2f2
270} 
271
272.yui-skin-sam .yui-calcontainer.withtitle .yui-cal-nav { 
273    top:4.5em
274} 
275 
276/* NAVIGATOR BOUNDING BOX */ 
277.yui-skin-sam .yui-calcontainer.multi .yui-cal-nav { 
278    width:16em
279    margin-left:-8em
280} 
281 
282/* NAVIGATOR YEAR/MONTH/BUTTON/ERROR BOUNDING BLOCKS */ 
283.yui-skin-sam .yui-calcontainer .yui-cal-nav-y, 
284.yui-skin-sam .yui-calcontainer .yui-cal-nav-m, 
285.yui-skin-sam .yui-calcontainer .yui-cal-nav-b { 
286    padding:5px 10px 5px 10px
287} 
288
289.yui-skin-sam .yui-calcontainer .yui-cal-nav-b { 
290    text-align:center
291} 
292
293.yui-skin-sam .yui-calcontainer .yui-cal-nav-e { 
294    margin-top:5px
295    padding:5px
296    background-color:#EDF5FF; 
297    border-top:1px solid black
298    display:none
299} 
300 
301/* NAVIGATOR LABELS */ 
302.yui-skin-sam .yui-calcontainer .yui-cal-nav label { 
303    display:block
304    font-weight:bold
305} 
306 
307/* NAVIGATOR MONTH CONTROL */ 
308.yui-skin-sam .yui-calcontainer .yui-cal-nav-mc { 
309    width:100%
310    _width:auto/* IE6, IE7 Quirks don't handle 100% well */ 
311} 
312 
313/* NAVIGATOR MONTH CONTROL, VALIDATION ERROR */ 
314.yui-skin-sam .yui-calcontainer .yui-cal-nav-y input.yui-invalid { 
315    background-color:#FFEE69
316    border1px solid #000
317} 
318 
319/* NAVIGATOR YEAR CONTROL */ 
320.yui-skin-sam .yui-calcontainer .yui-cal-nav-yc { 
321    width:4em
322} 
323 
324/* NAVIGATOR BUTTONS */ 
325 
326/* BUTTON WRAPPER */ 
327.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn { 
328    border:1px solid #808080
329    backgroundurl(../../../../assets/skins/sam/sprite.png) repeat-x 0 0
330    background-color:#ccc; 
331    marginauto .15em
332} 
333 
334/* BUTTON (based on button-skin.css) */ 
335.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn button { 
336    padding:0 8px
337    font-size:93%
338    line-height2;  /* ~24px */ 
339    *line-height1.7/* For IE */ 
340    min-height2em/* For Gecko */ 
341    *min-heightauto/* For IE */ 
342    color: #000
343} 
344 
345/* DEFAULT BUTTONS */ 
346/* NOTE: IE6 will only pickup the yui-default specifier from the multiple class specifier */ 
347.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn.yui-default { 
348    border:1px solid #304369
349    background-color: #426fd9
350    backgroundurl(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1400px
351} 
352
353.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn.yui-default button { 
354    color:#fff; 
355} 
view plain | print | ?

Core CSS

1/**
2 * CORE
3 *
4 * This is the set of CSS rules required by Calendar to drive core functionality and structure.
5 * Changes to these rules may result in the Calendar not functioning or rendering correctly.
6 *
7 * They should not be modified for skinning.
8 **/ 
9  
10/* CALENDAR BOUNDING BOX */ 
11.yui-calcontainer { 
12    position:relative
13    float:left
14    _overflow:hidden/* IE6 only, to clip iframe shim */ 
15} 
16 
17/* IFRAME SHIM */ 
18.yui-calcontainer iframe { 
19    position:absolute
20    border:none
21    margin:0;padding:0
22    z-index:0
23    width:100%
24    height:100%
25    left:0px
26    top:0px
27} 
28 
29/* IFRAME SHIM IE6 only */ 
30.yui-calcontainer iframe.fixedsize { 
31    width:50em
32    height:50em
33    top:-1px
34    left:-1px
35} 
36 
37/* BOUNDING BOX FOR EACH CALENDAR GROUP PAGE */ 
38.yui-calcontainer.multi .groupcal { 
39    z-index:1
40    float:left
41    position:relative
42} 
43 
44/* TITLE BAR */ 
45.yui-calcontainer .title { 
46    position:relative
47    z-index:1
48} 
49 
50/* CLOSE ICON CONTAINER */ 
51.yui-calcontainer .close-icon { 
52    position:absolute
53    z-index:1
54} 
55 
56/* CALENDAR TABLE */ 
57.yui-calendar { 
58    position:relative
59} 
60 
61/* NAVBAR LEFT ARROW CONTAINER */ 
62.yui-calendar .calnavleft { 
63    position:absolute
64    z-index:1
65} 
66 
67/* NAVBAR RIGHT ARROW CONTAINER */ 
68.yui-calendar .calnavright { 
69    position:absolute
70    z-index:1
71} 
72 
73/* NAVBAR TEXT CONTAINER */ 
74.yui-calendar .calheader { 
75    position:relative
76    width:100%
77    text-align:center
78} 
79 
80/* CalendarNavigator */ 
81.yui-calcontainer .yui-cal-nav-mask { 
82    position:absolute
83    z-index:2
84    margin:0
85    padding:0
86    width:100%
87    height:100%
88    _width:0;    /* IE6, IE7 quirks - width/height set programmatically to match container */ 
89    _height:0
90    left:0
91    top:0
92    display:none
93} 
94 
95/* NAVIGATOR BOUNDING BOX */ 
96.yui-calcontainer .yui-cal-nav { 
97    position:absolute
98    z-index:3
99    top:0
100    display:none
101} 
102 
103/* NAVIGATOR BUTTONS (based on button-core.css) */ 
104.yui-calcontainer .yui-cal-nav .yui-cal-nav-btn  { 
105    display: -moz-inline-box; /* Gecko */ 
106    display: inline-block/* IE, Opera and Safari */ 
107} 
108
109.yui-calcontainer .yui-cal-nav .yui-cal-nav-btn button { 
110    displayblock
111    *display: inline-block/* IE */ 
112    *overflowvisible/* Remove superfluous padding for IE */ 
113    bordernone
114    background-colortransparent
115    cursorpointer
116} 
117 
118/* Specific changes for calendar running under fonts/reset */ 
119.yui-calendar .calbody a:hover {background:inherit;} 
120p#clear {clear:leftpadding-top:10px;} 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings