This snippet for the wordpress facetwp plugin is used to group the two facets (start and end) generated by the date_range facet when "Fields to show" is set to "Start + End Dates".

facetwp_date_range_in_single_calendar.php

<?php
add_action( 'wp_footer', 'facetwp_date_range_in_single_calendar',100);

function facetwp_date_range_in_single_calendar() {
?>
    <script>
      (function($) {
        if ( 'undefined' !== typeof FWP ) {

          FWP.hooks.addFilter('facetwp/set_options/date_range', function(flatpickr_opts, extras) {

            var parent = $(extras.element).closest('.facetwp-type-date_range');

            // We're in a "Start + End Dates" situation.
            if ( parent.find('.facetwp-date').length > 1 ){

              // Dates prior to today are disabled.
              flatpickr_opts['minDate'] = "today";
              flatpickr_opts['mode'] = "range";

              flatpickr_opts['onChange'] = function(dateObj, dateStr, instance){
                // When the start_date and end_date are filled in
                if (dateObj.length>1) {
                  if ( $(instance.element).closest('.facetwp-type-date_range').length > 0 ){
                    parent.find('.facetwp-date-min').attr('value',flatpickr.formatDate(dateObj[0], 'Y-m-d'));
                    parent.find('.facetwp-date-max').attr('value',flatpickr.formatDate(dateObj[1], 'Y-m-d'));
                    // We launch the ajax search if we haven't disabled the auto refresh.
                    if( FWP.auto_refresh ){
                      FWP.autoload(); 
                    }
                  }
                }
              };

              flatpickr_opts['onReady'] = function(dateObj, dateStr, instance){

                if ( $(instance.element).hasClass('facetwp-date-max') ){
                  // We modify the behavior of the end_date facet
                  instance.destroy();
                  $(instance.element).attr({
                    'type':'hidden',
                    'readonly':'readonly'
                  });
                  $(instance.element).closest('.facetwp-type-date_range').addClass('date_range_min_and_max');
                }else{
                  var datefin = parent.find('.facetwp-date-max').attr('value');
                  if ( datefin != '' ){
                    datefin = flatpickr.parseDate(datefin, "Y-m-d");
                    dateObj.push(datefin);
                    instance.setDate(dateObj);
                  }
                  // Normal behaviour
                  var clearBtn = '<div class="flatpickr-clear">' + FWP_JSON.datepicker.clearText + '</div>';
                  $(clearBtn).on('click', function() {
                    instance.clear();
                    // Clear end_date field
                    parent.find('.facetwp-date-max').attr('value','');
                    instance.close();
                    if( FWP.auto_refresh ){
                      FWP.autoload(); 
                    }
                  })
                  .appendTo($(instance.calendarContainer));
                }
              };

            }
            return flatpickr_opts;
          });

        }
      })(jQuery);
    </script>
<?php
}

// This part of the CSS can be used to complete the above code.

/*
.facet .facetwp-type-date_range.date_range_min_and_max .flatpickr-alt{
  width:100%;
}
.facet .facetwp-type-date_range.date_range_min_and_max::before{
  display:none;
}
*/

can you please tell me? how to show 2 more coming month calendars like the current month oct and the next two months Nov & Dec. Please help me I'm stuck.

With flatpickr, you can use the « showMonths » option. You can add it on line 20 :
flatpickr_opts['showMonths'] = 3;

i have tried but not working .my code is below please check,

<script> (function($) { FWP.hooks.addFilter('facetwp/set_options/date_range', function(flatpickr_opts, extras) { flatpickr_opts['showMonths'] = 3; return flatpickr_opts; }); })(jQuery); </script>

Can you share the link of the site where I can see the facets? What is the version of the FacetWP plugin on your site?

I am using facetwp Version 4.0.4

Since version 3.8, FacetWP does not use the FlatPickr library anymore, but a custom library that does not allow the display of more than one month.

If you still want to use FlatPickr, you'll have to create a custom facet_type... (date_range_flatpickr for example)