Jquery Integration of AJAX Calendar

Help with installation and general calendar setttings

Re: Jquery Integration of AJAX Calendar

Postby blisken » Wed Apr 13, 2011 10:39 am

HI Shawn or Chris

Great work on the jquery section!

I just want to ask if you got this to work with the updating of the calendar! It works and displays the calendar but i cant book dates! ( calendar losses its clicking functionality when i convert it to jquery!)

how does it work with the booking side of things?

Did i miss a step or does this not work? ( im referring to the admin section )

Thanks so much, look forward to your reply!
blisken
 
Posts: 2
Joined: Wed Apr 13, 2011 10:35 am

Re: Jquery Integration of AJAX Calendar

Postby chris » Wed Apr 13, 2011 10:47 am

Hi,
The jQuery code that I provided is only for the front-end version of the calendar which, by default, does not have any click capabilities.

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 blisken » Wed Apr 13, 2011 1:28 pm

Hi Chris

Thanks for the reply!

I am no guru in jquery but i know enough to do most of the changes!
I have already made the calendar click-able and updates the db and so on.

Im just busy fighting the animation and changes to classes when a state is changed.

The minute im done with that, ill upload a updateded version of the file here.

Once again, im no pro in it only in php, but i will have a working version on the admin section up here later today! Then maybe you can just tweet things iv missed.

Thanks, nice to contribute to your script that will be helping me in the future!
blisken
 
Posts: 2
Joined: Wed Apr 13, 2011 10:35 am

Re: Jquery Integration of AJAX Calendar

Postby Rokain » Mon May 02, 2011 8:22 pm

Hi Blisken,

I have the same problem as you mentioned, could you please tell me what changes you made too make the "Admin Calendar" click-able again?

Thanks in advance.
Rokain
 
Posts: 1
Joined: Mon May 02, 2011 5:44 pm

Re: Jquery Integration of AJAX Calendar

Postby chris » Tue May 03, 2011 12:38 pm

Hi,
I don't know what Blisken's code is like but here is my jQuery version of the admin js file:
Code: Select all
$(document).ready(function() {
   var totMonths=$('.load_cal').length;
   if ( totMonths>0 ){
      $('.load_cal').each(function(index){
         var el=$(this);
         var data=el.attr('id').split('_');
         load_calendar(el,data[0],data[1],index,totMonths);
      });
      //   once drawn, make calendars clickable
      activate_dates();
   }
   $('.cal_nav').css('cursor', 'pointer');
});
//   load calendar for month and year
function load_calendar(el,month,year,counter,totMonths){
   $(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(){
         if(counter==(totMonths-1)){
            calendar_nav();
         }
      }
   });
}

//   calendar navigation buttons
function calendar_nav(){
   // show buttons
   $('.cal_nav').show();
   
   // BACK button
   $('.cal_prev').unbind('click').click(function (event) {
      //prev_button();     
      event.stopPropagation();
      event.preventDefault();
      
      // hide nav buttons
      $('.cal_nav').hide();
      
      // get months to move
      var months_to_show=parseFloat($(this).parent().parent().attr('rel'));
      
      // loop through each month
      $(this).parent().parent().children('.the_months').children('.load_cal').each(function(index){
         
         // 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,index,months_to_show);
      });
      return false;
   });
   
   // NEXT button
   $('.cal_next').unbind('click').click(function (event) {
      event.stopPropagation();
      event.preventDefault();
      
      // hide nav buttons
      $('.cal_nav').hide();
      
      // get months to move
      var months_to_show=parseFloat($(this).parent().parent().attr('rel'));
      
      // loop through each month
      $(this).parent().parent().children('.the_months').children('.load_cal').each(function(index){
         // get first child element which now contains the "real" month and year
         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,index,months_to_show);
      });
      //$('.cal_next').show();
      return false;
   });
   
   //   once drawn, make calendars clickable
   activate_dates();
}

//   make the dates clickable
function activate_dates(){
   //   define clickable (dates)
   var clickables=$('li.clickable').css('cursor', 'pointer');
   
   clickables.mouseover(function() {
       $(this).css({ 'opacity' : 0.7 });
   }).mouseout(function(){
      $(this).css({ 'opacity' : 1.0 });
   });

   
   clickables.unbind('click').click(function (event) {
      var elID=$(this).attr('id');
      var id_pre_state="";
      //   check for default new state if defined
      if($('#id_predefined_state')){
         id_pre_state=$('#id_predefined_state').val();
      }
      $.ajax({
          type: "GET",
         url: ""+url_ajax_update+"",
           data: {
              'id_item':id_item,
              'the_date':elID,
              'lang':lang,
              'id_state':id_pre_state
           },
            context: $(this),
           beforeSend:function(){
              // clean date of all classes
              $(this).removeClass();
              // show loading
              $(this).html('<img src="/calendar/ac-contents/themes/default/images/ajax-loader-day.gif">')
           },
           success: function(response){
            //   split response to get class,date and desc
            tmp=response.split('|');
            //   add returned class
            $(this).addClass(tmp[0]);         
            //   change title to reflect new state
            $(this).attr('title',''+tmp[1]+' - '+tmp[2]+'');
           },
           complete:function(){
              // put day number back
              $(this).html($(this).attr('rel'));
           }
      });
      
   });
}

Feel free to use the whole lot or extract from that what you need :)

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 kuczora » Sat Jul 23, 2011 6:30 pm

Hi Chris,

Just wanted to confirm that this Jquery admin code still doesn't completely remove the dependence on mootools.

For example - the drag-to-sort functionality on the other admin screens?

Can you provide any idea of what would be involved in getting a "pure" Jquery version of the code?

I'm happy to do some hacking about, but any pointers from you would be gratefully received.
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Previous

Return to Support

Who is online

Users browsing this forum: No registered users and 5 guests

cron