Jscalender module come with Jstools package in drupal 5 you can download drupal jstools package from the drupal.org site.Jscalender uses the jsCalendar javascript library, like using a special CSS class called via #attribute in the form element array to convert textfields into jcalendar enabled.

The jcalendar module uses hook_form_alter() to look for textfields with the add-jcalendar class, I had to use something different than jcalendar which is used later on the generated form elements by the jQuery code.

This is a sample of how to enable jcalendar from one of your textfields once you’ve installed the module:

To include a jscalendar popup with a textfield, just add the class ‘jscalendar’:(from readme.txt)

$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
);

To change the default display and functionality of the calendar, set startup
parameters by adding selectors to your element. The three configurable options
are ‘ifFormat’ (the format of the date/time written to the text field),
’showsTime’ (boolean: should time be displayed on the calendar), and
‘timeFormat’ (values of ‘12′ for 12-hour clock, which is the default, or ‘24′
for 24-hour clock).

Example:
$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
// Use only year, month, and day in textfield.
‘#jscalendar_ifFormat’ => ‘%Y-%m-%d’,
// Don’t show time.
‘#jscalendar_showsTime’ => ‘false’,
// Show 24-hour clock.
‘#jscalendar_timeFormat’ => ‘24′,
);

$form['firstdate'] = array(
‘#type’ => ‘textfield’,
‘#title’ => ‘The first date’,
‘#default_value’ => ‘2007-09-29′,
‘#weight’ => -20,
‘#attributes’ => array(’class’ => ‘add-jscalendar’),
‘#description’ => t(’YYYY-MM-DD’),
);

The #jcalendar_year_range custom property allows you to provide a range of years, look at the associative array $years, to show in the calendar. If the property is not passed jcalendar.module defaults to the current year plus 20.

#jcalendar_plot_dates, which is not working yet, should allow passing an array of dates to the calendar to plot. I’m not sure if this should be the job of the Drupal module or jCalendar’s jQuery code.

This first version of jcalendar.module works, it converts your textfield to three select boxes, day, month, year, and a nice table based date picker, easy to theme via CSS, and once you have the right date you can do whatever you want with it. The original textfield is removed later so your form validation and processing functions should consider if jcalendar is enabled (a simple if (module_exists(’jcalendar’))) to handle form elements in a different way.

Tags: Hacking, Javascript, Jquery, Programming, Scripting by admin
No Comments »

The jquery is a simple and quick to use javascript library and provides a
rich set of functionality in just few lines of code.The $ symbol is also set up as
a shortcut for jQuery.If you want the convenience of the $ function for jQuery without colliding with some other use of the global $ function, the jQuery documentation suggests the following idiom:

(function($) {
    // Within this block, $ is a reference to jQuery
    // Neat, and clean
})(jQuery);

Referring elements of document in jquery code.
jQuery(’div.panel’)
    All divs with class=“panel”
jQuery(’p#intro’)
    The paragraph with id=“intro”
jQuery(’div#content a:visible’)
    All visible links inside the div with id=“content”
jQuery(’input[@name=email]‘)
    All input fields with name=“email”
jQuery(’table.orders tr:odd’)
    “odd” numbered rows in a table with class “orders”
jQuery(’a[@href^="http://"]‘)
    All external links (links that start with http://)
jQuery(’p[a]‘)
    All paragraphs that contain one or more links  if (t.val() == title) {
              t.val(”);
              t.removeClass(‘blur’);

$(‘input:text‘).hint();

var title = t.attr(‘title’);
    // only apply logic if the element has the attribute
    if (title) {
      // on blur, set value to title attr if text is blank
      t.blur(function (){
        if (t.val() == ”) {
          t.val(title);
          t.addClass(‘blur’);
        }
      });
      // on focus, set value to blank if current value 
      // matches title attr
      t.focus(function (){
        if (t.val() == title) {
          t.val(”);
          t.removeClass(‘blur’);
        }
      });
t.parents(‘form:first()’).submit(function(){
  if (t.val() == title) {
    t.val(”);
    t.removeClass(‘blur’);
  }
})

$(‘#search, #username, input.hint’).hint(); // etc

 <!--adsensestart-->

Tags: Javascript, Jquery, Scripting by admin
No Comments »