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
If you are a Macintosh user you might have come across TextMate- a cool general purpose Text editor that comes with code coloring, code folding, tabs, code bundles, and themes to name just a few. However, if you are a Windows user, TextMate is most likely not the one that works for you. I thought it would be a good idea to see what alternatives are out there for Windows users.
Here is a list of Text editors I have used or spent some time with:
E-Text editor- If you really want to enjoy the power of TextMate on Windows give E a try. It has almost everything that can be expected from a modern Text editor. Although it has a price tag of 34.95 USD, it's worth paying for.
Intype - Although it's in its early stages of development, Intype is a powerful text editor for Windows with code coloring, bundles, themes, and tabs. It is free and doesn't cost you a penny.
Notepad ++ - If you want your ugly Notepad to be transformed into a cool, nice and powerful text editor for free, give Notepad++ a try.
More Posts