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.

Answer 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();
  }
});