JavaScript Timeline Custom Range Picker View

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var formatDate = mobiscroll.formatDate;
var startDate;
var endDate;
var end;

var myCalendar = mobiscroll.eventcalendar('#demo-custom-range-view', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  resources: [
    { id: 1, name: 'Resource A', color: '#e20000' },
    { id: 2, name: 'Resource B', color: '#76e083' },
    { id: 3, name: 'Resource C', color: '#4981d6' },
    { id: 4, name: 'Resource D', color: '#e25dd2' },
    { id: 5, name: 'Resource E', color: '#1dab2f' },
    { id: 6, name: 'Resource F', color: '#d6d145' },
  ],
  view: {
    timeline: {
      type: 'day',
      size: 14,
      eventDisplay: 'fill',
    },
  },
  renderHeader: function () {
    return (
      '<div id="custom-date-range"><button mbsc-button data-variant="flat" class="mbsc-calendar-button">' +
      '<span id="custom-date-range-text" class="mbsc-calendar-title">Button' +
      '</span></button></div>' +
      '<div class="md-custom-range-view-controls">' +
      '<div mbsc-calendar-prev></div>' +
      '<div mbsc-calendar-today></div>' +
      '<div mbsc-calendar-next></div>' +
      '</div>'
    );
  },
  onPageLoaded: function (args) {
    startDate = args.firstDay;
    end = args.lastDay;
    endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0);
    // Set button text
    rangeButton.innerText = getFormattedRange(startDate, endDate);
    // Set range value
    myRange.setVal([startDate, endDate]);
  },
});

var myRange = mobiscroll.datepicker('#custom-date-range', {
  select: 'range',
  display: 'anchored',
  showOverlay: false,
  touchUi: true,
  buttons: [],
  onClose: function (args, inst) {
    var date = inst.getVal();
    if (date[0] && date[1]) {
      if (date[0].getTime() !== startDate.getTime()) {
        // Navigate the calendar
        setTimeout(function () {
          myCalendar.navigate(date[0]);
        });
      }
      startDate = date[0];
      endDate = date[1];
      // Set calendar view
      myCalendar.setOptions({
        refDate: startDate,
        view: {
          timeline: {
            type: 'day',
            size: getNrDays(startDate, endDate),
            eventDisplay: 'fill',
          },
        },
      });
    } else {
      myRange.setVal([startDate, endDate]);
    }
  },
});

var rangeButton = document.getElementById('custom-date-range-text');

// Returns the formatted date
function getFormattedRange(start, end) {
  return (
    formatDate('MMM D, YYYY', new Date(start)) +
    (end && getNrDays(start, end) > 1 ? ' - ' + formatDate('MMM D, YYYY', new Date(end)) : '')
  );
}

// Returns the number of days between two dates
function getNrDays(start, end) {
  return Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1;
}

mobiscroll.getJson(
  'https://trial.mobiscroll.com/timeline-events/?vers=5',
  function (events) {
    myCalendar.setEvents(events);
  },
  'jsonp',
);
  

<div id="demo-custom-range-view"></div>
  

.md-custom-range-view-controls {
  display: flex;
  flex: 1 0 auto;
  justify-content: end;
  align-items: center;
}