calendar plugin that works inside cluetip

Question

Is there any calendar that works inside the cluetip i have used jquery ui calendar and many other calendar they work very fine out side the cluetip but when ever it call inside the cluetip it dint work

Please help thanx in advance

<div class="calendar_button"> <a class="cal_box" href="#calendar" rel="#calendar">
        <div class="calendar_side_buton_icon"></div>
        <span>Calendar</span> </a> </div>
      <!-- close photo button -->

      <div class="displaynone" id="calendar">
        <div class="modalbox_header">
          <div class="modalbox_header_icon calen_icon"></div>
          <div class="modalbox_header_txt">Calendar</div>
        </div>
        <!-- close modalbox header -->
        <div class="modalbox_content">
          <div class="cal_container">
            <div class="cal_view">
            <div id="datepicker"></div>
              <div class="caln_header">
                <div class="caln_header_left"></div>
                <div class="caln_header_center">
                  <div class="left_keyring"></div>
                  <div class="right_keyring"></div>

check i have so many divs.

It seems to me that jQuery UI Datepicker works OK. See for yourself: http://jsbin.com/owaset/1 — core1024, Jan 30 '13 at 09:52
use sticky:true u will be able to stop the datepicker but that will not work check this http://jsbin.com/owaset/3/edit — rohitarora, Jan 30 '13 at 10:07
True, but just, because I made it that way. See after little edit: http://jsbin.com/owaset/5 — core1024, Jan 30 '13 at 10:08
i know it selects the date but the problem in changing month.which is the actuall problem i am facing — rohitarora, Jan 30 '13 at 10:11

score 1 · Accepted Answer · answered Jan 30 '13 at 11:05

1

As now I know your problem, I came with (a bit hacky) solution. You can see it here:

$('.cluetip-trigger').cluetip({
  local: true,
  showTitle: false,
  width: '305px',
  sticky: true,
  onShow: function(ct, ci){
    this.calendar = $('<div>').datepicker({
      onSelect: function(dateText, inst) {
        alert('You\'ve selected '+dateText);
      }
    }).appendTo(ci);
  },
  onHide: function(ct, ci){
      this.calendar.datepicker( "destroy" ).remove();
  }
});

answered Jan 30 '13 at 11:05

core1024

1,882
15
22

`$('a.cal_box').cluetip({local:true, hideLocal: true ,onShow: function(ct, ci){ this.calendar = $('
').datepicker({ onSelect: function(dateText, inst) { alert('You\'ve selected '+dateText); } }).appendTo(ci); }, onHide: function(ct, ci){ this.calendar.datepicker( "destroy" ).remove(); }, sticky: true, arrows: true, cursor: 'pointer',width:970, height:530}); ` dint worked for me
– rohitarora Jan 30 '13 at 11:36
Here's your code (second link) in JSBin: http://jsbin.com/owaset/8 and (at least in my browser) it works... – core1024 Jan 30 '13 at 11:46
please check my question i have so many divs inside and the releation of cluetip with calendar id `` but i have to display inside datepicker id `
` and i can not chane the relation to datepicker as there are too many stuff connected to it. i appreciate you help please and thanx in advace – rohitarora Jan 31 '13 at 04:45
but you th life saver :) – rohitarora Jan 31 '13 at 05:01

calendar plugin that works inside cluetip

1 Answers1