Jquery Integration of AJAX Calendar

Help with installation and general calendar setttings

Jquery Integration of AJAX Calendar

Postby Shawn » Fri Sep 24, 2010 7:09 pm

Hello, I have used this calendar on acouple sites now and really like it. The one thing I didn't like was that I develop with jQuery and the Calendar used MooTools. So I decided to Convert the main Java Script File to Work with jQuery. This may or may not work in Every Case as I modifyed some of the PHP if you have a problem with it, I will post my modifyed PHP that you will need. This is a basic Conversion and the only reason I'm releasing it is because Chris has helped me in the past and I noticed this was on his TODO List. So Here is the File, Make sure you include Jquery 1.4.2 and This File Afterwards and everything should work. I would appreciate it if my name and site were left in the header.

Shawn
S-ViZiOn Web Development
Eagle Web Designs

Code: Select all
/*
File: jquery-cal-public.js
Author: shawn@s-vizion.com
Script: availability calendar
Version: 3.03
Url: http://www.ajaxavailabilitycalendar.com
Date Created: 2009-07-20
Date Modified: 2010-09-22

This script is created to use Jquery instead of MooTools,  I have only modifyed the javascript and nothing else.
If you need Custom Javascript or any Web Development Work Done please contact me at shawn@s-vizion.com

*/



//   load calendar for month and year
function load_calendar(el,month,year)
{
  $(el).html('<img class="img_loading_month" src="'+img_loading_month+'">');
 
 $.ajax({
      url: url_ajax_cal,
      global: true,
      type: "GET",
      cache: false,
      data: ({'id_item':id_item,'month':month,'year':year,'lang':lang}),
      dataType: "html",
      async   :false,
      success : function(data)
      {
        $(el).html(data);
        var nid = month + '_' + year;
        $('div.cal_month').attr('id',nid);
        $('.load_cal').removeClass('load_cal');
        return false;
      },
      complete: function(){ calendar_nav(); }
      });
     
/*         
   if(clickable_past=="off")
   {
            $('#the_months .past').each(function(index, el) { $(el).css('opacity','0.6'); });
   }
*/

}

//   make the dates clickable
function activate_dates(){
   //    add custom events here - eg to update booking form
}

function prev_button()
{
  var el        = $('div.cal_month');
  var this_date = $(el).last().attr('id');
  var data      = this_date.split('_');
 
  //   convert to numeric
  cur_month   = parseFloat(data[0]);
  new_year    = parseFloat(data[1]);
 
  new_month=(cur_month-months_to_show);
 
  if(new_month<1)
  {
   //   reset month and add 1 year
     new_month=(new_month+12);
     new_year=(new_year-1);
  }
 
  load_calendar(el,new_month,new_year);

}

function next_button()
{
  var el        = $('div.cal_month');
  var this_date = $(el).last().attr('id');
  var data      = this_date.split('_');
 
  cur_month   = parseFloat(data[0]);
  new_year    = parseFloat(data[1]);
 
         
  new_month=(cur_month+months_to_show);
  if(new_month>12)
  {
   //   reset month and add 1 year
   new_month=(new_month-12);
   new_year=(new_year+1);
  }
  load_calendar(el,new_month,new_year);
 
}


//   calendar navigation buttons
function calendar_nav(){

  $('#cal_prev').css('cursor', 'pointer');
  $('#cal_next').css('cursor', 'pointer');
     
  $('#cal_prev').unbind("click").click(function (event) {
      prev_button();     
      event.stopPropagation();
      event.preventDefault();
      return false;
    });

  $('#cal_next').unbind("click").click(function (event) {
      next_button();
      event.stopPropagation();
      event.preventDefault();
      return false;
    });
 
         //   once drawn, make calendars clickable
      activate_dates();
}

$(document).ready(function() {

         
  if ( $('.load_cal').length>0 )
  {
    $('.load_cal').each(function(index, el)
    {
      var this_date=$(el).attr('id');
      var data=this_date.split('_');
      load_calendar(el,data[0],data[1]);
      calendar_nav();
    });
   
   
      //   once drawn, make calendars clickable
    activate_dates();
  }
});
Shawn
 
Posts: 8
Joined: Sat Apr 17, 2010 9:26 pm

Re: Jquery Integration of AJAX Calendar

Postby chris » Sat Sep 25, 2010 6:18 pm

Thanks for this Shwan.
I actually have clients waiting for this but I simply haven't had time to do the JQuery version - the downside of being a busy developer ;)

I have not had a chance to test this code but if you say it works.... ;)

Thanks again,

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Jquery Integration of AJAX Calendar

Postby Shawn » Sun Sep 26, 2010 1:15 am

NP Chris, you've offered support when I needed it and I really wrote it just for abit of a challenge honestly, PHP work is boring when u do it daily. The only thing that might not work on your stock calendar install is that I put the nav buttons inside of the cal_title div. But as long as they are classed the same as before with the prev and next it will find them. If anyone finds a bug in it let me know and I'll see if I can fix it but so far Its worked pretty well in all the browsers I tested it in.

Shawn
Shawn
 
Posts: 8
Joined: Sat Apr 17, 2010 9:26 pm

Re: Jquery Integration of AJAX Calendar

Postby chris » Wed Nov 03, 2010 10:24 pm

I have just had the chance (need) to use the calendar with jQuery rather than Mootools so I decided to give your code ago.
I must admit that I ran into a few problems, possibly due to the jQuery version (I was using version 1.3.2 from the Google code librarby) or maybe due to the changes that you had made to your version of the calendar.
Anyway, I got it working and thought that I would paste my version of your code here in case anyone runs into the same problems.
Note - I used the following code with the calendar straight out of the box i.e. with no changes made to it.
Code: Select all
$(document).ready(function() {
      if ( $('.load_cal').length>0 ){
         $('.load_cal').each(function(){
            var el=$(this);
            //load_calendar(this,el.attr('month'),el.attr('year'));
            var data=el.attr('id').split('_');
               load_calendar(el,data[0],data[1]);
            calendar_nav();
         });
         
         //   once drawn, make calendars clickable
         activate_dates();
      }
   });
   //   load calendar for month and year
    function load_calendar(el,month,year){
      $(el).html('<img class="img_loading_month" src="'+img_loading_month+'">');
      $.ajax({
         url: url_ajax_cal,
             global   : true,
             type      : 'GET',
             cache      : false,
             data      : ({'id_item':id_item,'month':month,'year':year,'lang':lang}),
             dataType   : 'html',
             async      : true,
             success    : function(data){
               $(el).html(data);
               return false;
             },
             complete   : function(){
                calendar_nav();
             }
      });
   }

    //   make the dates clickable
    function activate_dates(){
       //    add custom events here - eg to update booking form
    }
   
   //   calendar navigation buttons
    function calendar_nav(){
      $('#cal_prev').css('cursor', 'pointer');
      $('#cal_next').css('cursor', 'pointer');
         
      $('#cal_prev').unbind('click').click(function (event) {
         prev_button();     
         event.stopPropagation();
         event.preventDefault();
         return false;
      });

      $('#cal_next').unbind('click').click(function (event) {
         next_button();
             event.stopPropagation();
         event.preventDefault();
         return false;
      });
      
      //   once drawn, make calendars clickable
      activate_dates();
   }
   
   // move calendar back
    function prev_button(){
      $('.load_cal').each(function(){
         // get first child element which now contains the "real" month and year
         var el=$(this).children(":first");
         var data=$(this).children(":first").attr('id').split('_');
         
         //   convert to numeric
         cur_month   = parseFloat(data[0]);
         new_year   = parseFloat(data[1]);
         
         // define new month and year
         new_month=(cur_month-months_to_show);
         if(new_month<1){
            //   reset month and add 1 year
            new_month=(new_month+12);
            new_year=(new_year-1);
         }
         load_calendar($(this),new_month,new_year);
      });

   }
   
   // move calendar forward
   function next_button(){
      $('.load_cal').each(function(){
         // get first child element which now contains the "real" month and year
         var el=$(this).children(":first");
         var data=$(this).children(":first").attr('id').split('_');
               
         //   convert to numeric
         cur_month   = parseFloat(data[0]);
         new_year   = parseFloat(data[1]);
         
         // define new month and year   
         new_month=(cur_month+months_to_show);
         if(new_month>12){
            //   reset month and add 1 year
            new_month=(new_month-12);
            new_year=(new_year+1);
         }

         load_calendar($(this),new_month,new_year);
      });
    }

I am no jQuery expert but do suspect that this could be optimized further but for now it will have to do :)

Thanks again for sharing your code with the forum.

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Jquery Integration of AJAX Calendar

Postby RaPhiuS » Wed Dec 01, 2010 2:29 am

Hi Chris,

I just personnally wanted to thank you for having created such a beautiful and easy to use calendar! That was the tool i was looking for and that for ages...

Also greetings as well to Shawn for starting the JQuery move and yes Chris, your jquery-cal-public.js works. I ran into couple of issues with the first one.

Be assured that I will make a donation for creating such a beautiful piece of software and keep up the good work! If you ever need beta testers, I'm your man! ;-)

Cheers!
RaPhiuS
RaPhiuS
 
Posts: 3
Joined: Wed Dec 01, 2010 2:21 am

Re: Jquery Integration of AJAX Calendar

Postby chris » Thu Dec 02, 2010 10:35 am

Hi and thanks for your comments RaPhiuS,

I'm glad that you like the calendar and that you where able to use the jQuery version (mine was an adjustment of Shawn's as his had some custom code that didn't work with the "original" version).

I look forward to the donation ;)

Thanks again,

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Jquery Integration of AJAX Calendar

Postby RaPhiuS » Sat Dec 04, 2010 6:33 pm

Hi Chris,

I just made the donation right now. Please confirm good reception :)

Have a good day!

Best regards,
RaPhiuS
RaPhiuS
 
Posts: 3
Joined: Wed Dec 01, 2010 2:21 am

Re: Jquery Integration of AJAX Calendar

Postby RaPhiuS » Sat Dec 04, 2010 6:33 pm

Also, I am currently adding some languages extension, I will post them as soon they are done sp you can extend the language coverage of you plugin.
RaPhiuS
 
Posts: 3
Joined: Wed Dec 01, 2010 2:21 am

Re: Jquery Integration of AJAX Calendar

Postby chris » Sat Dec 04, 2010 7:54 pm

Hi there,
Yes, thanks, I have just received your dontation. Thanks very much for that it is greatly appreciated!

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Jquery Integration of AJAX Calendar

Postby Shawn » Mon Apr 11, 2011 6:43 am

It's been awhile since I had to make another calendar, but I'm glad I got the ball rolling on the jQuery changes :) Thanks for fixing the one I posted Chris as mine was very customised ( Think I only afew of your original files and wiped the Admin section of it since I build custom sites they all have custom admin centers )

But anyway Excellent Script Chris

Shawn Crigger
S-Vizion Web Development
http://www.s-vizion.com
Shawn
 
Posts: 8
Joined: Sat Apr 17, 2010 9:26 pm

Next

Return to Support

Who is online

Users browsing this forum: No registered users and 3 guests

cron