Yearly Holiday List Calendar Developed using jQuery, AJAX, XML and CSS3

PHP jQuery Cookbook

Over 60 simple but highly effective recipes to create interactive web applications using PHP with jQuery

• Create rich and interactive web applications with PHP and jQuery
• Debug and execute jQuery code on a live site
• Design interactive forms and menus
• Another title in the Packt Cookbook range, which will help you get to grips with PHP as well as jQuery

About Holiday List Calendar

This widget will help you in knowing the list of holidays in various countries. Here in this example, I have listed holidays pertaining to only two counties, namely India and US. You can make use of this widget on your websites or blogs to tell your readers about holidays and their importance if necessary.

Adding jQuery to your page

Download the latest version of jQuery from the jQuery site. This site can be added as a reference to your web pages accordingly. You can reference a local copy of jQuery after downloading <script> tag in the page. You can also directly reference the remote copy from jQuery or Google Ajax API.

Pre-requisite Knowledge

In order to understand the code, one should have some knowledge of AJAX concepts and XML Structure, basic knowledge of HTML, advance knowledge of CSS3 and lastly and mostly important one should know advance level of jQuery coding.

Ingredients Used

• jQuery [Advance Level]
• CSS3
• HTML
• XML
• Photoshop [Used for coming up with UI Design]

HTML Code

<div id="calendar-container">

<div class="nav-container">

<span>Year<br/><select id="selectYear"></select></span> <span class="last">Month<br /><a
href="#" id="prevBtn" class="button gray"><</a> <select id="selectMonth"></select> <a
href="#" id="nextBtn" class="button gray">></a></span>

</div>

<div class="data-container"></div>

</div>

XML Structure

<?xml version="1.0" encoding="ISO-8859-1"?>

<calendar>

<year whichyear="2010" id="1">

<month name="January" id="1">

<country name="India">

<holidayList date="Jan 01st" day="Friday"><![CDATA[Sample
Data]]></holidayList>

<holidayList date="Jan 14th" day="Friday"><![CDATA[Sample
Data]]></holidayList>

<holidayList date="Jan 26th" day="Wednesday"><![CDATA[Sample
Data]]></holidayList>

</country>

<country name="US">

<holidayList date="Jan 01st" day="Saturday"><![CDATA[Sample
Data]]></holidayList>

<holidayList date="Jan 17th" day="Monday"><![CDATA[Sample
Data]]></holidayList>

</country>

</month>

<month name="January" id="1">

---------------------
---------------------

---------------------

</month>

</year>

</calendar>

CSS Code

body{
 margin: 0;
 padding: 0;
 font-family: "Lucida Grande", "Lucida Sans", sans-serif;
 font-size: 100%;
 background: #333333;
 }

#calendar-container{
width:370px;
padding:5px;
border:1px solid #bcbcbc;
margin:0 auto;
background-color:#cccccc;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.nav-container{
padding:5px;
}

.nav-container span{display:inline-block; text-align::left; padding-right:15px; border-right:1px solid
#828282; margin-right:12px; text-shadow: 1px 1px 1px #ffffff; font-weight:bold;}
.nav-container span.last{padding-right:0px; border-right:none; margin-right:0px;}

.data-container{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#selectMonth{width:120px;}

.data-container ul{margin:0px; padding:0px;}
.data-container ul li{ list-style:none; padding:5px;}
.data-container ul li.list-header{border-bottom:1px solid #bebebe; border-right:1px solid #bebebe;
background-color:#eae9e9; -webkit-border-radius: .2em .2em 0 0; -moz-border-radius: .2em .2em 0 0;
border-radius: .3em .3em 0 0; background:-moz-linear-gradient(center top , #eae9e9, #d0d0d0) repeat
scroll 0 0 transparent; margin-top:5px; text-shadow: 1px 1px 1px #ffffff;}
.data-container ul li.padding-left-10px {background-color:#EEEEEE; border-bottom:1px solid #BEBEBE;
border-right:1px solid #BEBEBE; font-size:12px;}

/* button
---------------------------------------------- */
.button {
font-size: 25px;
font-weight: 700;
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: bottom;
margin: 0 2px;
outline: none;

cursor: pointer;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #555555;
padding: 0px 10px 3px 10px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

select{
-webkit-border-radius: .2em .2em .2em .2em;
-moz-border-radius: .2em .2em .2em .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
padding:5px;
font-size:16px;
border:1px solid #4b4b4b;
}

/* color styles
---------------------------------------------- */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
endColorstr='#575757');
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
endColorstr='#4b4b4b');
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888');
}

.grayDis{
color: #999999;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888');
}

h2{ color:#ffffff; text-align:center; margin:10px 0px;}

#header{
text-align:center;
font-size: 1em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
padding:1px;
margin:10px 0px 80px 0px;
background-color:#575757;
}

.ad{

width: 728px;
height: 90px;
margin: 50px auto 10px;
}

#footer{
width: 340px;
margin: 0 auto;
}

#footer p{
color: #ffffff;
font-size: .70em;
margin: 0;
}

#footer a{ color: #15ADD1; }