98

VlaCalendar version 2.1 released

ajax javascript vista calendar mootools datepicker vlacalendar compatible
Jul 2, 2008 •

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.
Update October 11, 2009: VlaCalendar's successor, Calendar Eightysix released

Add comment +

Comments (98)

Carlo Veltri
Jul 2, 2008
How can i use it in my wordpress sidebar?
rcz
Jul 2, 2008
How can i use it in my wordpress sidebar?
Good idea to make a Wordpress plugin of it. I'll look into it.
dway
Jul 5, 2008
Big, big thank you.
Best DatePicker I've found.
mellow_bunny
Jul 10, 2008
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 
<?=
instead of 
<?php
.

I had to change them all to <?php for the script to run correctly.
rcz
Jul 10, 2008
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.
Evan Meagher
Jul 17, 2008
Awesome! I have been patiently awaiting this for MooTools 1.2 and it's the best out there!

Thanks so much for everything!
Artem Nezvigin
Jul 18, 2008
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.
rcz
Jul 19, 2008
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.
ksl
Jul 20, 2008


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.
ksl
Jul 20, 2008
sorry, misprint... I can't run script unfortunately :-( Could you explain please what I doing wrong ?
rcz
Jul 21, 2008
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.
ksl
Jul 21, 2008
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 ?
ksl
Jul 21, 2008
I changed css path - Calendar works fine. :-)
ksl
Jul 21, 2008
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
rcz
Jul 21, 2008
Change your doctype to a XHTML variant like: 
<!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
ksl
Jul 22, 2008
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
Marc
Jul 29, 2008
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
ana
Aug 1, 2008
hi!
can i use ASP files instead of PHP files?
Michael
Aug 7, 2008
Hello,

I use this code : 


<!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" xml:lang="fr" >
   <head>
       <title>Welcome</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<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" />

		<script language="javascript">

		window.addEvent('domready', function() {
			    new vlaDatePicker('exampleIV-B', { style: 'apple_widget', offset: { x: 3, y: 1 } });
		});
				
				

		</script>
   </head>
   <body>
     <input id="exampleIV-B" type="text" style="width: 80px;" maxlength="10" />
   </body>
</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
Michael
Aug 7, 2008
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 !
Web Design Glasgow
Aug 9, 2008
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
NT
Aug 11, 2008
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.
ksl
Aug 15, 2008
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.
rcz
Aug 15, 2008
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.
ksl
Aug 15, 2008
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 });
ksl
Aug 15, 2008
is it possible to add close button on PickupCalendar window where month generated ?
ksl
Aug 17, 2008
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.
ksl
Aug 17, 2008
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
mads
Aug 18, 2008
Love the simplicity and look of this script. Is there any way I can use it for my travel agency website?
greg
Aug 18, 2008
Can I use ASP classic code instead of PHP???
Jlhs5
Aug 19, 2008
Fantastic Script, only a wish list , Holliday days from xml, json for disable or style change,
clint
Aug 21, 2008
Hi,

Is it possible to use this on multiple form elements on the same page?
rcz
Aug 23, 2008
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'
Johnny
Aug 29, 2008
You've one of the better calendars out there. Is there any chance of getting a license for commercial use of your calendar?
Kwil
Sep 3, 2008
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.
rcz
Sep 6, 2008
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.
sota
Sep 14, 2008
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
rcz
Sep 14, 2008
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 
new vlaDatePicker('example', { prefillDate: { day: 12, month: 12, year: 2012 } });

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

Language labels are changeable in inc/vars.php.
Pat
Sep 22, 2008
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?
jfs
Sep 24, 2008
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
Mike
Sep 27, 2008
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
Gus
Sep 29, 2008
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
rcz
Sep 30, 2008
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
jrosell
Oct 1, 2008
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!
rcz
Oct 1, 2008
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.
jrosell
Oct 2, 2008
Only if I could know how to add an onclick event on td elements to get dates...
jrosell
Oct 2, 2008
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?
rcz
Oct 2, 2008
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.
Gus
Oct 6, 2008
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.
rcz
Oct 6, 2008
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.
jefsoum
Oct 9, 2008
[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. : 
var vlac = new vlaDatePicker( 'agenda_date_debut', {
	prefillDate: { day: 06, month: 10, year: 2008 },
	filePath: '/vlaCalendar/'
} ); 
$('agenda_date_debut').addEvent('blur', function(){vlac.hide();});

Jef
Mumualex
Oct 10, 2008
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.
Stephen
Oct 17, 2008
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?
marc
Oct 17, 2008
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.
Stephen
Oct 19, 2008
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. :(
boozter
Oct 24, 2008
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
Michael
Nov 10, 2008
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?
David
Nov 26, 2008
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>


David
Nov 26, 2008
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...
David
Nov 26, 2008
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...
h-a-r-v
Dec 5, 2008
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
h-a-r-v
Dec 5, 2008
Oh.. and I think it should be xml-driven.
h-a-r-v
Dec 10, 2008
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?
h-a-r-v
Dec 24, 2008
Merry Xmass :)
markcassisa
Dec 28, 2008
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
rcz
Jan 3, 2009
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
h-a-r-v
Jan 4, 2009
This is sooo coool news :) Have a nice trip and beware of low-pitch boomerangs ;)
h-a-r-v
Jan 9, 2009
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 ;)
Jeckle
Feb 2, 2009
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.
Jonathan
Feb 22, 2009
Looks very nice. Is this tool also compatible with JQuery?
Jonathan
Feb 22, 2009
Oh I see, it's not. Bummer :-(
Antonino
Feb 23, 2009
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
aji
Mar 4, 2009
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: 
'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.
Antonino
Mar 10, 2009
Hi ajj, i dont understand very well what you want....
but this sentence in filepath you can insert also a relative path for example 
'filePath': 'lib/inc/'


Face: Happy
aji
Mar 18, 2009
@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
Jan
Mar 19, 2009
@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.
Sunny
Mar 20, 2009
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
Sunny - Continuation of post 77
Mar 20, 2009
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.
samuel imbert
Mar 23, 2009
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 : 
			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 : 
pick: function(_date) {
  	    old_value = this.element.value;
   	//new part
	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();
 		}    	
//new part
	if (this.onChangeFunction != '') {
  			if ((old_value != "") && (old_value != this.element.value)) {
  				eval(this.onChangeFunction);
  			}
  		}
   	}
samuel imbert
Mar 23, 2009
and i've so added the two last options to the picker : 
var vlaDatePicker = new Class({ 	Extends: vlaCalendar,  	
'separateInput': false, 
'prefillDate': true, 	
'linkWithInput': true, 	
'leadingZero': true, 	
'twoDigitYear': false, 	
'separator': '/', 	
'format': 'd/m/y', 	
'openWith': null, 	
'alignX': 'right', 	
'alignY': 'inputTop', 	
'offset': { 'x': 0, 'y': 0 }, 	
'style': '', 	
'ieTransitionColor' : '#ffffff', 	'toggleDuration': 350, 	
'onChangeFunction':'', 	'selectMonth':'false',
Evgeny Pastrigan
Apr 2, 2009
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?
Dimitry
Apr 24, 2009
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
wie bali
Apr 27, 2009
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
Christiaan
May 14, 2009
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.
christiaan@depoort.nl
May 14, 2009
The problem described above with IE8 can be solved but updating vlaCal-v2.1.css: 

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


position:relative; did the trick
Kay
Jun 2, 2009
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!
Vachan Kudmule
Jul 30, 2009
Thank you such an amazing script!

Face: Shocked But is it possible to limit selection of date, only for future.

I mean the dates before "Today" should be disabled.
Vachan Kudmule
Jul 30, 2009
Thank you such an amazing script!

Face: Shocked But is it possible to limit selection of date, only for future.

I mean the dates before "Today" should be disabled.
Ate
Aug 24, 2009
ie8 fix: add a  in the div of the arrow left and right
Ate
Aug 24, 2009
hehe this editor converts my html non-breaking space into a space. So the fix is

ie8 fix: add a *&nbsp ;* in the div of the arrow left and right
walther
Sep 8, 2009
Looks very nice. Is this tool also compatible with JQuery?
chris
Sep 10, 2009
hi, i've the same problem from Marc (Undefined index)
Notice: Undefined index: pickedDate in C:\wamp\www\script\vlaCalendar\inc\year.php on line 8

Notice: Undefined index: m_ts in C:\wamp\www\script\vlaCalendar\inc\decade.php on line 21

could you help me please ? thanks and thanks for your job :d
kerim
Sep 12, 2009
hi i also have some problem like chris's problem, could somebody help us? thanks
Svetoslav
Sep 24, 2009
Working link:
[omitted]

Admin edit:
Download link working again:
http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html#download
Svetoslav
Sep 24, 2009
1. I can\'t dowload the script:
Warning: include_once(../dev/inc/header.php) [function.include-once]: failed to open stream: No such file or directory in C:\\domains\\base86.com\\wwwroot\\download\\index.php on line 4

Warning: include_once() [function.include]: Failed opening \'../dev/inc/header.php\' for inclusion (include_path=\'.;/PHP5/pear\') in C:\\domains\\base86.com\\wwwroot\\download\\index.php on line 4

Fatal error: Call to a member function query() on a non-object in C:\\domains\\base86.com\\wwwroot\\download\\index.php on line 6

2. If I copy example page of the script with editing links to the needed files. I got an error:
this.arrowLeft is null or not an object
Neo
Nov 4, 2009
I have a problem in my script when i use this
parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;

Index File name ="index.php"

<iframe name="cont" width="80%" height="250" src="test.php" style="" scrolling="no" frameborder="0" display="none"></iframe>
<div style="padding:0px;" id="main_div" align="center"></div>

--------------------------------------------

Example File name ="test.php"

<script language="JavaScript" type="text/JavaScript">
function load_content () {
if(parent.document.getElementById('main_div')){ parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
}
if(!parent.document.getElementById('main_div')){
window.location=('index.php') ;
}
}
</script>
<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">
window.addEvent('domready', function() {
new window.vlaDatePicker("exampleI");
});
</script>
<div id"inner_frame"/>
<input id="exampleI" name="date" type="text" style="width: 80px;" maxlength="10"/>
</div>

--------------------------------------------------

A problem is ".innerHTML"

When i set iframes display="",
in iframes a calendar is work
but in div id="main_div" a calendar don't working.

Please help me. and,
Sorry for my bad English.
Indika
Jan 20, 2010
How could i pass this date value with submit button onclick even like, onclick="jsfunction(datepicker.value)"
Liebeskugeln
Feb 13, 2010
thanks for this nice tool!

Add comment

Message
Name
Confirmation code
Confirmation code