Client-side only extension for vlaCalendar v2.1

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
Download Vista-Like Ajax Calendar Client-side only extension (.rar)5.8 kB .rar
Download Vista-Like Ajax Calendar Client-side only extension (.zip)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:

  1. <script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
  2. <script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
  3. <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.

Author rcz Time Sep 6, 2008 Comment on 'Client-side only extension for vlaCalendar v2.1' Add comment Bookmark 'Client-side only extension for vlaCalendar v2.1' Bookmark Permalink to 'Client-side only extension for vlaCalendar v2.1' Permalink
Bookmark 'Client-side only extension for vlaCalendar v2.1' to Netvouz Bookmark 'Client-side only extension for vlaCalendar v2.1' to Facebook Bookmark 'Client-side only extension for vlaCalendar v2.1' to Furl Bookmark 'Client-side only extension for vlaCalendar v2.1' to Technorati Bookmark 'Client-side only extension for vlaCalendar v2.1' to Stumble Upon Bookmark 'Client-side only extension for vlaCalendar v2.1' to Digg Bookmark 'Client-side only extension for vlaCalendar v2.1' to Del.icio.us

Comments (18)

Comment author zeineath Time Sep 8, 2008 02:58 GMT #1
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
Comment author Jem Comment author email jemjabella86<at>gmail.com Time Sep 29, 2008 01:45 GMT #2
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
Comment author C Kras Comment author email christiaan<at>depoort.nl Time Sep 30, 2008 03:01 GMT #3
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.
Comment author rcz Time Sep 30, 2008 10:58 GMT #4
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.
Comment author Konstantinos Time Oct 1, 2008 10:07 GMT #5
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?
Comment author rcz Time Oct 1, 2008 11:40 GMT #6
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.
Comment author C Kras Comment author email christiaan<at>depoort.nl Time Oct 2, 2008 04:35 GMT #7
Thanks rcz. It works fine now.
Comment author Konstantinos Comment author email mythodeia<at>gmail.com Time Oct 3, 2008 09:33 GMT #8
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
Comment author rcz Time Oct 6, 2008 08:39 GMT #9
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.
Comment author js2 Time Oct 24, 2008 02:04 GMT #10
Great work! Very like this scripts. Face: Happy

Thanks and keep going to improve it better!

LGBJST
Comment author molask Comment author email manuel.molaschi<at>openmindonline.it Time Oct 29, 2008 05:21 GMT #11
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
Comment author parapapat Time Nov 4, 2008 04:25 GMT #12
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!!
Comment author Matt Comment author email matt<at>elitespeeddating.co.uk Time Nov 5, 2008 04:39 GMT #13
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...
Comment author paced Time Nov 14, 2008 09:44 GMT #14
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
Comment author paced Time Nov 14, 2008 09:53 GMT #15
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..
Comment author BlackRussian Comment author email nekromad<at>gmail.com Time Nov 18, 2008 04:08 GMT #16
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
  1. onchange = this.element.getAttribute("onchange");
  2.             if (onchange)
  3.                 eval(onchange);


i add this at line 303 in vlaCal-v2.1.js. hope this helps someone. again great work.
Comment author Dado Time Nov 18, 2008 03:55 GMT #17
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
Comment author Dado Time Nov 18, 2008 03:56 GMT #18
(whoops) ...to do that, or at least some of it. Would that be OK? Face: Grin

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