How do display free booking dates in calender

how could i display for the user if an calender dateTime is bookes display other available dateTime that are free to book? for example in a range 3 days before and 3 days after, anny suggestions?

function checkFreebookingdateTime() {
try {
    var listItemCustom = document.getElementById('datepicker').value;
    var listItemFromTime = document.getElementById('timepicker').value;
    var listItemtoDate = document.getElementById('datepickerto').value;
    var listItemToTime = document.getElementById('timepickerTo').value;
    var result = listItemCustom + "T" + listItemFromTime + ":00" + "Z";
    var result2 = listItemtoDate + "T" + listItemToTime + ":00" + "Z";
    var fromTime = new Date(result);
    var toTime = new Date(result2);


    getListCalender = document.getElementById('CalenderListDrop').value;
    spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
    context = new SP.ClientContext.get_current();
    parentContext = new SP.AppContextSite(context, spHostUrl);
    web = parentContext.get_web();
    list = web.get_lists().getByTitle(getListCalender);
    context.load(list);
    context.executeQueryAsync(
        function() {

            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml('<View><Query><Where><And><Ge><FieldRef Name=\'EventDate\' /><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'>'
                + fromTime.toISOString() + '</Value></Ge><Ge><FieldRef Name=\'EndDate\' /><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'>' + toTime.toISOString() +
                '</Value></Ge></And></Where></Query></View>');


            this.collListItem = list.getItems(camlQuery);
            context.load(collListItem);
        },
        function() {

            alert(collListItem);


        }
    );

} catch (e) {
    alert("");
}

}