VlaCalendar version 2.1 released

VlaCalendar version 2.1 released – ajax, javascript, vista, calendar, mootools, datepicker, vlacalendar, compatible

A new version of my Vista-like Ajax Calendar (vlaCalendar) has been released:
version 2.1 is made compatible with MooTools installment, version 1.2, and offers some new features:

  • Compatible with mootools 1.2
  • New user requested features:
    • Prefilling the date input
    • Default view option
    • Input and datepicker linkage; if the input is changed the datepicker will adapt itself to that input

Documentation, examples, and the download are available here.

If you made a new style (theme) for the calendar and you want to share it, send it to rcz<at>base86.com. If you used the calendar and/or datepicker some where, I'd appreciate it if you'd let me know by adding a comment!

Update September 5, 2008: VlaCalendar version 2.1.1 released. Minor changes in the PHP code.

Author rcz Time Jul 2, 2008 Comment on 'VlaCalendar version 2.1 released' Add comment Bookmark 'VlaCalendar version 2.1 released' Bookmark Permalink to 'VlaCalendar version 2.1 released' Permalink
Bookmark 'VlaCalendar version 2.1 released' to Netvouz Bookmark 'VlaCalendar version 2.1 released' to Facebook Bookmark 'VlaCalendar version 2.1 released' to Furl Bookmark 'VlaCalendar version 2.1 released' to Technorati Bookmark 'VlaCalendar version 2.1 released' to Stumble Upon Bookmark 'VlaCalendar version 2.1 released' to Digg Bookmark 'VlaCalendar version 2.1 released' to Del.icio.us

Comments (87)

Comment author Carlo Veltri Comment author website chepelle.alte[...]rg/wordpress Time Jul 2, 2008 05:25 GMT #1
How can i use it in my wordpress sidebar?
Comment author rcz Time Jul 2, 2008 08:28 GMT #2
How can i use it in my wordpress sidebar?
Good idea to make a Wordpress plugin of it. I'll look into it.
Comment author dway Time Jul 5, 2008 02:16 GMT #3
Big, big thank you.
Best DatePicker I've found.
Comment author mellow_bunny Comment author email mellow<at>mellowspace.com Time Jul 10, 2008 02:01 GMT #4
Thanks dude! This is a great wee script. I've found some errors in the 2.1 script though. I'm not sure if it's just something I did or what.

I found in the base.php and month.php file some php code which opened with
  1. <?=
instead of
  1. <?php
.

I had to change them all to <?php for the script to run correctly.
Comment author rcz Time Jul 10, 2008 10:28 GMT #5
Its a setting in your PHP configuration which also allows <?= notation. Almost every webhosting has this setting set to true. Be sure to change <?= to "<?= echo" tho.
Comment author Evan Meagher Comment author email evan.meagher<at>fadv.com Time Jul 17, 2008 04:43 GMT #6
Awesome! I have been patiently awaiting this for MooTools 1.2 and it's the best out there!

Thanks so much for everything!
Comment author Artem Nezvigin Time Jul 18, 2008 10:38 GMT #7
The sloppy PHP code is what is keeping me from using this. You should code using E_STRICT from now on if you're going to be doing public releases. Much of your code generates PHP warnings left and right.

You should not be using short tags to open PHP documents. The most you should ever do with short tags is implement them in templates like so:
<?=$some_template_var?>

Cool looking calendar though, wish it was stable enough for the public.
Comment author rcz Time Jul 19, 2008 01:08 GMT #8
The sloppy PHP code is what is keeping me from using this. You should code using E_STRICT [..] looking calendar though, wish it was stable enough for the public.
I've tested and implemented the calendar in various situations and on various webhosts without any problems.
You are most certainly correct about the shorttags notation. Thanks for the criticism I shall definitely look into the PHP code for the next release. A client side (PHP-less) only plugin will probably be released soon.
Comment author ksl Time Jul 20, 2008 08:41 GMT #9


Thank you for nice script
I tried to install you script on my site, but unfortunately can start one yet.

I downloaded archive vlaCalendar version 2.1 unpacked and transfer to server.
Acc. To Example I write following text:

<head>
<title>Untitled</title>
<script type="text/javascript" src="jslib/mootools-1.2-core"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1"></script>
<script type="text/javascript">window.addEvent('domready', function() { initialize() })</script>
<link type="text/css" media="screen" href="styles/vlaCal-v2.css" rel="stylesheet" />
<script type="text/javascript">
window.addEvent('domready', function() {
//Datepicker
new vlaDatePicker('exampleI');
});
</script>
</head>

<body>

select date :<input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10" />

I’ve got errors:
Error: window.addEvent is not a function

When I removed window.addEvent

<head>
<title>Test title</title>
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>

<script type="text/javascript">
//Datepicker
new vlaDatePicker('exampleI', { defaultView: 'year' });

</script>
</head>

<body>

Select date: <input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10" />

</body>

I’ve got following errors:
Error: uncaught exception: No (existing) element to create a datepicker for specified: new vlaDatePicker(ELEMENT, [options])

Could you tell me what I made wrong ?
Thank you for answer.
Comment author ksl Time Jul 20, 2008 08:44 GMT #10
sorry, misprint... I can't run script unfortunately :-( Could you explain please what I doing wrong ?
Comment author rcz Time Jul 21, 2008 11:22 GMT #11
In the first example you don't seem to have included mootools correcly, otherwise the addevent will work. You have src="jslib/mootools-1.2-core" with should be src="jslib/mootools-1.2-core.JS".

The second error states that the element for which you want to create the datepicker does not exist. This is because the DOM isnt ready yet: the code should be in the domready event.
Comment author ksl Time Jul 21, 2008 05:47 GMT #12
Thank you for quick response. It was my fault.
I changed html code acc. to you recommendations.
See example - http://www.railway.te.ua/calendar/
When I open page - I can see calendar table. Calendar pick-up function is not working.
Could you tell me, how to set pick-up Calendar closer to input field?
Thanks for help.

<title>Test Calendar</title>
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>

<link type="text/css" media="screen" href="styles/vlaCal-v2.css" rel="stylesheet" />
<script type="text/javascript">
window.addEvent('domready', function() {
//Datepicker
new vlaDatePicker('exampleI');
});
</script>
</head>

<body>

<h3>Calendar test</h3>

select date :<input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10" />

Question 2: I’d like to translate Calendar titles to Russian –is it possible ?
Comment author ksl Time Jul 21, 2008 05:56 GMT #13
I changed css path - Calendar works fine. :-)
Comment author ksl Time Jul 21, 2008 06:10 GMT #14
Sorry for question. I see in FireFox whole table of Calendar, I see half of Calendar table in IE7
Should I change CSS style ?
see screenshots:
IE7 -http://www.railway.te.ua/calendar/ie7screen.gif
Opera 9.5- http://www.railway.te.ua/calendar/opera95screen.gif
FireFox - http://www.railway.te.ua/calendar/firefox-screen.gif
Comment author rcz Time Jul 21, 2008 11:24 GMT #15
Change your doctype to a XHTML variant like:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE browsers are crap.

The language can be changed in the file vars.php.
Your other question(s) can be answered by reading the documentation thoroughly and experimenting yourself.

Try to keep your comments somewhat smaller Face: Happy
Comment author ksl Time Jul 22, 2008 09:11 GMT #16
After changing Doctype Calendar works fine with IE7. Thank you for help
Translated Russian version of monthes you can download here - http://www.railway.te.ua/calendar/vars.zip
Thank you for Help. Face: Happy
Comment author Marc Time Jul 29, 2008 12:19 GMT #17
I'm getting this message when I click on the input field. The calendar shows up with this message:

What is it?

Notice: Undefined index: pickedDate in /srv/www/web4/web/test/inc/month.php on line 7 Notice: Undefined index: ts in /srv/www/web4/web/test/inc/month.php on line 14
}"> Su
30 1 2 3 4 5 6
Notice: Undefined variable: row in /srv/www/web4/web/test/inc/month.php on line 64 7 8 9 10 11 12 13
14
Comment author ana Comment author email sweet_1985girl<at>yahoo.com Time Aug 1, 2008 12:21 GMT #18
hi!
can i use ASP files instead of PHP files?
Comment author Michael Time Aug 7, 2008 11:06 GMT #19
Hello,

I use this code :


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Welcome</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.         <script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
  7.         <script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
  8.         <link type="text/css" media="screen" href="styles/vlaCal-v2.1.css" rel="stylesheet" />
  9.  
  10.         <script language="javascript">
  11.  
  12.         window.addEvent('domready', function() {
  13.                 new vlaDatePicker('exampleIV-B', { style: 'apple_widget', offset: { x: 3, y: 1 } });
  14.         });
  15.                 
  16.                 
  17.  
  18.         </script>
  19.    </head>
  20.    <body>
  21.      <input id="exampleIV-B" type="text" style="width: 80px;" maxlength="10" />
  22.    </body>
  23. </html>



But I have problems and problems with Javascript (Firebug help me but i'm not able to debug everything).

Anybody can send a pack with HTML file ? I think there is a problem of path ?


Thank's
Michael
Comment author Michael Time Aug 7, 2008 11:16 GMT #20
Sorry I found the solution alone ... Face: Shocked

In fact, php short tags were disabled in the php configuration (by default with wamp server)

I had just to click on the wamp icon, php configuration, short open tag and finally restart the server !
Comment author Web Design Glasgow Comment author website www.intraspin.com Time Aug 9, 2008 12:20 GMT #21
Hi, this looks good, but I've put it into my app and it returns the following error on line 192:

'this.parent is not a function'

I've pretty much copied Example III verbatim. Any thoughts?

Thanks
Comment author NT Time Aug 11, 2008 06:56 GMT #22
Looks nice, but I will have to pass for now because of the Creative Commons Attribution- NonCommercial 3.0 License. It would be nice if you offered licensing options for those of us who would like to use it as part of a commercial site.
Comment author ksl Time Aug 15, 2008 12:20 GMT #23
I run ok Calendar pickup service on site url like this: sitename.com. When I changed path for page for example sitename.com/dir1/dir2/ I can't see Calendar pickup table with dates - only warning error message showed: "action = inc/base.php" I changed paths on page like this:
src="../../jslib/mootools-1.2-core.js" for vlaCal-v2.1.js, vlaCal-v2.1.css How to set absolute path for Calendar script ? Thank you.
Comment author rcz Time Aug 15, 2008 12:27 GMT #24
Hi, this looks good, but I've put it into my app and it returns the following error on line 192:

'this.parent is not a function'

I've pretty much copied Example III verbatim. Any thoughts?

Thanks
Could be a lot of things. Do you have it online somewhere?

I run ok Calendar pickup service on site url like this: sitename.com. When I changed path for page for example sitename.com/dir1/dir2/ I can't see Calendar pickup table with dates - only warning error message showed: "action = inc/base.php" I changed paths on page like this:
src="../../jslib/mootools-1.2-core.js" for vlaCal-v2.1.js, vlaCal-v2.1.css How to set absolute path for Calendar script ? Thank you.
Provide an absolute path with the filePath option. See the source of the example and documentation page for an example.
Comment author ksl Time Aug 15, 2008 01:04 GMT #25
Thank you for quick response. Please take into account - you should not only add string site path but also add "inc" path to the end of string. For example:
good - new vlaDatePicker('exampleI', { separator: '-', filePath: 'http://sitename.com/inc/',startMonday: true });
Comment author ksl Time Aug 15, 2008 04:50 GMT #26
is it possible to add close button on PickupCalendar window where month generated ?
Comment author ksl Time Aug 17, 2008 09:16 GMT #27
Is it possible to show dates in Calendar pickup Dates grid where next dates more then current date? for example: today Aug 20 - show in grid all dates more Aug 20 - 21,22.... May be filter dates by cell color? Thank you for answer.
Comment author ksl Time Aug 17, 2008 11:06 GMT #28
How to block Calendar to force write current date in input value when date was given in form by post method? For example: I send to form page date =20-08-2008. When I show form element - I see current date in input filed (17-08-2008) but I see my date in Calendar Table (blue frame near 20). Thank you for answer
Comment author mads Comment author email madstt<at>gmail.com Time Aug 18, 2008 10:34 GMT #29
Love the simplicity and look of this script. Is there any way I can use it for my travel agency website?
Comment author greg Comment author email gregson2<at>gmail.com Time Aug 18, 2008 08:35 GMT #30
Can I use ASP classic code instead of PHP???
Comment author Jlhs5 Comment author email adlaremse<at>gmail.com Time Aug 19, 2008 03:21 GMT #31
Fantastic Script, only a wish list , Holliday days from xml, json for disable or style change,
Comment author clint Time Aug 21, 2008 05:22 GMT #32
Hi,

Is it possible to use this on multiple form elements on the same page?
Comment author rcz Time Aug 23, 2008 09:10 GMT #33
is it possible to add close button on PickupCalendar window where month generated ?
Sure, calls the close() function of the instance.
Is it possible to show dates in Calendar pickup Dates grid where next dates more then current date? for example: today Aug 20 - show in grid all dates more Aug 20 - 21,22.... May be filter dates by cell color? Thank you for answer.
Not possible in this version. Could be. Good feature for next version.
How to block Calendar to force write current date in input value when date was given in form by post method? For example: I send to form page date =20-08-2008. When I show form element - I see current date in input filed (17-08-2008) but I see my date in Calendar Table (blue frame near 20). Thank you for answer
Again check documentation. Set the prefillDate option to false.
Love the simplicity and look of this script. Is there any way I can use it for my travel agency website?
Not with the current license. I could give you permission to use it, a donation would be appreciated Face: Laughing .
Can I use ASP classic code instead of PHP???
Nope. But a client side only version is being developed.
Is it possible to use this on multiple form elements on the same page?
Yups. Check documentations featurelist: 'Both normal and datepicker calendar can be instantiated multiple times'
Comment author Johnny Time Aug 29, 2008 02:02 GMT #34
You've one of the better calendars out there. Is there any chance of getting a license for commercial use of your calendar?
Comment author Kwil Time Sep 3, 2008 05:48 GMT #35
For information i had the same problem than Marc.
Undefined index:, Undefined variable, etc.

First of all, you shouldn't be using short tag not every webhoster activate it.
Furthermore, i had to modify your PHP script to make it works.
- On line 7 of month.php, i added a isset for pickedDate
- On line 14 of month.php, i added an @ didn't want to search to long for $_POST["ts"]
- And i added a $row=0; in vars.php.


Using PHP is an idea, not the best imho, but well if you want to stick with it you should try coding it correctly. I'm sure I do some errors in my code, but not those. And it's not by testing it on some server that it runs smoothly everywhere.

My 2 cents.
Comment author rcz Time Sep 6, 2008 06:20 GMT #36
You've one of the better calendars out there. Is there any chance of getting a license for commercial use of your calendar?
I'm not familiar with applying commercial licenses. I'll have to look into that.
For information i had the same problem than Marc.
Undefined index:, Undefined variable, etc.
[..]
And it's not by testing it on some server that it runs smoothly everywhere.

My 2 cents.
Thanks for your input. I've released a new version with minor PHP code changes. Should comply with E_STRICT standards now if default timezone is set.
Comment author sota Time Sep 14, 2008 09:49 GMT #37
Hello, your calendar/date picker is really great.
I have two questions:
-Is it possible to change language to french??
-Can i use php variable ($...) with prefillDate and how (explode ?), how i set prefillDate to false ?
Sorry for my questions and my poor english, i'm a french newbie...who need help
Thanks
Comment author rcz Time Sep 14, 2008 02:41 GMT #38
Hello, your calendar/date picker is really great. I have two questions: -Is it possible to change language to french?? -Can i use php variable ($...) with prefillDate and how (explode ?), how i set prefillDate to false ? Sorry for my questions and my poor english, i'm a french newbie...who need help Thanks
You can find all answers in the documentation, but here they are anyway Face: Glasses:

You can either call the calendar prefilling the data with javascript
  1. new vlaDatePicker('example', { prefillDate: { day: 12, month: 12, year: 2012 } });

Or set it to false and fill the input element value yourself.
  1. new vlaDatePicker('example', { prefillDate: false });

Language labels are changeable in inc/vars.php.
Comment author Pat Comment author email wakeman866<at>hotmail.com Time Sep 22, 2008 03:19 GMT #39
Hi, here is a sample of my code

## in the head ###
<script type="text/javascript" src="../scripts/calendar/jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="../scripts/calendar/jslib/vlaCal-v2.1.js"></script>
<link type="text/css" media="screen" href="../scripts/calendar/styles/vlaCal-v2.1.css" rel="stylesheet" />


window.addEvent('domready', function() {
//Datepicker
new vlaDatePicker('exampleI');
});
###

in the body

<input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10" />


The calendar pops but i only seea white square with nothing in it.
A javascript error says this.Arrowleft is null

can u help?
Comment author jfs Comment author email jefsoum<at>gmail.com Time Sep 24, 2008 10:03 GMT #40
Hello,
Your date picker is really great (the best I have found). Thank you !
I have a minor problem (bug ?) with it :
On your exemple page (http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html#examples)
if you use the TAB key to move from one field to the next (and so on), each calendar remains open, whereas if I change with the mouse, each calendar is closed correctly.
If you have a solution...
Thanks for your help.
Jef
Comment author Mike Time Sep 27, 2008 08:32 GMT #41
Did anyone figure out the problem that was causing the "this.parent is not a function" message?

I've got the same issue, but with FancyUpload2 by digitarald.

It obviously has something to do with mootools, but I have been going through the code as best I can (not very good) and I haven't been able to figure anything.

An example of the problem can be found here. http://brintech.net/modx/index.php?id=60
Comment author Gus Comment author email dthievin<at>yahoo.com Time Sep 29, 2008 10:34 GMT #42
I have tried for a full day to make this great-looking script work -- to no avail. I have amended and re-amended paths, studied all of the code, re-checked the installation instructions a dozen times, and searched for culprits in every crack. Obviously now I'm out of ideas and sure could use some help. Yes, my server is PHP enabled (5.x) My test form results in a blank text box with slashes, a bit of grey background, and the small calendar icon. That's it. There's never been any functionality, and unlike others who've posted above, there have never been any error messages.

Here are the essential code lines in the head of my document:

<script type="text/javascript" src="scripts/vlaCalendar/jslib/vlaCal-v2.1.js"></script>
<script type="text/javascript" src="scripts/vlaCalendar/jslib/mootools-1.2-core.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
});
</script>

<link rel="stylesheet" type="text/css" media="screen" href="scripts/vlaCalendar/styles/vlaCal-v2.1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="scripts/vlaCalendar/styles/vlaCal-v2.1-adobe_cs3.css" />
<link rel="stylesheet" type="text/css" media="screen" href="scripts/vlaCalendar/styles/vlaCal-v2.1-apple_widget.css" />

And the html:

<td valign="top"><span id="exampleIII">
<input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" />
<input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" />
<input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" />
<input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" />
<input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" />
<input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" />
 <img src="scripts/vlaCalendar/images/calendar.gif" alt="" name="togglePicker" width="13" height="12" class="pickerImg" id="togglePicker" /> </span></td>

I'm sure that my problem is something very simple. But if someone could only point it out, I'd be a very happy guy. Face: Happy
Comment author rcz Time Sep 30, 2008 10:47 GMT #43
Hi, here is a sample of my code
## in the head ### " [...] The calendar pops but i only see white square with nothing in it. A javascript error says this.Arrowleft is null can u help?
Something didn't load properly. My guess it that the PHP isn't loaded properly. Check what the AJAX calls return with Firefox and Firebug plugin.

Hello,
Your date picker is really great (the best I have found). Thank you !
I have a minor problem (bug ?)[..] TAB key to move from one field to the next (and so on), each calendar remains open, whereas if I change with the mouse, each calendar is closed correctly.
If you have a solution...Thanks for your help.
Jef
Thanks for the heads up. I'll put it on my to-do list
Comment author jrosell Time Oct 1, 2008 09:08 GMT #44
I need help for adding mysql information on Example V calendar. Hover or onlick is ok.
I expect you can help me...
Thanks in advance!
Comment author rcz Time Oct 1, 2008 11:43 GMT #45
I need help for adding mysql information on Example V calendar. Hover or onlick is ok. I expect you can help me... Thanks in advance!
Sorry can't provide any help with that. The vlaCalendar uses PHP and AJAX: you can edit these PHP files so its loads the necessary database data and change the HTML output.
Comment author jrosell Time Oct 2, 2008 06:06 GMT #46
Only if I could know how to add an onclick event on td elements to get dates...
Comment author jrosell Time Oct 2, 2008 08:38 GMT #47
OK. I found the following aproach fot that (not the best for sure)
Modify month.php and handle clickday function.

$eventsStr="{";
$result = mysql_query("SELECT * FROM eventos WHERE MONTH(fecha)='$ts_month_nr' and DAY(fecha)='$i' and YEAR(fecha)='$ts_year' ");
while($row = mysql_fetch_array($result)){
if($eventsStr!="{") $eventsStr.=",";
$eventsStr.="'".str_replace("'","\'","$row[fecha]<br>$row[asunto]<br>$row[hora]<br>$row[lugar]")."'
";
}
$eventsStr.="}";

echo '<td onclick="clickday(this)" eventsstr="'.$eventsStr.'" '.($i_ts == $pickedDate ? ' class="selected"' : '').' '."date=\"{'day': '".$i."', 'month': '".$ts_month_nr."', 'year': '".$ts_year."'}\">".$i.'</td>';
[...]

Any suggestion?
Comment author rcz Time Oct 2, 2008 10:23 GMT #48
Only if I could know how to add an onclick event on td elements to get dates...
You could and a onclick event via the PHP code on each td, like you have done. Every td has a json string stored in the property date. You could add your own data to this json string, or you could add the date directly inside the onclick function like clickday('data1', 'data2').
You could also modify the JS code and iterate all tds in the calendar and add a onclick event this way.
Comment author Gus Comment author email dthievin<at>yahoo.com Time Oct 6, 2008 06:26 GMT #49
Two questions:

Regardless that the date generated by this script is dd-mm-year, (e.g. 05-10-2008) the date sent to my form is always: day:05, month:10, year:2008, meaning three separate outputs. Is there a way to stop this in favour of the combined date?

I have two instances of the date picker on my form. I named the first one datePicker 1 / togglePicker 1, and the second one datePicker2 / togglePicker2. For some reason, only the date from one of these actually reaches the form. I've inspected my html and I find no explanation.
Comment author rcz Time Oct 6, 2008 08:34 GMT #50
Knowing the HTML code because we had email contact: the problem lays in the fact that the input elements have the same name. So change the first day input name to 'day1' and second day input name to 'day2'.

The ID's used to instantiate the calendar and make the calendar functionality work have nothing to do with the normal functionality of a HTML form. You are trying to do intermediate webdeveloping while you lack basic webdeveloping knowledge.
Comment author jefsoum Comment author email jefsoum<at>gmail.com Time Oct 9, 2008 07:29 GMT #51
[quote=jefsoum]Hello, Your date picker is really great (the best I have found). Thank you ! I have a minor problem (bug ?)[..] TAB key to move from one field to the next (and so on), each calendar remains open, whereas if I change with the mouse, each calendar is closed correctly. If you have a solution...Thanks for your help. Jef
Thanks for the heads up. I'll put it on my to-do list [/quote]I found a temporary solution to this problem, by adding a call to hide() method of the instance on the blur() event. :
  1. var vlac = new vlaDatePicker( 'agenda_date_debut', {
  2.     prefillDate: { day: 06, month: 10, year: 2008 },
  3.     filePath: '/vlaCalendar/'
  4. } ); 
  5. $('agenda_date_debut').addEvent('blur', function(){vlac.hide();}); 

Jef
Comment author Mumualex Comment author website mumualex.fr/s[...]version_1.ht Time Oct 10, 2008 01:13 GMT #52
Hey !
For Prototype/script.aculo.us users, I've developped this script compatible with Prototype 1.6 and script.aculo.us 1.8.1.
We can view examples and download it on http://mumualex.fr/scripts/vista-like_ajax_calendar_version_1.html.
Comment author Stephen Comment author email stebok<at>gmail.com Time Oct 17, 2008 02:54 GMT #53
Im having trouble implementing:

I want the page to reload with the date ($_GET) after they clicked the date, but I got a bit lost in the JS code, any help?
Comment author marc Time Oct 17, 2008 08:50 GMT #54
You could look in inc/month.php. You could add a link in each td and provide the timestamp. You could also add an onclick via the HTML.
Comment author Stephen Comment author email stebok<at>gmail.com Time Oct 19, 2008 04:57 GMT #55
Thanks Marc. I actually got it working!

But now I tested it on IE7 and I'm getting a nasty problem (surprised? its IE after all!)

http://stebok.com/files/ie.jpg

I dont understand what I should modify, I tried modifying a bit of CSS without luck. :(
Comment author boozter Time Oct 24, 2008 04:10 GMT #56
Thanks for this great calendar!

Is it possible with the vlaCalendar to activate the picker? I want the calendar to be always visible on my website (not only when you click an input element). When a date is picked i want the calendar to move to the selected date and not stay on the current date. Hope someone can help! Thanks Face: Laughing
Comment author Michael Time Nov 10, 2008 06:32 GMT #57
I am implementing the datepicker in a popup that is an extention of the jQuery library called facebox. Under FF everything runs great, but in IE the dates in the calendar are all shifted right the right outside of the normal border. Any ideas?
Comment author David Comment author email david.kennedy<at>hgaquest.com Time Nov 26, 2008 04:30 GMT #58
I am trying to run this calendar using asp.net version 2.0 using IE6 and Firefox.
I am having no success with this calendar. IE6 gives me an object expected error on the line with window.addEvent('domready', function() { initialize() }) ; and Firefox returns no error. Both browsers show six sunken boxes for the month, slash, day, slash, year, and a blank box, followed by a calendar icon. Clicking on the icon does nothing. But the sample from your site runs fine, so it's not a browser issue. What am I doing wrong?

It would be a nice touch to add a review comment button, but I digress...
I am using the following code:

<font color=blue>
<pre>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultVista.aspx.cs" Inherits="DefaultVista" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="vistacal/jslib/mootools-1.2-core.js"> </script>
<script type="text/javascript" src="vistacal/jslib/vlaCal-v2.1.js"> </script>
<link type="text/css" media=screen href="vistacal/styles/vlaCal-v2.1.css" />
<script type="text/javascript">
window.addEvent('domready', function() { initialize() }) ;
window.addEvent( 'domready',
function()
{
//datepicker
new vlaDatePicker('textbox-id');
//calendar
new vlaCalendar('block-element-id');
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
</pre>
</font>


Comment author David Comment author email david.Kennedy<at>hgaQuest.com Time Nov 26, 2008 06:05 GMT #59
I didn't have an include file called functions-v2.js, and so I added it in.

window.addEvent('domready', function() { initialize() }) , however, still gives me an error. Now the error is "Null is null or not an object". If I remove the line and try to run the script, I get "this.arrowLeft is not an object".

Any tips would be appreciated...
Comment author David Comment author email david.kennedy<at>hgaquest.com Time Nov 26, 2008 11:15 GMT #60
I got everything else to work except for the filePath on the vlaDatePicker. In order to get the calendar to run, I had to point the filePath to
[i][b]http://dev.base86.com/inc/specific/scripts/vista-like_ajax_calendar_version_2/inc/[\b][\i]

If I try to point it to my own /inc files that I downloaded, I don't get a calendar. What do I need to make it run correctly? Any help will be appreciated...
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Dec 5, 2008 06:48 GMT #61
Hi,

Been a long time. I can see you've got many fans since then :)

The portal of mine was about to be abandoned due to the recession, so I still can't show it to you, but in the end we'll finish it up (was almost done), but only for a while 'cause a new, up-to-date (mootools 1.2, many new features planned before for the old version, etc.) one is already during development. Thinking of this, lemme ask you again about bringing a new feature (I guess I mentioned it before) - the CNN calendar-like events.

The problem is it's no longer on the site since the president is elected. The only thing similar that I could find ad hoc is this little piece of awful shit:

http://www.phpjabbers.com/web-calendar/ - but you get the idea ;)

The only difference was (and should be) that events don't appear in a semi-transparent popup but simply replace month view with day view (with some nice day number in the background). And the "back / close" button should be in the bottom-right.

Think of it. Think of it hard :)

Kind regards,
h-a-r-v
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Dec 5, 2008 06:50 GMT #62
Oh.. and I think it should be xml-driven.
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Dec 10, 2008 09:17 GMT #63
Hi, just looking for a calendar like that but still no success :/ But I've found there's another possibility - tooltips. No need to do cnn-like thing (which still I find most awesome), but tooltips. Mootools basic plugin or some other script, not necessarily your implementation, so no effort nedeed from you. The thing is: no tooltips will work inside ajax, I guess.. (?) Do you see any possible solution? And how to differentiate days?
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Dec 24, 2008 08:07 GMT #64
Merry Xmass :)
Comment author markcassisa Comment author email marco.cassisa<at>studenti.unitn.it Time Dec 28, 2008 11:25 GMT #65
Hi.
I imported your very nice vlaCalendar 2.0 in a Joomla site.
Wondering how to go ahead and have, for each day displayed in the month view, a link to a specific page depending on the result of a sql query (using api of joomla).
should I run the query that collects all the data for the days in the joomla code and then pass them to the vlaCalendar object as an option? But how to know, from "outside" (i.e. from the file where the vlaCalendar is instantiated), which month is displayed?
thanks for any help and for the vlaCalendar too

mark
Comment author rcz Time Jan 3, 2009 02:08 GMT #66
Thanks for all your comments. I'm currently traveling in Australia (for 1,5 months already) and won't be able to do any work on the calendar. I'll probably create a totally new calendar with most of your additions.

Happy New Year! Face: Happy
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Jan 4, 2009 08:13 GMT #67
This is sooo coool news :) Have a nice trip and beware of low-pitch boomerangs ;)
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Jan 9, 2009 02:59 GMT #68
http://www.flashcomponents.net/component/flash_calendar_xml.html - I've just accidental found a far better flash event calendar. Would be perfect if not there wasn't any animation after clicking an event-day.. and if it wasn't flash ;)
Comment author Jeckle Time Feb 2, 2009 09:41 GMT #69
Hi, I really like this calendar/picker, esp the transitions. Ive read through your documention. Is there anything that will allow me to click and submit when I pick a date. Im using calendar V , which is just the calendar layout no date picker input.
Comment author Jonathan Comment author email pizzadude81<at>gmail.com Time Feb 22, 2009 07:09 GMT #70
Looks very nice. Is this tool also compatible with JQuery?
Comment author Jonathan Comment author website www.designbits.de Time Feb 22, 2009 07:10 GMT #71
Oh I see, it's not. Bummer :-(
Comment author Antonino Comment author email dibella.antonino<at>gmail.com Time Feb 23, 2009 07:11 GMT #72
Hi, i am a small Web Master, i want insert this script in a page of a site for a my customer...is possible to know how much will cost the commercial licence? (if you want to know the cost for my customer is 70€) please contact me with e-mail because i am today searching for others kind of script, and not remember all comments in all sites Face: Happy
Comment author aji Time Mar 4, 2009 09:09 GMT #73
hi. i just wanted to say that your ajax calender is great. i love the style and the effect it generates.

btw to use this calender in a sub folder (i.e.:yoursite.com/UseCalenderHere/) you just need to put a static path into filepath, which is used to access php files in vlaCal-v2.1.js. since i don't know js script so i use this one:
  1. 'filePath':'http://www.yoursite.com/inc/'
. if anyone (the developer perhaps? ^^) could come up with a more flexible code please do let us know.

again, thanks for the developer who created this awesome app.
Comment author Antonino Comment author email dibella.antonino<at>gmail.com Time Mar 10, 2009 04:18 GMT #74
Hi ajj, i dont understand very well what you want....
but this sentence in filepath you can insert also a relative path for example
  1. 'filePath': 'lib/inc/'


Face: Happy
Comment author aji Time Mar 18, 2009 08:52 GMT #75
@Antonio, yes the default script is in relative path as per you said. but if you try to use this script on sub folder, it won't work. in my knowledge if you use the relative path then "file path" will be looking for "php" files in the same folder where you put the js files.

for example you put the necessary calendar files on this dir: [http://www.yoursite.com/lib/inc/] and you used the relative path on "file path". now if you use the calendar on this page: [http://www.yoursite.com/calendar/cal1/index.php], this would make "file path" looked for php files on this folder [http://www.yoursite.com/calendar/cal1/inc/] and not to the directory designated. and for this reason i used static path on "file path" so i can use the calendar where ever i want :). i hope my writing making any sense
Comment author Jan Comment author website jan-ebsen.dk Time Mar 19, 2009 07:07 GMT #76
@Antonino, @aji

Use a forward-slash (/) in front of the relative path, ex:
"/lib/inc/"

That will it search from the root of the site, whereas "lib/inc/" will search from the current directory.
Comment author Sunny Comment author email sun.agas<at>gmail.com Time Mar 20, 2009 08:39 GMT #77
We have purchased Commercial License of the Calender by the name of " genesawyer@yahoo.com " and also have the PAYPAL receipt for the same .

Problem :

Ajax Calender addEvent('domready', function()) is called on body onload. When page is refreshed it is called perfectly and works. But when we call it in ajax page, ( for eg. after selecting dates - to query results dynamically without page refresh that time body is not loaded and and addEvent cannot load and calender does not work .

Can you kindly assist for the SAME asap !

Sunny
Comment author Sunny - Continuation of post 77 Comment author email sun.agas<at>gmail.com Time Mar 20, 2009 08:50 GMT #78
By does not work I mean , after the results of the query are shown without page refresh , I cant reselect the dates without refreshing the page as the calender appears to be stuck/not loaded.
Comment author samuel imbert Time Mar 23, 2009 10:03 GMT #79
Hi computer friends!
i've done some modification on your javascript calendar.

I've set a two new option which could be useful. Maybe you could integrate them in the next versions :

*The first to be able to select a month directly :
  1.             case 'year':             clickables.each(function(_clickable) {                 _clickable.onclick = function() {                          if(_class.selectMonth == 'true'){         var date = new Date();               date.setTime( parseInt(_clickable.getProperty('ts')) *1000 );                             var pickable = { day: date.getDate(), month: date.getMonth()+1, year: date.getFullYear() };                             _class.pick(pickable);                     }else{                             _class.u('month', 'ts=' + _clickable.getProperty('ts'), function() { _class.fade() })             }                     }         });      break;


* The second to add a onChange function :
  1. pick: function(_date) {         old_value = this.element.value;    //new part
  2.     if(this.leadingZero) {    if(_date.day < 10)   _date.day = '0' + _date.day;          if(_date.month < 10) _date.month = '0' + _date.month;   }       if(this.twoDigitYear) _date.year = _date.year.toString().substring(2, 4);          if(this.separateInput) {          if(this.element.day)   this.element.day.set('value', _date.day);       if(this.element.month) this.element.month.set('value', _date.month);    if(this.element.year)  this.element.year.set('value', _date.year);       this.hide();   } else {             switch(this.format) {         case "m/d/y": this.element.set('value', _date.month + this.separator + _date.day + this.separator + _date.year); break;         case "y/m/d": this.element.set('value', _date.year + this.separator + _date.month + this.separator + _date.day); break;         case "y/d/m": this.element.set('value', _date.year + this.separator +  _date.day + this.separator + _date.month); break;     case "d/m/y": default: this.element.set('value', _date.day + this.separator + _date.month + this.separator + _date.year);          }    this.hide();         }       
  3. //new part
  4.     if (this.onChangeFunction != '') {              if ((old_value != "") && (old_value != this.element.value)) {      eval(this.onChangeFunction);           }          }       }
Comment author samuel imbert Time Mar 23, 2009 10:16 GMT #80
and i've so added the two last options to the picker :
  1. var vlaDatePicker = new Class({     Extends: vlaCalendar,   
  2. 'separateInput': false, 
  3. 'prefillDate': true,    
  4. 'linkWithInput': true,  
  5. 'leadingZero': true,    
  6. 'twoDigitYear': false,  
  7. 'separator': '/',   
  8. 'format': 'd/m/y',  
  9. 'openWith': null,   
  10. 'alignX': 'right',  
  11. 'alignY': 'inputTop',   
  12. 'offset': { 'x': 0, 'y': 0 },   
  13. 'style': '',    
  14. 'ieTransitionColor' : '#ffffff',    'toggleDuration': 350,     
  15. 'onChangeFunction':'',  'selectMonth':'false',
Comment author Evgeny Pastrigan Comment author email evgen.pastrigan<at>mk.fischer-ski.com Time Apr 2, 2009 02:16 GMT #81
I was trying to install your script a few hours.
But I constantly receive an error:
ecmascript
http://10.30.0.32/
Unknown thread
Error:
name: SyntaxError
message: Statement on line 2773: Syntax error
Backtrace:
Line 2773 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
return eval('(' + string + ')');
Line 48 of linked script http://10.30.0.32/jslib/vlaCal-v2.1.js
var vars = JSON.decode(this.mainLoader.getElement('table').getProperty('summary'));
Line 34 of linked script http://10.30.0.32/jslib/vlaCal-v2.1.js
_class.initializeCalendarFunctions();
Line 100 of linked script http://10.30.0.32/jslib/vlaCal-v2.1.js
function(data) { element.set('html', data); _onComplete(); _class.loading = false; }
... Line 573 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
return self.apply(options.bind || null, args);
Line 578 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
return returns();
Line 1141 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
fn.create({'bind': this, 'delay': delay, 'arguments': args})();
... Line 1140 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
this.$events[type].each(function(fn){
Line 3557 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
this.fireEvent('complete', arguments).fireEvent('success', arguments).callChain();
Line 3553 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
this.onSuccess(this.processScripts(text), xml);
Line 3535 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
this.success(this.response.text, this.response.xml);
... Line 573 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
return self.apply(options.bind || null, args);
Line 578 of linked script http://10.30.0.32/jslib/mootools-1.2-core.js
return returns();
...
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

Here is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
<link type="text/css" media="screen" href="styles/vlaCal-v2.1.css" rel="stylesheet" />
<link type="text/css" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" rel="stylesheet" />
<link type="text/css" media="screen" href="styles/vlaCal-v2.1-apple_widget.css" rel="stylesheet" />
<script type="text/javascript">
window.addEvent('domready', function() {
//Datepicker
new vlaDatePicker('exampleI');
//Calendar
new vlaCalendar('cal', { startMonday: true })
});
</script>

</head>

<body>
<input id="exampleI" type="text" style="width: 80px;" maxlength="10" />
<div class="vlaCalendar" id="cal">Content for class "vlaCalendar" id "cal" Goes Here</div>
</body>
</html>


What can be wrong?
Comment author Dimitry Comment author email dsn7287<at>hotmail.com Time Apr 24, 2009 08:30 GMT #82
Hiya mate,
I have small problem with this script. The problem pertains to the use of IE8 (latest version, all up to date). The calendar loads fine and everything, however the arrows that help you navigate the date picker dont work. This is the same on YOUR examples too. I load http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html#examples, on Firefox and everything is fine, but in IE8, th navigation does not work. Any ideas? Any help would be very much appreciated.

Cheers
Comment author wie bali Comment author email noexyoga<at>gmail.com Time Apr 27, 2009 07:08 GMT #83
thanks for great scripts ...!
i wanna ask how to make validate scripts...!
checkin date - chekin out
on mya site Get bali villas general reservation

please help meFace: Crying
Comment author Christiaan Comment author email christiaan<at>depoort.nl Time May 14, 2009 10:27 GMT #84
There's a bug in IE8. It's not possible to use the arrows to switch between year overviews (e.g. 1999 to 2010). When enabling compatability mode it does work again. Haven't looked into it yet but I think it'll be a minor fix.
Comment author christiaan@depoort.nl Comment author email christiaan<at>depoort.nl Time May 14, 2009 03:55 GMT #85
The problem described above with IE8 can be solved but updating vlaCal-v2.1.css:

  1. .vlaCalendar .arrowLeft, .vlaCalendar .arrowRight {
  2.     background: transparent url('/layout/images/vlaCal/arrowleft.gif') no-repeat center;
  3.     height: 12px;
  4.     width: 10px;
  5.     cursor: pointer;
  6.     position:relative;
  7. }


position:relative; did the trick
Comment author Kay Time Jun 2, 2009 07:00 GMT #86
I am having major trouble understanding this....how exactly do i get the results from the date chosen to use them?

for example if someone chose sept 1 2009 from the calendar how do i then use that date in pages or in my datebase?

Thank you so much for the help. i really desperate!
Comment author Ibntel Comment author website www.ibntel.com Time Jun 29, 2009 11:56 GMT #87
[http://www.ibntel.com]http://www.ibntel.com[/url]
Each year, Americans spend billions of dollars on long distance phone service. By some estimates, at least one-fifth of that amount is wasted on excessive charges. Fortunately, by making smart decisions regarding long distance plans, consumers can avoid wasting hard earned dollars.
Ibntel

Add comment

Your name
Your email or website (optional)
Icon
Confirmation code
Confirmation code
Message
face:happy face:glasses face:devilgrin face:crying face:grin face:laughing face:sad face:kiss face:shocked face:wink face:monkey face:angel