As jQuery UI is part of Drupal 8 core for the calendar functionality you can simply do this:
modulename.libraries.yml
modulename.id:
version: VERSION
js:
js/custom.js: {}
dependencies:
- core/jquery
- core/jquery.ui.datepicker
custom.js
function ($, Drupal) {
"use strict";
Drupal.behaviors.mymodule = {
attach: function(context) {
$('#views-exposed-form-id
input:text').datepicker();
}
};
})(jQuery, Drupal);
To query for data between event starts & end date you can use hook_view_query_alter();
modulename.module
use \Drupal\views\Plugin\views\query\QueryPluginBase;
use \Drupal\views\ViewExecutable;
function modulename_views_query_alter(ViewExecutable $view, QueryPluginBase $query) {
if ( $view->id() !== "view_id" ) { return; }
foreach ($query->where as &$condition_group) {
foreach ($condition_group['conditions'] as $index => &$condition) {
if (!empty($view->exposed_raw_input['start']['min']) && !empty($view->exposed_raw_input['start']['max'])) {
$query->addWhereExpression(0,'FROM_UNIXTIME(tablename.created, :format ) BETWEEN :min AND :max ',
array(':min' => $view->exposed_raw_input['start']['min'],':max' => $view->exposed_raw_input['start']['max'],':format' => '%m/%e/%Y'));
}
}
}
}
Idea is to use BETWEEN :min AND :max in your query. Maybe there are other ways to solve this problem, but this is how I would approach this issue.