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

Exclusive offer: get 50% off this eBook here
jQuery Plugin Development Beginner's Guide

jQuery Plugin Development Beginner's Guide — Save 50%

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

$26.99    $13.50
by K.Vivekanand | February 2011 | AJAX Open Source

jQuery is one of the best and well known JavaScript Libraries. Using this you can come up with front-end UI design and can also develop some innovative web reusable components. You should have a basic knowledge of HTML to code in jQuery. Functions in jQuery are very easy to understand and can be used in your projects accordingly. You can also develop reusable plug-ins Using jQuery. You can find tons of plug-ins which can be used in our respective projects here. [http://jquery.com/]

This article by K.Vivekanand from DeveloperSnippets, will give you a brief on how you can develop a Holiday List Calendar with jQuery, AJAX, XML and CSS3. You will learn about AJAX concepts and how to retrieve data from XML using jQuery. CSS3 was used to develop the buttons.

 

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; }

 

jQuery Plugin Development Beginner's Guide Build powerful, interactive plugins to implement jQuery in the best way possible
Published: October 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:


PHP jQuery Cookbook Over 60 simple but highly effective recipes to create interactive web applications using PHP with jQuery
Published: December 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


K.Vivekanand is working as a Software Engineer, and has good experience in Web Development and Web Designing environment. His core skills include HTML, CSS, XML, XSLT, Adobe Products - Photoshop, Flash, Flex (Basic Level), JavaScript, intermediate knowledge on JavaScript API’s like ExtJS, Yahoo API, Google API, MooTools. He works on PHP projects, having some knowledge on C, C++, Java, JSP, JavaBeans. He also works on developing WordPress Themes and Joomla Themes.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Apache MyFaces 1.2 Web Application Development
Apache MyFaces 1.2 Web Application Development

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

WordPress 3.0 jQuery
WordPress 3.0 jQuery

Object-Oriented Programming in ColdFusion
Object-Oriented Programming in ColdFusion

Learning Ext JS 3.2
Learning Ext JS 3.2

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
F
R
m
K
Y
d
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software