Flex UI Library (1.6.10)
User Interface Resources
Theme Components Miscellaneous
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
Rental Calendar
Rental Calendar

Note: See the Code Sample below the calendar for examples of the options that can be set.

  <div class="rentalCalendar"></div>

<script>
$('.rentalCalendar').flexRentalCalendar({
  startDate: '2019-06-19',
  endDate: '2020-05-15',
  entries: [{
    Type: 'Rented',
    StartDate: '2019-05-01',
    EndDate: '2019-05-15'
  }, {
    Type: 'Rented',
    StartDate: '2019-07-11',
    EndDate: '2019-08-15'
  }, {
    Type: 'Rented',
    StartDate: '2020-03-11',
    EndDate: '2020-03-15'
  }, {
    Type: 'Rented',
    StartDate: '2019-10-03',
    EndDate: '2019-10-12'
  }, {
    Type: 'Rented',
    StartDate: '2019-11-11',
    EndDate: '2019-11-25'
  }],
  translations: {
    days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ],
    key: 'Key',
    available: 'Available',
    unavailable: 'Unavailable'
  }
});
</script>