Versions (2012-05-08) (Downloaded 165 times)


  • CalendarView (item-action) - v. 0.5.2

Compatible: Pro 4, Pro 5, and Pro 5.5 (2012-05-05) (Downloaded 4 times)


  • CalendarView (item-action) - v. 0.5.1

Compatible: Pro 4, Pro 5, and Pro 5.5 (2011-12-12) (Downloaded 1 time)


  • CalendarView (item-action) - v. 0.5

Compatible: Pro 4, Pro 5, and Pro 5.5 (2010-11-02) (Downloaded 0 times)


  • CalendarView (item-action) - v. 0.4.9

Compatible: Pro 4 and Pro 5 (2010-11-01) (Downloaded 1 time)


  • CalendarView (item-action) - v. 0.4.8

Compatible: Pro 4 and Pro 5 (2010-09-22) (Downloaded 2 times)


  • CalendarView (item-action) - v. 0.4.7

Compatible: Pro 4 and Pro 5

Author: Walter Davis

developer css form prototype variable open-source lgpl date-and-time

Apply this Action to a text field to make an easy popup calendar for choosing dates. Based on and includes Prototype (so no MooTools on the same page).

Your text field may either be blank, or be pre-filled with a date. The date will be interpreted if present, and the popup calendar will center on that date. (You may always navigate to a different month or year.) If the field is blank, then the calendar will default to the current date. When you click on a date in the calendar, the chosen date will be entered into your text field.

Date Formatting

Version 0.2 introduces a text field to configure the date format. By default, this is set to an ISO-formatted date, as MySQL and other databases understand that natively. If your form processor expects a different format, or you just want to be nice to your visitors, then you may construct your own format string. Here’s the list of acceptable format tokens:

%a = abbreviated weekday name
%A = full weekday name
%b = abbreviated month name
%B = full month name
%C = the century number
%d = the month (range 01 to 31)
%e = the day of the month (range 1 to 31)
%H = hour, range 00 to 23 (24h format)
%I = hour, range 01 to 12 (12h format)
%j = day of the year (range 001 to 366)
%k = hour, range 0 to 23 (24h format)
%l = hour, range 1 to 12 (12h format)
%m = month, range 01 to 12
%M = minute, range 00 to 59
%n = a newline character
%p = uppercase AM or PM
%P = lowercase am or pm
%S = seconds, range 00 to 59
%t = a tab character
%U = week number
%u = the day of the week (range 1 to 7, 1 = MON)
%w = the day of the week (range 0 to 6, 0 = SUN)
%y = year without the century (range 00 to 99)
%Y = year with the century
%% = a literal '%' character

Anything which is not on this list will appear “in the clear” – without any substitution taking place. You may use any punctuation you like within the date in order to make it easier to read.

Whatever date format you choose, you have to be consistent with it all the way through. If you pre-fill your date form element with a date, it must conform to the same format as you set here.

License Information

The underlying calendar formatter is licensed with the GNU LGPL (Lesser General Public License). While considerably more lax than the GPL (a.k.a. CopyLeft), this license still requires you to divulge certain information whenever you sell a product including licensed material. If this is a concern to you or anyone purchasing a site from you, you have been warned. You may read more about the license at the GNU Project.


Hi Walter!

Any chance of an update that allows multiple instances on a page? I need to be able to enter both a start and end date for a project.

You can have as many such items on a page as you like. No limit, as far as I can tell.


Whoops! My bad, I had both inputs with the same Name attribute. Sorry.

I can not run the calendarview, I put in a form to the date of arrival and date of departure, but nothing happens … sob

Can you post a link?

The site under constuctions

I also tried with calendar picker unfortunately without success.

datepicker, sorry

How do I go to load the site after the changes to the date picker appears calendarview.css warning that the file is not found, retry a second time charge all, I also generated a file of type calendarviewa.css and calendarviewa.js. Can you explain why? I downloaded your sample file and all, Walter, settings seem correct, I put the form into a table, leaving the debt space to display the pop-up, but I get a strange date like 11/7/2011

I think the problem is due to the use of jQuery on the same page, because I copied the sample page as it is, in my site and works perfectly. Or it could be a problem because the form is enclosed in a table?

The problem is the tabs made ​​with jquery, suggestion to combine the tabs with the calendar?

I would guess that jQuery might be the problem. As to the renaming problem, that's easily solved. Locate your local site folder on your Mac, and empty it. Publish again, and the files will all be named correctly. I don't see anything on your page that really needs jQuery, so maybe you should start there. Freeway's built in CSS Menu Action can build your navigation bar, and it doesn't use JavaScript at all.

Are you telling me that I can use the tabs to the freeway instead of the javascript menu? And as calls are made to the tabs? However, I used a css menu of freeway to get it together with jquery, I followed the screencast by Dan Jasker.

jQuery and Freeway are incompatible at the JavaScript level. If you use jQuery, you are entirely on your own – you will have to hand-write every other bit of JavaScript you use in that same page, so no Actions, and nothing built-in like the effects during Rollover. There is nothing I could see about your page that actually needed jQuery at all, so I'm not sure why you bothered with it.

Hello, I want to put your calendar on my website. I can not see the calendar once installed. Do you have a procedure to follow? I see nothing in the actions. I'm sorry but I'm a beginner.

This Action is a form helper, not something that shows on screen all the time. To use it, you need a form field in your page for entering a date. If you pre-fill it with a value (from a Web application, for example) then you need to ensure that the date value entered into it is in the ISO format: YYYY-MM-DD. Apply the Action to the form field, and that's it. Clicking on or otherwise focusing into the form field will cause the calendar to appear.

Sign In or Sign Up to comment.