Client-side only extension for vlaCalendar v2.1

Sep 6, 2008 •

The initial vlaCalendar was developed for use with database data. So the calendar uses AJAX calls to PHP parsed documents. This made the calendar only usable for users who have a PHP server.

Huy Do and I developed an extension that makes the vlaCalendar AJAX-less, and thus PHP-less: the client-side only extension for vlaCalendar v2.1.

Download

Client-side only extension v1.0.1
for vlaCalendar v2.1.x

5.8 kB
.rar

6 kB
.zip

Usage

This extension extends the normal vlaCalendar with AJAX-less functionality, and offers the same features as the original vlaCalendar: so first download and install vlaCalendar version 2.1. You can delete the PHP files which reside in the inc/ directory.

After installing vlaCalendar v2.1 place the extension javascript files with the other files in the directory jslib/. Include the javascript file

vlaCal-v2.1-clientside.js
OR
vlaCal-v2.1-clientside-compressed.js

within the head of your HTML document, after the original vlaCalendar included javascript file (vlaCal-v2.1.js).

Your head code should look something like this:

<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" src="jslib/vlaCal-v2.1-clientside.js"></script>

Include either the compressed or normal version of the file. The normal version contains whitespace and comments useful for developing purposes.

Add comment ↓

Comments (49)

zeineath

Sep 8, 2008

And here we are with a friend of mine thinking of converting the calendar to clientside just now.... Thanks a lot! Was really hoping we could already use this really cool tool for our projects.. Face: Wink

Jem

Sep 29, 2008

Hi - great script here, it's exactly what I'm looking for. Only problem is, I need to implement the calendar on a commercial website. Face: Crying

Do you have any plans to release it under a license that allows use in this manner and/or have an optional license fee?

I'm desperate for a script as good as yours so if you're willing to discuss the possibility of this being used in a commercial setting please do contact me as soon as possible Face: Happy

C Kras

Sep 30, 2008

Hi. Great tool!

I've discovered a rather anoying bug in Firefox 2.0.0.17. I wanted to mail it to you but I couldn't find a contact address.

When I haven't set a default date and I open te datepicker it selects the current date (30 sept. 2008), which of course is correct.

However, if I select one of the greyed dates that is in the same row as dates of the current month (in the example 1 to 4 October) it returns the year 108, instead of 2008. The only settings I use are

separator: '-',
leadingZero: true

Weird thing is that it doesn't happen with your examples. It works fine in Internet Explorer 7.

rcz

Sep 30, 2008

Hi. Great tool!
I've discovered a rather anoying bug in Firefox 2.0.0.17. I wanted to mail it to you but I couldn't find a contact address.
When I haven't set a default date and I open te datepicker it selects the current date (30 sept. 2008), which of course is correct.
However, if I select one of the greyed dates that is in the same row as dates of the current month (in the example 1 to 4 October) it returns the year 108, instead of 2008. The only settings I use are
separator: '-', leadingZero: true
Weird thing is that it doesn't happen with your examples. It works fine in Internet Explorer 7.

It seems the client-side only plugin had a bug: a wrong date functions was used in the first outside days row. You can download the new version of the client-side plugin; version v1.0.1.
Thanks for reporting the bug fellow dutchman Face: Happy

Konstantinos

Oct 1, 2008

Hello, great work by the way.
I have a problem using the calendar.
everything works great but on the input type="text" that i am using it i have a onchange event. However this event does not get fires when i use the calendar. can you help me?

rcz

Oct 1, 2008

Hello, great work by the way. I have a problem using the calendar. everything works great but on the input type="text" that i am using it i have a onchange event. However this event does not get fires when i use the calendar. can you help me?

Onchange function doenst get fired if the element value is set by javascript.
You'll need to fire it manually: add "this.element.onchange()" in the vlaDatepicker.pick function.

C Kras

Oct 2, 2008

Thanks rcz. It works fine now.

Konstantinos

Oct 3, 2008

Thank you for taking the time to answer.
In which file should i add it to?You mean the
vlaCal-v2.1.js?
i see a function near line 285 :
pick: function(_date) {.....
because i am just learning javascript can you point out where exactly should i place it and if i should just write what you told me this.element.onchange() or anything more?

thank you very much again

rcz

Oct 6, 2008

Thank you for taking the time to answer. In which file should i add it to?You mean the vlaCal-v2.1.js? i see a function near line 285 : pick: function(_date) {..... because i am just learning javascript can you point out where exactly should i place it and if i should just write what you told me this.element.onchange() or anything more? thank you very much again

Yes, vlaCal-v2.1.js.
this.element refers to the input element in which the date is in. So if you want to fire the onchange of that element you will need to call it manually with this.element.onchange(). The best is if you put it at the end of the function pick.
Developing is trial and error so play around.

js2

Oct 24, 2008

Great work! Very like this scripts. Face: Happy

Thanks and keep going to improve it better!

LGBJST

molask

Oct 29, 2008

Hi, I also need (like jem) to implement the calendar on a commercial website.

Can you contact me for discussing a custom license (under payment?)

Thank you a lot

parapapat

Nov 4, 2008

Hi, very nice work!! But I'm a little lost, because I'm new... I'm working with struts, an I would like to use your calendar, but I don't know if I need AJAX or anything else, because I can't get your calendar running... I will appreciate very much any help. Thank you!!

Matt

Nov 5, 2008

Yes, this is nice indeed...

I am trying to use it in a admin secetion on my website and want it in the osx style, but when I add the style it stays as the default one.

Everything else works fine appart from that. The only change I have made is I put everything in a folder called /mootools. I have changed the dirs for everything and the functions and default style all work and display,

Any ideas please?

Thanks, Matt...

paced

Nov 14, 2008

Hi,

This calendar is damn nice! This is the best good looking calendar I could find on the net. Thanks for this script! I've been exploring this nice script half day long until I understand how to get use of the options and arguments.

However, Ajax request to PHP pages could turn down the beauty of this calendar when I use a slow internet connection. I rather go for the client-side extension of this. But the thing is, I couldn't get the calendar working using this extension. No content shows up as I toggle the datepicker. I really need to use this client-side extension instead of the AJAX request. Perhaps you can come out with a demo page for this extension.

Thanks again,
paced

paced

Nov 14, 2008

Oopsy..

In addition to my comment above, to ensure the script with the client-side extension is really not reading the PHP files, I have deleted the '/inc' folder and then the disappearing content started.

Thanks..

BlackRussian

Nov 18, 2008

This is great work i have been looking for a PHP calendar that works like ASP.NETs Ajax calendar for some time now. a note on the onchange event.if you use this.element.onchange(). you will get an error in FireFox. a safer way is to use teh following code

onchange = this.element.getAttribute("onchange");
			if (onchange)
				eval(onchange);

i add this at line 303 in vlaCal-v2.1.js. hope this helps someone. again great work.

Dado

Nov 18, 2008

Hi, I really like your datepicker's navigation, it's well thought of, kudos on that, but I'd like to see some features:

- ability to constraint dates, for example "must be in the future" or "must be (prior to|later then) date x/y/z"

- ability to bind to another date so we can have a start date / end date functionality (end must not be before start, this is related to the above wish)

- simple timepicker! Face: Happy

- custom format (for example, yyyy-mm-dd HH:MM:SS, needed for the timepicker)

As I'm rather good in MT, I'd like to modify your script to

Dado

Nov 18, 2008

(whoops) ...to do that, or at least some of it. Would that be OK? Face: Grin

Adam

Nov 21, 2008

I don't know what I've missed here, but I just can't get this to work. I'm trying it on the example html file included with the download.

I have unzipped the vlaCal-v2.1.1 into its own folder, deleted the inc/ folder, and copied in the client side files to the jslib folder. Then I've included the clientside file after the vlaCal-v2.1.js file. No worky though. Clicking the text fields does nothing, and produces no error.

Can anyone please upload a zip of the package with the example file working with this clientside script? Would be a great help!

Werner

Dec 9, 2008

Hi!

Do you plan to introduce the ability to link two calendars together, to allow end-users to select start and end dates in a linked-calendar fashion?

Also, please advise on commercial usage of the class, maybe I overlooked it on your site?

ehab

Dec 15, 2008

hi

i will add my voice to [ Dado ]'s comment #17 it will really be perfect for databound coding.

thanks for any consideration

Christiaan Kras

Dec 17, 2008

Found another bug. But somehow I'm unable to reproduce it. I selected 31-12-2008, but the year was altered to 2009, so instead I got 31-12-2009 returned.

Christiaan Kras

Dec 17, 2008

Never mind. My fault, I screwed up with locales

Ricardo

Dec 24, 2008

Hi there,

I'm trying to put up a new site with some free and other commercial options.

Can I use this?

Thanks
Ricardo
ricardo dot nuno dot rodrigues aaat hotmail dot com

Angelo

Dec 31, 2008

I've seen that today 31/12/2008 the client side don't work well.

Tommy

Jan 3, 2009

Hi,
I would like to ask, if it is possible to use the example 3 in order to click on a single day and save the result somewhere

tommy

Jan 3, 2009

sorry,

thought example 5

FMS

Jan 22, 2009

Quick question...

I'm using this inside of an update panel and it is working correctly.

I have a search button that binds a gridview's contents according to the selected start/end dates (both start and end inputs are set by the vlaCalendar).

Once I databind the gridview, the vlaCalendar stops working until the page is refreshed....is this due to the partial post back? Should I be adding something to the search event handler?

Thanks in advance...

FMS

Jan 22, 2009

Nevermind the previous post...I believe the DOM doesn't reload when the input is inside the update panel. I took the input fields outside of the updatepanel and it is behaving as expected.

Jonathan

Jan 27, 2009

HOLA, COMO PUEDO OBTENER LAS FECHAS DE DICHOS CAMPOS...?
Y MOSTRARLOS POR EJEMPLO EN UN ALERT();

PORFIS AYUDENME... :(

pero

Jan 30, 2009

Today my calendar shows two Mar months, instead of Feb and Mar :-) I will leave to you the pleasure of discovering where is the bug (hint: mkdate).

exocety

Jan 30, 2009

Hi

I 've the same bug ! It is impossible to show the February month where the selected year is not a leap year ??
On January month, When i want to click to the next month, i skip February month and go to March !!! And after, i is impossible to go back, the calendar is blocked on March...
That appears only when i use the client-side (not the ajax version) and when the clock of my computer system is on january

Could you make a new version of this JS without his bug ?

exocety

Jan 30, 2009

I confirm that the bug appears only when the date is between 28 and 31 of each month !!!

Thanks in advance

pero

Jan 30, 2009

Bug also appears at any 31st day of month - next month will not be!

pero

Jan 30, 2009

Fix (unofficial, of course):

In vlaCal-v2.1-clientside-v1.0.1.js change:
...
if($defined(year)) date.setYear(year);
if($defined(month)) date.setMonth(month);
if($defined(day)) date.setDate(day);
...

into:
...
if($defined(year)) date.setFullYear(year, month, day);
...

exocety

Jan 30, 2009

THANKS !!! it seems to work !

Å½an

Mar 10, 2009

Hello.
First, i'd like to thank you for this amazing piece of JS / HTML . It's really great!

But, i want to do something (a popup when you click on a date, dynamic JS popup with details about the day) and I would like to know what to use instead of 'document.getElementById("element").style.display="block"'

I can't get it to show or hide anything. What should I use or how should I do it?

Thanks in advance, Å½an (slovenia).

Å½an

Mar 10, 2009

Forgot to mention, I know that there is PHP code inside it and i'm changing the onclick on dates in month.php, but i can't get the
'document.getElementById("element").style.display="block"'
to work.

Sorry for double post, Å½an.

Å½an

Mar 10, 2009

(Triple post, sorry, but gotta share this with noobies like me)
Hello, found a solution for the problem...
getElement('div[class=elementsclass).style.display='none'

..and that's how to hide it.

C Kras

Mar 31, 2009

There are some serious issues with this version of the vlaCalendar. Try selecting a date in april 2009... It just isn't there. Months are messed up, e.g. it shows the following months for 2009: Jan, Mar, Mar, May, May, Jul, Jul, Aug, Oct, Oct, Dec, Dec.

I'm going to fall back to the PHP version.

ehab

Apr 3, 2009

@ christiaan<at>depoort.nl
i can select any date in April, everything is fine.

i am just wondering what will be the future for this calendar. a lot of potential but needs time to features so on ... i am thinking to really get my hands dirty with it and see what i end up with

C Kras

Apr 6, 2009

Maybe it's fine now, but when trying it in on March 31st all was messed up. So I had to switch back to the PHP version. Which isn't a very big deal, although I don't really like it how it needs to use AJAX to get it's date, as this version *almost* works perfect without PHP.

Juan

Jun 1, 2009

Hola. Tengo un problema si muevo las carpetas images, inc, jslib y styles a una subcarpeta. Me muestra el cuadro, pero no me carga las fechas. Porfavor, si pudieran ayudarme con esto. Tengo el archivo en /index.php, y las carpetas fueron movidas a /lib/calendar/

Rob V

Jun 2, 2009

Great Calander.
One great improvement would be to have an option to allow allow dates in the future.
Also - allow an offset of the current date displayed. Ie - I want the date to default to tomorrow, currently I just set prefillDate to false and fill it in w/ a PHP var.

But only allowing future dates would be great!

Yosh

Jun 4, 2009

I know it says it can work on IE6 and IE7, but when I use IE8 the navArrows don't work. Everything else seems to work. Any fix?

yosh

Jun 10, 2009

When I go to print the page, all the calendar views also print...any way to hide then for printing?

Developer

Jul 3, 2009

This calendar does not work in IE8. Null pointer in Ajax version. Any fix available?

Yosh

Jul 30, 2009

RE: working in IE8. I can get it to work if you put the browser in Compatibility View.

Juan

Aug 4, 2009

Hi,
The script work ok, but exist an error with "Client-side only extension v1.0.1" when the current date is day 29, 30, or 31 because clicking in the calendar, the month February will not be shown.

March is printed twice.