5,136,034 members and growing! (12,387 online)
Email Password   helpLost your password?
Web Development » Client side scripting » Controls     Advanced License: The GNU General Public License (GPL)

A XCalendar Class for Web Programmers

By starschen

Compatiable with IE/Firefox, never need extra CSS files appending with XCalendar
JScript, CSS, HTML, ASP, ASP.NET, Ajax, Dev

Posted: 2 Feb 2008
Updated: 9 Apr 2008
Views: 4,611
Announcements



Search    
Advanced Search
Sitemap
9 votes for this Article.
Popularity: 3.63 Rating: 3.80 out of 5
2 votes, 28.6%
1
1 vote, 14.3%
2
0 votes, 0.0%
3
1 vote, 14.3%
4
3 votes, 42.9%
5

Introduction

XCalendar is a calendar class encapsulated by JavaScript code. You can use it to create one or more cool calendar(s) in a browser (IE/Firefox/Opera/Netscape, etc.).

Background

I have used some calendars written in JavaScript, most of all they are very complex, one or more separated CSS file(s) was bound with that calendar. When I need to customize the calendar, I have to read details of JavaScript code and CSS code, then modify them according to my ideas. On the other hand, the code of those calendars isn't adequately compact, more source code isn't based on OOP(Objective Oriented Programming), and I have often encountered namespace conflicts for my own code, some of which are still an existing compatibility problem.

Thus, I decided to write a calendar class to make it easy to port to any browser, and its code is very compact and extended since it is completely based on OOP.

The Key Features

XCalendar has more advantages that differ from existing solutions such as:

  1. Never need extra CSS files appending with XCalendar
  2. Easiest that it can be extended according to your ideas
  3. No namespace conflicts, you only need to notice/avoid the keyword - XCalendar that might be overridden by some code yourself
  4. Compatiable with multiple browsers (IE/Firefox/Opera/Netscape, etc.)

Using the Code

Here's only a small snippet that tells you how to use the XCalendar class in a Web page:

<input type="text" id="mycalendar" />
<script type="text/javascript"> 
// We create a new instance of XCalender here. 
var c = new XCalendar(); 
// Before creating calendar, we'd want to customize the calendar. 
// c.setDateRange(2008,1,5,2008,2,6); c.setSelDate(2008,2,2); c.setStyle(3); 
// it works now. 
c.create(document.getElementById("mycalendar")); 
</script> 

For more details, see the sample - test.html zipped in xcalendar.zip.

Class Specification

create(_textbox, _width, _height, _parent, _id); 
  • @Purpose: Using create method to create a new calendar.
  • @Parameters:
    • _textbox: Which textbox (i.e. <INPUT />) is bound to the calendar.
    • _parent: If you specified _textbox, _parent is ignored, otherwise, to indicate where the new calendar will be put in.
    • _id: The id of calendar, you can get created calendar via document.getElementById('id of calendar')
    • _width, _height: Indicates the size of calendar, default is (250, 100).
setSelDate(_year,_month,_day); 
  • @Purpose: Using setSelDate method to initialize current selected date of calendar, invoked before the create method.
  • @Parameters:
    • _year, _month, _day: Initial date as number.
      Note: If you don't use this method, the calendar will display today.
setDateRange(_startyear,_startmonth,_startday,_endyear,_endmonth,_endday);
  • @Purpose: Using setDateRange method to initialize the range of selecting date of calendar, You can't select any date which is out of the range of selecting date. invoked before the create method.
  • @Parameters:
    • _startyear, _startmonth ...: from date 1(start) to date 2(end).
setStyle(style);
  • @Purpose: Using setStyle to customi the style of the calendar, for now, we only provide three styles invoked before the create method.
  • @Parameters: style: 1 or 2 or 3 can be passed, other values are invalid.
enableTooltip(ok);
  • @Purpose: ok = true to enable tooltip with calendar
setFormat(format);
  • @Purpose: Invoked before the create method. It'll specify the display format of date in the calendar.
  • @e.g. setFormat('%Y-%m-%d') as today is 2/Feb/2008 this calendar will display 2008-2-2.
    Note: If you don't use this method or passing error formatting, it uses the default format - %d-%b-%Y, with the above example, it will be 2-Feb-2008.

Class Static Specification

Q: What's 'class static specification'?
A: You don't need to create a new instance of XCalendar that directly uses some methods of XCalendar.

XCalendar.setValue(oEditor, value);
  • @Purpose: Set new date for created calendar, it's a very useful method.
  • @Parameters:
    • oEditor: The editor(i.e. textbox, HTML code is <INPUT />) was bound with any instance of XCalendar.
    • value: The date value whose format must look like 2008-2-2(%Y-%m-%d) separated by '-'. If you pass an invalid date value, nothing to do.
  • @e.g. Here's an example that tells you how to use XCalendar.setValue method:
<script type="text/javascript">
function foo()
{
// We created the instance of XCalendar in 'foo' function.
var mycal = new XCalendar;
mycal.create(document.getElementById('input_element'));
}

function foo2()
{
/* 
Now, we'd need to change a new date - 2007-12-12 with the 
instance 'mycal' created in 'foo' function.
A question is 'mycal' isn't a global variable, How do we get it?
In other hand, you might want to set 'mycal' to be global, 
then via like mycql.setNewDate to change the date of the calendar, 
it's good idea. A best way that all you only have do is like the below code:
*/
XCalendar.setValue(document.getElementById('input_element'), '2007-12-12');
}
</script>

Similarly with the XCalendar.getValue function, it returns the value of the created calendar, and the format (e.g. %Y/%m/%d) can be specified.
Note: if you pass an invalid format, this will return default value displaying in the calendar.

XCalendar.getValue(oEditor, format);

Utility method for getting days in a month of the year:

XCalendar.getDaysInMonth(year, month);

Utility method for validating date:

XCalendar.isDate(_year,_month,_day);

Namespace Conflicts

For preventing namespace conflicts, some variable names shouldn't be called XCalendar, for example:

// XCalendar is re-defined to an integer, so the class - XCalendar is overridden now. 
var XCalendar = 1;

// Error! XCalendar has been overridden, so you never create the calendar somewhere.
var mycal = new XCalendar; 

History

  • 2008-Jan-20: XCalendar was first created
  • 2008-Feb-04: Last modified
  • 2008-Apr-09: Source code updated

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPL)

About the Author

starschen


Hi, Dear friends:
I'm not a formal programmer, I'm only interested and self-taught at C/C++/MFC/COM/ASP/HTML/XML/CSS/Javascript. Since I have been serving for Schmap Inc., my team generated what a desktop software of map guide called Schmap-Player, this thing looks like Google earth.
At present, I'm learning Python language and created a stat. system that aims to analyse Awstats logs.
In spare time, I'd like playing computer games, badminton, ping-pong, jogging, of course, also music is indispensable.
Occupation: Software Developer (Senior)
Location: China China

Other popular Client side scripting articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh)FirstPrevNext
Subject  Author Date 
GeneralLimitation Of This XCalendar...How to overcome...HELP!!!!!memberrohit_code20:55 3 Apr '08  
GeneralRe: Limitation Of This XCalendar...How to overcome...HELP!!!!! [modified]memberstarschen16:36 6 Apr '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 9 Apr 2008
Editor: Deeksha Shenoy
Copyright 2008 by starschen
Everything else Copyright © CodeProject, 1999-2008
Web13 | Advertise on the Code Project