我怎么能一起制作彩色盒和全日历

Question

我在同一页面上使用 fullcalendar 和 colorbox 。 由于fullcalendar，Colorbox没有工作，我使用了jQuery.noConflict（）;但仍然没有colorbox工作我替换了colorbox iframe链接 （日历可用性）在datepicker-calendar div之外，它起作用了。 问题是我需要将日历上的colorbox iframe链接作为id为datepicker-calendar的div的子项。请参阅图片链接和以下代码。

我该如何使这项工作？任何帮助，将不胜感激。提前感谢您的建议。

image link

<form id="reservation_frm" class="reservation_frm" action="validate.php" method="post">
<div class="form_row clearfix">
<label>Check-In date<span class="required">*</span></label>
<div id="date-range">
<div id="date-range-field"><span></span><a href="">&#9660;</a></div>
<div id="datepicker-calendar"><a class="cbox" href="calendar.php"></a>
<input type="hidden" name="side_check_in_date" id="side_check_in_date" value=""/>
</div>
</div>  
</div>  
</form>


<script type="text/javascript" src="wp-content/plugins/Booking-system/js/datepicker.js">
</script><script type="text/javascript" src="wp-content/plugins/Booking-system/js/fullcalendar.min.js"></script>
<script type="text/javascript">
var $date_picker = jQuery.noConflict();
$date_picker(document).ready(function() {
    var from = new Date();
    var to = new Date(from.getTime() + 200 * 60 * 60 * 24 * 14);
    $date_picker('.reservation_frm #datepicker-calendar').DatePicker({
        inline: true,
        calendars: 1,
        mode: 'range',
        current: new Date(to.getFullYear(), to.getMonth()+1, 1),
        onChange: function(dates,el) {
         var chk_in_month = dates[0].getMonth()+1;
          var chk_out_month = dates[1].getMonth()+1;

         var first_date = dates[0].getFullYear()+'-'+chk_in_month+'-'+dates[0].getDate();
         var second_date = dates[1].getFullYear()+'-'+chk_out_month+'-'+dates[1].getDate();

         var d = new Date();
         var from_date_validation = d.setDate(d.getDate()-1);

         if(first_date == second_date)
         {
            $date_picker("#next_step").prop('disabled',true);
            $date_picker('.reservation_frm #date-range-field span').text('Invalid date');
            $date_picker('#side_check_in_date').val('');
            $date_picker('#side_check_out_date').val('');
         }else if(dates[0] < from_date_validation || dates[1] < from_date_validation){
            $date_picker('.reservation_frm #date-range-field span').text('Invalid date');
            $date_picker('#side_check_in_date').val('');
            $date_picker('#side_check_out_date').val('');
          }else{
            var chk_in_month = dates[0].getMonth()+1;
            var chk_out_month = dates[1].getMonth()+1;
            $date_picker('.reservation_frm #date-range-field span').text(dates[0].getDate()+' '+dates[0].getMonthName(false)+' - '+
                                            dates[1].getDate()+' '+dates[1].getMonthName(false));
            $date_picker('#side_check_in_date').val(dates[0].getFullYear()+'-'+chk_in_month+'-'+dates[0].getDate());
            $date_picker('#side_check_out_date').val(dates[1].getFullYear()+'-'+chk_out_month+'-'+dates[1].getDate());
            $date_picker("#next_step").prop('disabled',false);
          }                             
         }
       });
       $date_picker('.reservation_frm #date-range-field span').text('Select Date');
       $date_picker('.reservation_frm #date-range-field').bind('click', function(){
         $date_picker('.reservation_frm #datepicker-calendar').toggle();
         if($date_picker('.reservation_frm #date-range-field a').text().charCodeAt(0) == 9660) {
         } else {
         }
         return false;
       });
       $date_picker('html').click(function() {
         if($date_picker('.reservation_frm #datepicker-calendar').is(":visible")) {
           $date_picker('.reservation_frm #datepicker-calendar').hide();
         }
       });
       $date_picker('.reservation_frm #datepicker-calendar').click(function(event){
         event.stopPropagation(); // IF I REMOVE THIS COLORBOX WORKS!!!
       });

       $date_picker("#close_cal").click(function(){
           $date_picker('.booking_small_widget .reservation_frm #datepicker-calendar').hide();
       });
 });


</script>   


<script src="<?php bloginfo('template_directory'); ?>/skins/js/jquery.colorbox.js"></script>
<script type="text/javascript" language="javascript">
var $calendar = jQuery.noConflict();
$calendar(document).ready(function() {

$calendar(".cbox").colorbox({iframe:true, width:"80%", height:"80%"});
});

</script>

Answer 1

我忘了告诉。如果我删除行event.stopPropagation（）;彩盒和日历都有效。但我不确定删除这一行。