Since my calendar application is integrated into many different existing web sites, I had a need to support a calendar look that is very plain and goes with many other colors. The ExtJS framework already supports a gray skin but the Ext Calendar does not so far. Therefore, I created a small extension to Ext Calendar that adds support for the gray skin.
Here a screen shot of the sample application at http://ext.ensible.com/deploy/dev/examp ... t-app.html with a gray skinning:
Maybe some of you find this useful as well. Note, that this is for Extensible 1.5.0 only! The skinning is achived with an additional small style sheet that overwrites some of the existing styling, plus three images. These are attached below.
a) gray-skin.css and gray-skin-min.css
Save these files to directory resources/css/ inside your copy of the Extensible distribution.
b) page-next.gif, page-prev.gif, toolbar-bg.gif
Save these images to a directory resources/images/gray-theme/ inside your copy of the Extensible distribution.
To enable the gray skin you need to do the following:
1) Enable the gray skin for the ExtJS framework: In your application's html file, replace
<link rel="stylesheet" type="text/css" href="<EXTJS Root Dir>/resources/css/ext-all.css" />
by
<link rel="stylesheet" type="text/css" href="<EXTJS Root Dir>/resources/css/ext-all-gray.css" />
2) Load the style sheet for the gray skin: In your application's html file, add the following to the head section:
<link rel="stylesheet" type="text/css" href="<Extensible Root Dir>/resources/css/gray-skin.css" />
This link tag must be inserted after the link tag that loads the extensible-all.css style sheet.
I hope some of you find it useful.
Gabe
