I am a big fan of jQuery, so i always use jQuery Calendar plugins to accomplish my tasks when the clients asked me to implement an event caldendar for them. In this article, i would like to share 9 really useful jQuery Event Calendar and Date Picker plugins that every web designers and developers should know.

1. FullCalendar

FullCalendar is a famous jQuery calendar plugin which offers features like drag-and-drop, integration with Google Calendar and able to fetch events through JSON. Designers can easily customize the look and feel of the calendar, while developers can utilize the exposed hooks for user-triggered events.

2. Astonishing iCal-like Calendar

This is a tutorial which uses both jQuery and CSS to build an iPhone styled calendar application. The author also implement the Coda-like effect for the popup event.

3. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds date picker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

4. jMonthCalendar

jMonthCalendar supports full month calendar and events. The interesting part of this plugin is it allows developers to interact with the calendar.

5. Date Picker

Date Picker is a jQuery calendar plugin released under MIT and GPL licenses. It has a lot of options and features. For example, you can have multiple calendars in the component, mark dates as special days, easy to customize through CSS and allow different selection modes. All these can be easily setup though the configuration options.

6. jQuery Week Calendar

jQuery Week Calendar is a plugin which will include a weekly calendar in the web application. The events can be supplied as an array or JSON, and these events can be easily drag, drop and resize. There are a lot of options and event callbacks which you can refer through the official plugin page.

7. Simple jQuery Date-picker Plugin

This is a very simple date picker plugin. However, it provides a lot of useful and necessary features for a date picker. For example, you can easily navigate to the months and years through the drop down selection boxes.

8. jQuery Date Picker Plugin

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date picker to your web forms and pages. There are a lot of configurations and options for this simple plugin. You can refer to the plugin page for more examples of how to use this plugin.

9. jQuery Interactive Date Range Picker

This powerful date range picker is a modified version of jQuery UI’s Datepicker component. It has a quicker date selection from a list of preset dates/ranges and a smooth transitions. The latest version uses the jQuery UI 1.7 and jQuery UI CSS Framework. With the power of jQuery UI, user can now switch the calendar theme easily.

Ref:9 Useful jQuery Calendar And Date Picker Plugins For Web Designers

I ran across an interesting little trick in some code I’m working on today.  As usual, not my code, someone else’s that I’m trying to decipher and fix.

One thing that they are doing is sort of slick.  There’s apparently an array created by the datepicker.js JavaScript called g_strDateTimeControlID which is populated with the IDs for all of the date input fields on the page which utilize the Date Picker. (I did some Binging, and there are only 4 references to g_strDateTimeControlID that I found.)  The little calendar icon below is the Date Picker:

You can use the g_strDateTimeControlIDs array like this:

var eventDateID = g_strDateTimeControlIDs["SPEventDate"];
document.getElementById(eventDateID).value = date;

Note the ‘SP’ ahead of the column name.

That’s certainly simpler than writing your own JavaScript/jQuery to find the control, and makes it easy to set the date value, whether it be from a Query String value or some calculation.  Because the array is constructed and used by the Date Picker, so it should be available on the page where ever the Date Picker is seen.

Jquery datepicker problem on date select in IE –

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible.  However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area.  A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

• dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button.  All of these are optional.
• dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list.  Hovering over an item shows a dijit.Tooltip with a summary of the news story.
• dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
• dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
• dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
• dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs.  However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

Other parts: 1, 3.
Bookmark that post

Updated: 3 more forms added at the bottom: “work days calculation (excluding weekends and holidays)”, “day of the week calculation” and “Days since form was created”.

Special thanks: Karl D. Swartzendruber

So what about so called “codeless programming” in InfoPath? As we all probably know, InfoPath can performed only 16 calulations without user interaction. But what if your business rules require you to iterate through 17 repeating elements? You will get a message box from InfoPath with phrase “The rules or code may be causing an infinite loop”. Yes, in InfoPath 16 is a very big number and 17 is considered infinite. To you and I this might seem stupid and arbitrarily restrictive, but Microsoft’s wisdom is greater than ours. Perhaps they know that 17th iteration would give us developers too much power. It would break the fine balance of Microsoft applications, make other development tools obsolete, and become unbearable for non InfoPath developers. But let’s drop the light irony and just accept that InfoPath already has more codeless programming power than mere mortals should ever need.

Today’s challenge is to find the difference in days between 2 datepicker controls disregarding the absence of datediff() function in InfoPath. We are going to show that the 16 iterations limit just can’t stop the true codeless programmer.

Disclaimer: During developing cycle author has been having in mind “finite automates” principles as well as primitive binary search.

Anyway, lets get to the business. Date Difference Calculation. Form to download.

Our recipy is the following: We will need 3 fields. 2 of them are date type fields with datepicker controls (startDate, endDate) and one (dayDifference) is a text type field represented by a simple textbox. All rules have exactly 1 action.

startDate rule:

condition expession: ../my:endDate != ""
field: dayDifference
string value: 0;4096

endDate rule:

condition expession: ../my:startDate != ""
field: dayDifference
string value: 0;4096

dayDifference rules:

MainRule:

condition expession:
xdDate:AddDays(../my:startDate, substring-before(., ";")) != ../my:endDate and contains(., ";")
field: dayDifference
xPath expression: concat(substring-before(., ";") + substring-after(., ";") * ((translate(xdDate:AddDays(../my:startDate, substring-before(., ";")), "-", "") < translate(../my:endDate, "-", "")) * 2 – 1), ";", substring-after(., ";") div 2)

finalize rule:

condition expession: contains(., ";")
field: dayDifference
xPath expression: substring-before(., ";")

Your form is ready!

What else can be done by applying same principles:

Here is form that shows amount of days since it was created
Form that shows current day of the week and day of the week from Date Picker control.
The tricky one: Work days calculation (business days)

That’s it. Happy codeless programming!

Posted under tags: Infopath, Date Picker Control

MetaL – Examples of use of the Forms Generation and Validation class

Forms class > Examples of use of the Forms Generation and Validation class

1. General (code)
2. Date picker (code)
3. CAPTCHA validation (code)
4. Map location (code)
5. Automatic layout (code)
6. Paged layout (code)
7. Animation effects (code)
8. AJAX form submission (code)
9. Linked select inputs (code)
10. Auto-complete (code)
11. File upload progress (code)

Lets get one thing out of the way before we go any further – I’m a jquery fanboi. I use it, I need it, I love it.

I’ve been using this wonderful library for almost 2 years now and I can only vaguely remember what it was like developing a site without it.

It’s kind of like trying to remember what life was like before getting your first cellphone. You managed somehow, but now you just can’t quite see yourself making it through the day without one.

I’ve just finished another project and was struck again by how much easier these libraries and their plugins make my life. To write javascript using old school methods is such a waste of time and in my opinion, just downright silly.

Before I start a new project, I spend quite a bit of time going through the various plugins available to see if there’s anything new that may help me in my work.The following list details my favorite and most frequently used plugins.

1. Thickbox – this plugin is what first convinced me to give jquery a go. I was looking for something along the same lines as the prototype / script.aculo.us Lightbox plugin. The fact that it handled content and not just images coupled with it’s lightweight footprint is what sold me. In my opinion, still the most useful jquery plugin out there.

2. Superfish Menus – I’ve tried many, m-a-n-y javascript based menu systems and I have to say that this is so far the easiest and most flexible implementation I’ve seen yet. I’m just sorry that I didn’t discover it sooner.

3. Datepicker – probably the easiest to use calendar popup script I’ve used to date. Powerful, flexible and unobtrusive, what more could you want?

4. JGrowl – only recently discovered, it’s a stylish way of notifying users of what’s going on in your application. I use it to display system messages in my admin panels. Definitely beats the standard window.alert approach. The only thing I don’t like is that you have to use the entire jquery.ui library (over 150K). I’ll be looking into this to see if there’s some way to cut down on the filesize.

5. clueTip – pretty handy when you need to display tooltips. Supports ajax and inline content and very easy to implement.

6. UI Tabs – makes creating tab based navigation on your website stupidly simple. The various options make this plugin a must have. I find it very useful for longer forms, admin panels and organising one’s interface.

There are of course hundreds of other plugins available that I haven’t even looked at yet. Then there are all the other javascript libraries available, with all of their hundreds of plugins. Which is what I love about the web – there’s always something new to play with.

Again, my heartfelt thanks to all of the selfless, hardworking hackers out there who publish their work for all and sundry to use. Without you guys, the web would simply cease to function.

Existen por la red infinidad de selectores de fecha que muestran un calendario al hacer click sobre un campo de este tipo. Normalmente, para seleccionar un rango de fechas se suele poner un segundo campo con su propio selector dependiente del primero (para que la segunda fecha sea posterior a la primera).

Sliding date-picker es otra forma, no se si más ergonómica o no que la tradicional, pero desde luego más original, para seleccionar rangos de fecha.

Aquí se puede ver una demo.

I hope to add more breakdowns like this as I figure them out. Here is the style breakdown for the date picker calendar popup:

Date picker styles

I havent been posting lately bc I have been knee deep in theme hell. It is coming along… I spent over 3 hours the other day trying to skin the damn date picker calendar pop up, all to no avail. I finally found a way to do it. I created an alt style sheet, saved it to my style library, and copied all the date picker styles that i wrote to it and applied the alt stylesheet via the master page alt style sheet field (site/_Layouts/ChangeSiteMasterPage.aspx). It works One caveat: you only get one date picker style for your site collection-if you apply a different theme to a subsite, the date picker will still pick up the style from the alt stylesheet.

Hooray! Branded datepicker!!!

Date control is a combination of three drop downs with month, day and year valus. It can be used as an alternative to the date picker control. Suppose a user needs to select a date before/after 10 years. At this point selecting the date with a date picker will not be easy and time consuming. So, in this situation, this control may be helpful.

More >>

The latest and greatest release of the Dojo Ajax Toolkit has just hit the presses, and she’s looking good. As Alex mentioned, the number of cool features in Dojo can be difficult to keep up with, so I’ll just list some of the things I’ve either written for Dojo, helped along, or just been damn impressed by in this release:

Dojo Datastores

The number of useful data stores for Dojo just keeps growing and growing, under the watchful eye of Jared. For release 1.1, I submitted a data store to read Atom XML documents, dojox.data.AtomReadStore. See more about this at http://shaneosullivan.wordpress.com/2008/02/20/new-atom-data-store-for-dojo/.

FisheyeLite

Peter Higgins submitted an amazingly simple, but oh-so-cool widget called dojox.widget.FisheyeLite. Rather than act like a ‘true’ Fisheye widget, which would generally only work on images (á la OS X), this widget can apply cool Fisheye-like behaviors to just about anything – text, divs, spans, you name it. Check out the test page for some cool examples, or see my personal website for an example of how I used it to spruce up my site menu.

Django Template Languate – dojox.dtl

The Django Template Language is an amazingly powerful templating language, with which you can turn your JavaScript data into HTML. While this was originally designed to be a server side templating solution, Neil Roberts has done a brilliant job of converting it over to work in the browser. While I though I’d had an original idea when I pitched the idea to him that it’d be cool to integrate Dojo data stores directly into DTL, Alex already had the whole thing implemented and about to check it in. Typical I’ve written up a tutorial on how to integrate DTL with Dojo data stores, specifically the AtomReadStore I wrote, at http://shaneosullivan.wordpress.com/2008/03/03/writing-a-django-template-widget-with-dojo-data-stores/.

Functional Programming

This enables you perform many operations on data using just a single function call. Once of the cool things it provides is the ability to specify a function as a simple string, drastically reducing the complexity and size of your own code. Eugene Lazutkin wrote a great blog post about this, which is well worth a read. I wrote a follow up post, as a quick reference to some of the cool things you can do with this feature. Some of this was available in 1.0, but I’ve just discovered it, so here you go!

Dojo Campus

Peter Higgins, Nikolai Onken and myself have been working on a new learning resource for Dojo developers, called Dojo Campus. It provides a lot of learning materials, including videos, tutorials for beginners and more advanced programmers, and much more. We also have a still-under-wraps-but-soon-to-be-release demo engine that has loads of easy to use runtime examples of things to make and do with Dojo. I blogged about a very early version of it at http://shaneosullivan.wordpress.com/2008/01/07/dojo-demo-engine-update/, but it’s come a long way since then. Keep you eyes peeled for it’s release. Any day now…..

And finally….

A very sexy Calendar widget I’ve written got submitted just a bit too late to make in into 1.1 (read: the day before release), but will be in the nightlies soon, and will make it into 1.2. See the blog post about it at http://shaneosullivan.wordpress.com/2008/03/24/sexy-new-calendar-widget-for-dojo/.

This is nowhere near a comprehensive list of course, just the bits I’ve been fiddling with over the last few months:

• See Dylan’s post for some more info.
• Get the release notes here.
• See the Ajaxian post here.
• See Alex Russell’s (Dojo project lead) post here.

So go forth and explore, it’s good healthy nerd-fun! Share this post:
digg it|kick it|Email it|bookmark it|reddit|liveIt

I’ve submitted a sexy new Calendar widget to the Dojo Toolkit, called dojox.widget.Calendar. Check out a test page for it at http://www.skynet.ie/~sos/js/demo/dojo/dojox/widget/tests/test_Calendar.html. The ticket tracking it is at http://trac.dojotoolkit.org/ticket/6297.

The features of this calendar widget are:

• Day view – the standard view, showing all the days in a month
• Month view – lists the twelve months of the year.
• Year view – lists all the years that can be chosen.
• Cool animations between these views.
• Cool animations when moving from month to month, and from year to year.
• Cool animations when moving the mouse over the widget, courtesy of the dojox.widget.FisheyeLite widget. (tired of cool animations yet? Nah, me neither)

The daily, monthly and yearly views of the Calendar

I was inspired to write it after seeing the very cool Calendar widget in the AjaxControl Toolkit, a .NET Ajax framework, which made me think “I wonder how long this would take to write with Dojo?“, taking into account the obvious: not a single line of code could be copied from the original.

The answer turned out to be about 3 hours or so, since Dojo already provided the majority of what I needed.

• All the Date-related heavy lifting is done with dijit._Calendar, the existing Dojo calendar widget. This also handles the majority of the localisation issues.
• Most of the animations are done using the dojo.animateProperty function.
• Generating the HTML of the widget is mostly taken care of by the standard Dijit templating system.

What remained to do was changing the exiting dijit._Calendar HTML template to give a month and year view, and fiddling with CSS to get it looking right. A textbox popup widget was also submitted to integrate the Calendar with a text input field, called dojox.form.DateTextBox;

Hopefully this will make it’s way into the DojoX project fairly soon, and be available for general use.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Esta clase nos permite tener un campo fecha en nuestro formulario, con mucho estilo, fácil de personalizar, sobre todo resaltar que es accesible y no intrusivo. Es a su vez una compilación de date-pickers hechos por el autor Aeron Glemann y completamente re-escrito especialmente para Mootools.

Según nos cuenta su autor ha sido probado satisfactoriamente en Safari, Firefox, Opera, Internet Explorer. La clase requiere Mootools 1.1 con Fx.Style, Element y Window. Y si se quiere habilitar el efecto de arrastrar y soltar (Drag&Drop), deberiamos añadir el componente Drag.

Página Oficial:
http://www.electricprism.com/aeron/calendar/

Visto en:
http://www.webappers.com/2007/11/22/
impressive-and-beautiful-css-styling-mootools-calendar/

Hi,
Many of you often come around a problem where you need a Javascript Calendar or Datepicker. You can get a lot from searching in Google. But the problem is that they are not easy to configure.

But I have came around a script in DHTML Goodies (JS Calendar) which is brilliant. You can download the code from DHTML Goodies.

First put these two lines befoer </head> section.
As you can understand one of this is a CSS (Styel Sheet) File and another one is a Javascript file (which is the main Javascript file holding the functions of Calendar).

<link type=”text/css” rel=”stylesheet” href=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112″ mce_href=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112″ media=”screen”></LINK>
 <SCRIPT type=”text/javascript” src=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118″ mce_src=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118″></script>

Note that the two files  dhtmlgoodies_calendar.js and dhtmlgoodies_calendar.css are located in dhtmlgoodies_calendar directory of your server or you can you any other directory also.

Now create a Form element in <body> tag and you can put the below lines. 

<form>
<p>Click on the “Cal” buttons to see how the calendar works</p>
<table>
 <tr><td colspan=”3″><b>Dates only</b></td></tr>
 <tr>
<td>Date input 1(YYYY/MM/DD): </td><td><td>
<input type=”text” value=”2004/02/02″ name=”theDate”>
<input type=”button” value=”Cal” onclick=”displayCalendar(document.forms[0].theDate,’yyyy/mm/dd’,this)”>
</td>
</tr>
 </table>
</form>

Here you can easily understand that document.forms[0].theDate is the text box element where you want the selected dates to be inserted.
forms[0] refers to the first form in the document element or the body tag. Here is only one form. You can access the form by name or getElementById also.

Suppose the form name is dateForm: <form name=”dateForm” >
then the you can access this the text box by document.dateForm.theDate.
If you use a id attribute in form element : <form name=”dateForm” id=”dateForm”>
then you can access the text box by document.getElementById(“dateForm”).theDate.

Or you can access the text box directly by giving a id attribute to the text box element
<input type=”text” value=”2004/02/02″ name=”theDate” id=”theDate”>
Then you can access it by document.getElementById(“theDate”) only .

So you can understand that clicking on the Button whose Value is Cal you invoke the onclick() event of the input type. And it calls the function displayCalendar with parameters
1. the inout type where the text is be put.
2. the date format. You can specify a lot of formats here.

Link to download this script.