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

Build powerful, interactive plugins to implement jQuery in the best way possible

 

PHP jQuery Cookbook

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
        Read more about this book      

(For more resources on jQuery, see here.)

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">&lt;</a>&nbsp;<select id="selectMonth"></select>&nbsp;<a
href="#" id="nextBtn" class="button gray">&gt;</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; }

 

        Read more about this book      

(For more resources on jQuery, see here.)

jQuery Code

<script language="javascript">
$(document).ready(function(){
function runAjax(selYearOptVal, selMonthOptVal){
$.ajax({
type: 'GET',
url: "calendar.xml",
dataType: "xml",
success: function(xml){
// For Year
var optYearValue;
if($('#selectYear option').length == 0){
var select = $('#selectYear');
$(xml).find('year').each(function(){
optYearValue = $(this).attr('whichyear');
if(optYearValue==selYearOptVal){
select.append("<option
value='"+ optYearValue +"' selected=\"selected\">"+optYearValue+"</option>");
}else{
select.append("<option
value='"+ optYearValue +"'>"+optYearValue+"</option>");
}
});
}

// For Month
var optValue, optText;
if($('#selectMonth option').length == 0){
var select = $('#selectMonth');
$(xml).find('month').each(function(){
optValue = $(this).attr('id');
optText = $(this).attr('name');
if(optValue==selMonthOptVal){
select.append("<option
value='"+ optValue +"' selected=\"selected\">"+optText+"</option>");
}else{
select.append("<option
value='"+ optValue +"'>"+optText+"</option>");
}
});
}

if(selMonthOptVal==1){
$('#prevBtn').removeClass().addClass("button grayDis");
$('#nextBtn').removeClass().addClass("button
gray");

}else if(selMonthOptVal==12){
$('#prevBtn').removeClass().addClass("button
gray");
$('#nextBtn').removeClass().addClass("button grayDis");
}else{
$('#prevBtn,
#nextBtn').removeClass().addClass("button gray");
}

$('.data-container').html('');
$('.data-container').append('<ul class="holiday-lists"></ul>');

$(xml).find('year').each(function(){
if($(this).attr('whichyear')==selYearOptVal)
{
//Current Year
var whichYear = $
(this).attr('whichyear');
//children means 'month' tag
$(this).children().each(function(){
if($
(this).attr('id')==selMonthOptVal)
{
$
(this).find('country').each(function(){
$('.holiday-lists').append('<li class="list-

header"><strong>'+$(this).attr('name')+' Holiday List - '+whichYear+'</strong></li>');
if($
(this).find('holidayList').length){
$
(this).find('holidayList').each(function(){

$('.holiday-lists').append('<li class="padding-left-10px"><strong>'+$(this).attr('date')+'['+$
(this).attr('day')+']:</strong> '+$(this).text()+'</li>');
}); //HolidayList Close
}else{
$
('.holiday-lists').append('<li class="padding-left-10px"><strong><img src="smiley_sad.png" border="0"/>
No Holidays This Month!</strong></li>');
}
}); //Country Close
return false; //To Break for..each loop
} //If Condition [close]
}); // month tag [close]
}//If Condition [close]
}); //xml close
}//success [close]
});
}

$('#selectMonth, #selectYear').change(function(){
var selectedYear=$('#selectYear :selected').val();
runAjax(selectedYear, $('#selectMonth').val());
});

$('#prevBtn').click(function(){
var selectedYear=$('#selectYear :selected').val();
var sel=$('#selectMonth').val()-1;
$("#selectMonth option[value="+sel+"]").attr("selected",true);
if(sel>=1){
$('#prevBtn, #nextBtn').removeClass().addClass("button gray");
runAjax(selectedYear, sel);
}else{
$(this).removeClass().addClass("button grayDis");
}
});

$('#nextBtn').click(function(){
var selectedYear=$('#selectYear :selected').val();
var sel=parseInt($('#selectMonth').val())+1;
$("#selectMonth option[value="+sel+"]").attr("selected",true);
if(sel<=12){
$('#nextBtn, #prevBtn').removeClass().addClass("button gray");
runAjax(selectedYear, sel);
}else{
$(this).removeClass().addClass("button grayDis");
}
});

//get current month
var getCurrDate=new Date();
var CurrMonth=(getCurrDate.getMonth())+1;
var CurrYear=getCurrDate.getFullYear();
runAjax(CurrYear,CurrMonth);
}); //document.ready close
</script>

Explanation of jQuery Code

In order for your jQuery code to work, as mentioned above in “Adding jQuery to your page” section, you need to include jQuery JavaScript file onto your web page using <script> tag.

<!-- jQuery -->
<script language="javascript" type="text/javascript" src="js/ jquery-1.4.2.js"></script>

I have downloaded the jQuery file from jQuery site and kept in my local machine.

Snap Shot

Below is the snap shot taken, to brief you on how the Holiday List Calendar will look like:

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

If you would like to know more on how HTML div’s and Listings are used, then view the screen shot below:

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

Preview / Download

If you would like to see the working example, please do click here:
[http://www.developersnippets.com/snippets/jquery/calendar_widget/calendar_widget.html] and if you would like to download the snippet code – click here
[http://www.developersnippets.com/snippets/jquery/calendar_widget/calendar_widget.zip]

Summary

In this article, you have learnt how you can retrieve data from XML using jQuery and the AJAX concepts and also learnt how you can add CSS3 rounded corners to HTML elements and CSS3 buttons.


Further resources on this subject:


Books to Consider

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
$ 26.99
jQuery UI 1.6: The User Interface Library for jQuery
$ 26.99
comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free