Databases
StackOverflow2013
Postsdbo
POhow can I make work colorbox and fullcalendar together
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow can I make work colorbox and fullcalendar together
    primarykey
    data
    text
    <p>I am using <strong><em>fullcalendar</em></strong> and <strong><em>colorbox</em></strong> at the same page. Colorbox didn't work because of fullcalendar and I used jQuery.noConflict(); but still colorbox didn't work I replaced the colorbox iframe link (CALENDAR AVAILABILITY) out of the datepicker-calendar div and it worked. The problem is I need the colorbox iframe link on the calendar as a child of div with id datepicker-calendar. Please see the image link and the codes below.</p> <p>How can I make this work? Any help would be appreciated. Thanks in advance for your suggestions.</p> <p><a href="http://img96.imageshack.us/img96/4406/lob7.png" rel="nofollow noreferrer">image link</a></p> <p><img src="https://i.stack.imgur.com/mkvEv.png" alt="enter image description here"></p> <pre><code>&lt;form id="reservation_frm" class="reservation_frm" action="validate.php" method="post"&gt; &lt;div class="form_row clearfix"&gt; &lt;label&gt;Check-In date&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt; &lt;div id="date-range"&gt; &lt;div id="date-range-field"&gt;&lt;span&gt;&lt;/span&gt;&lt;a href=""&gt;&amp;#9660;&lt;/a&gt;&lt;/div&gt; &lt;div id="datepicker-calendar"&gt;&lt;a class="cbox" href="calendar.php"&gt;&lt;/a&gt; &lt;input type="hidden" name="side_check_in_date" id="side_check_in_date" value=""/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;script type="text/javascript" src="wp-content/plugins/Booking-system/js/datepicker.js"&gt; &lt;/script&gt;&lt;script type="text/javascript" src="wp-content/plugins/Booking-system/js/fullcalendar.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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] &lt; from_date_validation || dates[1] &lt; 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(); }); }); &lt;/script&gt; &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/skins/js/jquery.colorbox.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript"&gt; var $calendar = jQuery.noConflict(); $calendar(document).ready(function() { $calendar(".cbox").colorbox({iframe:true, width:"80%", height:"80%"}); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTushar Gupta
    1. UShijacker83
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow can I make work colorbox and fullcalendar together
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload