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
Previous Month (February 2025) March 2025 Next Month (April 2025)
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    border: 1px 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    background: url(../../../../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    border: 1px 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    background: url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; 
330    background-color:#ccc; 
331    margin: auto .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-height: 2;  /* ~24px */ 
339    *line-height: 1.7; /* For IE */ 
340    min-height: 2em; /* For Gecko */ 
341    *min-height: auto; /* 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    background: url(../../../../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    display: block; 
111    *display: inline-block; /* IE */ 
112    *overflow: visible; /* Remove superfluous padding for IE */ 
113    border: none; 
114    background-color: transparent; 
115    cursor: pointer; 
116} 
117 
118/* Specific changes for calendar running under fonts/reset */ 
119.yui-calendar .calbody a:hover {background:inherit;} 
120p#clear {clear:left; padding-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.

More Calendar Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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