[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Yearly Holiday List Calendar Developed using jQuery, AJAX, XML and CSS3, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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.
| 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"><</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; }
| 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:
If you would like to know more on how HTML div’s and Listings are used, then view the screen shot below:
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:
- Getting Started with jQuery [Article]
- Enhancing your Site with PHP and jQuery [Article]
- The Basics of WordPress and jQuery Plugin [Article]
- jQuery User Interface Plugins: Tooltip Plugins [Article]
- Tips and Tricks for Working with jQuery and WordPress [Article]
- Calendars in jQuery 1.3 with PHP using jQuery Week Calendar Plugin [Article]
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.
Post new comment