JSCalendar-The Missing Calendar for the Web
Virtually all web applications require an easier to use utility for the selection of date and time values. With the increasing popularity of JavaScript as a client-side language for the web, most developers use JavaScript calendars these days for this purpose.
Although there are many JavaScript calendars out there that can fulfill your needs, I found JSCalendar, a popular JavaScript library primarily developed by Mihai Bazon, much better compared to the others. It has an eye-catching, easier-to-use and multi-lingual interface, rich documentation, and is compatible across browsers. Of particular note is the set of themes that comes with JSCalendar.
In this post, you learn how to utilize JSCalendar in your web application.
Installation and Configuration
Download JSCalendar. Unzip and copy the whole folder into your web application directory. Link the following files in your page’s header section.
Below the controls on which you want the calendar to appear on, place the following code.
1: <!-- theme or css file -->
2: <link rel="stylesheet" type="text/css" media="all"
3: href="jscalendar-1.0/skins/tiger/theme.css" title="Tiger theme" />
4: <!-- core JavaScript file-->
5: <script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>
6: <!-- display langauge -->
7: <script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
8: <!--This defines the helper function Calendar.setup. -->
9: <script type="text/javascript" src="jscalendar-1.0/calendar-setup.js" ></scrip>
ASP.NET page:
1: <script type="text/javascript">
2: Calendar.setup({
3: inputField : '<%=TextBox1.ClientID%>', // input field id
4: ifFormat : "%m/%d/%Y", // date format
5: showsTime : true, //Boolean for time display
6: timeFormat : "24", //time format
7: align : "BR" //Control’s alignment
8: });
9: </script>
HTML page:
1: <script type="text/javascript">
2: Calendar.setup({
3: inputField : 'Text1', // input field id
4: ifFormat : "%m/%d/%Y", // date format
5: showsTime : true, //Boolean for time display
6: timeFormat : "24", //time format
7: align : "BR" //Control’s alignment
8: });
9: </script>
Check out the documentation that comes with JSCalendar; you can do a lot more with this nice tool.
Live demo | Download