+
+
+
+
+
+
+
+
+ sync_alt
+
+
+
+
+
+
+
+
+
+
+
+
+ ${searchList.length >= 2 ? RemoveHtml : ''}
+ `
+ document.getElementById('multiCityForm').insertAdjacentHTML("beforebegin", html);
+ var searchList = document.querySelectorAll(".MultiForm");
+ let index = searchList.length == 2 ? 1 : searchList.length - 1
+ let date = searchList.length == 1 ? new Date : document.getElementById(`MultiCity-${+ (index)}`).value
+ console.log(date)
+ caleran("#MultiCity-" + (searchList.length), {
+ singleDate: true,
+ calendarCount: 1,
+ showHeader: false,
+ showFooter: false,
+ autoCloseOnSelect: true,
+ format: 'DD MMM YYYY',
+ minDate: date,
+ onafterselect: function (instance, start, end) {
+ CheckMultiDate(start, searchList.length)
+ }
+
+ });
+ }
+ if (searchList.length >= 5) document.getElementById("addMultiCityForm").style.visibility = 'hidden';
+
+};
+
+function CheckMultiDate(Date, index) {
+ var searchList = document.querySelectorAll(".MultiForm")
+ console.log(searchList)
+ for (let i = index; i < searchList.length; i++) {
+ caleran("#MultiCity-" + (i + 1), {
+ singleDate: true,
+ calendarCount: 1,
+ showHeader: false,
+ showFooter: false,
+ autoCloseOnSelect: true,
+ format: 'DD MMM YYYY',
+ minDate: Date._d,
+ onafterselect: function (instance, start, end) {
+ CheckMultiDate(start, (index + 1))
+ }
+ });
+
+ };
+};
+
+
+
+function removeMultiCityForm(elem) {
+ elem.closest(".MultiForm").remove();
+ document.getElementById("addMultiCityForm").style.visibility = 'visible';
+
+};
+
+let tripKey = 'IRT';
+function ChangeTab(type) {
+ tripKey = type;
+}
+
+
+
+
+function hideToaster(element) {
+ setTimeout(function () {
+ element.classList.add('d-none');
+ element.querySelector('span').innerHTML = '';
+ }, 1500);
+}
+
+
+
+/// drop down
+
+async function GetAirlineList(inp) {
+ console.log(inp.value)
+ let html = ''
+ if (inp.value.length >= 2) {
+ const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllAirline/en/" + inp.value, {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ // = await data;
+ data.map(e => {
+ html += `
${e.airline_name} `
+ })
+
+ console.log(data)
+ inp.closest('div').querySelector('.PrefferedAirline').innerHTML = html;
+ };
+ inp.closest('div').querySelector('.PrefferedAirline').classList.remove('aiplineDropdown');
+}
+
+function ExchangeValue(elmnt) {
+ let element = elmnt.closest('.toFromSearchWrapper');
+ let From = element.querySelector('.Origin');
+ let To = element.querySelector('.depart');
+ var from1 = From.value;
+ var form2 = From.getAttribute('data-airport-code');
+ element.querySelector('.Origin').value = To.value;
+ element.querySelector('.Origin').setAttribute('data-airport-code', To.getAttribute('data-airport-code'));
+ element.querySelector('.depart').value = from1;
+ element.querySelector('.depart').setAttribute('data-airport-code', form2);
+}
+// caleran js for calender
+
+caleran("#OW_Calender", {
+ singleDate: true,
+ calendarCount: 1,
+ showHeader: false,
+ showFooter: false,
+ autoCloseOnSelect: true,
+ format: 'DD MMM YYYY',
+ minDate: new Date,
+
+});
+
+
+var startDate, endDate, startInstance, endInstance;
+var fillInputs = function () {
+ startInstance.elem.value = startDate ? startDate.locale(startInstance.config.format).format('DD MMM YYYY') : "";
+ endInstance.elem.value = endDate ? endDate.locale(endInstance.config.format).format('DD MMM YYYY') : "";
+};
+document.querySelector("#flightStart").value = moment().format('DD MMM YYYY');
+document.querySelector("#flightEnd").value = moment().format('DD MMM YYYY');
+caleran("#flightStart", {
+ startEmpty: document.querySelector("#flightStart").value === "",
+ startDate: document.querySelector("#flightStart").value,
+ endDate: document.querySelector("#flightEnd").value,
+ enableKeyboard: false,
+ minDate: new Date,
+ oninit: function (instance) {
+ startInstance = instance;
+ if (!instance.config.startEmpty && instance.config.startDate) {
+ instance.elem.value = instance.config.startDate.locale(instance.config.format).format('DD MMM YYYY');
+ startDate = instance.config.startDate.clone();
+ }
+
+ },
+ onbeforeshow: function (instance) {
+ if (startDate) {
+ startInstance.config.startDate = startDate;
+ endInstance.config.startDate = startDate;
+ }
+ if (endDate) {
+ startInstance.config.endDate = endDate.clone();
+ endInstance.config.endDate = endDate.clone();
+ }
+ fillInputs();
+ instance.updateHeader();
+ instance.reDrawCells();
+ },
+ onfirstselect: function (instance, start) {
+ startDate = start.clone();
+ startInstance.globals.startSelected = false;
+ startInstance.hideDropdown();
+ endInstance.showDropdown();
+ endInstance.config.minDate = startDate.clone();
+ endInstance.config.startDate = startDate.clone();
+ endInstance.config.endDate = null;
+ endInstance.globals.startSelected = true;
+ endInstance.globals.endSelected = false;
+ endInstance.globals.firstValueSelected = true;
+ endInstance.setDisplayDate(start);
+ if (endDate && startDate.isAfter(endDate)) {
+ endInstance.globals.endDate = endDate.clone();
+ }
+ endInstance.updateHeader();
+ endInstance.reDrawCells();
+ fillInputs();
+ }
+});
+caleran("#flightEnd", {
+ startEmpty: document.querySelector("#flightEnd").value === "",
+ startDate: document.querySelector("#flightStart").value,
+ endDate: document.querySelector("#flightEnd").value,
+ enableKeyboard: false,
+ autoCloseOnSelect: true,
+ minDate: new Date,
+ oninit: function (instance) {
+ endInstance = instance;
+ if (!instance.config.startEmpty && instance.config.endDate) {
+ instance.elem.value = (instance.config.endDate.locale(instance.config.format).format('DD MMM YYYY'));
+ endDate = instance.config.endDate.clone();
+ }
+ },
+ onbeforeshow: function (instance) {
+ if (startDate) {
+ startInstance.config.startDate = startDate;
+ endInstance.config.startDate = startDate;
+ }
+ if (endDate) {
+ startInstance.config.endDate = endDate.clone();
+ endInstance.config.endDate = endDate.clone();
+ }
+ fillInputs();
+ instance.updateHeader();
+ instance.reDrawCells();
+ },
+ onafterselect: function (instance, start, end) {
+ startDate = start.clone();
+ endDate = end.clone();
+ endInstance.hideDropdown();
+ startInstance.config.endDate = endDate.clone();
+ startInstance.globals.firstValueSelected = true;
+ fillInputs();
+ endInstance.globals.startSelected = true;
+ endInstance.globals.endSelected = false;
+
+ }
+});
+
+// Flight Search query string
+
+function Searchflight(elem) {
+ let checkValidation = true;
+
+ let main_div = elem.closest('.CommonSearch');
+ let airlinelist = document.querySelectorAll(".airlinelist");
+ let airline_code = [];
+ if (airlinelist.length != 0) {
+ airlinelist.forEach(e => {
+ airline_code.push(e.getAttribute('data-airline-code'));
+ });
+ }
+ var querystring = {
+ "adult": TravellerDetails.Adult,
+ "child": TravellerDetails.child,
+ "infant": TravellerDetails.Infant,
+ "langcode": "EN",
+ "ref": document.getElementById('Refundable').checked,
+ "direct": document.getElementById('DirectFlights').checked,
+ "key": tripKey,
+ "triptype": CheckTriptype(tripKey),
+ 'curr': 'AED',
+ "airlines": airline_code.length != 0 ? airline_code.join(',') : '',
+ }
+
+ let cl = checkClassType()
+ let origin = main_div.querySelector('.Origin').getAttribute("data-airport-code");
+ let depart = main_div.querySelector('.depart').getAttribute("data-airport-code");
+ if (tripKey == 'OW' || tripKey == 'IRT') {
+ let list = tripKey == 'OW' ? 1 : 2
+ for (let i = 0; i < list; i++) {
+ let start = tripKey == 'OW' ? document.getElementById('OW_Calender').value : document.getElementById('flightStart').value
+ if (!validator(origin, depart)) {
+ checkValidation = false
+ }
+ let end = document.getElementById('flightEnd').value
+ querystring[`dep${i + 1}`] = i == 0 ? origin : depart;
+ querystring[`ret${i + 1}`] = i == 0 ? depart : origin;
+ querystring[`cl${i + 1}`] = cl;
+ querystring[`dtt${i + 1}`] = tripKey == 'OW' ? moment(start).format('DD-MMM-YYYY') : i == 0 ? moment(start).format('DD-MMM-YYYY') : moment(end).format('DD-MMM-YYYY');
+ }
+ } else if (tripKey == 'NMC') {
+ var searchList = main_div.querySelectorAll(".MultiForm");
+ searchList.forEach((e, i) => {
+ let Origin = e.getElementsByClassName('Origin')[0].getAttribute("data-airport-code");
+ let depart = e.getElementsByClassName('depart')[0].getAttribute("data-airport-code");
+ if (!validator(Origin, depart)) {
+ checkValidation = false
+ }
+ querystring[`dep${i + 1}`] = Origin;
+ querystring[`ret${i + 1}`] = depart;
+ querystring[`dtt${i + 1}`] = moment(e.querySelector(`#MultiCity-${i + 1}`).value).format('DD-MMM-YYYY'); // changes
+ querystring[`cl${i + 1}`] = cl;
+ })
+ }
+ if (!checkValidation) {
+ return
+ }
+ sessionStorage.setItem('SerachReqQueryObj', JSON.stringify(querystring));
+ const urlParams = new URLSearchParams(window.location.search);
+ var query = Object.keys(querystring).map(key => key + '=' + querystring[key]).join('&');
+ window.location.href = 'https://travel.neuholidays.com/Flight/search?' + query;
+}
+
+
+// validation
+
+function validator(origin, depart) {
+ let element = document.getElementsByClassName('toast-warning')[0]
+ if (origin == depart) {
+ element.classList.remove('d-none')
+ element.querySelector('span').innerHTML = 'Departure must be different from arrival'
+ hideToaster(element)
+ return false
+ } if (!origin || !depart) {
+ element.classList.remove('d-none')
+ element.querySelector('span').innerHTML = 'Please enter departure and arrival city or airport'
+ hideToaster(element)
+ return false
+ } else return true
+};
+
+// common function
+
+function CheckTriptype(tripKey) {
+ if (tripKey == 'NMC') {
+ return '3'
+ } else if (tripKey == 'IRT') {
+ return '2'
+ } else if (tripKey == 'OW') {
+ return '1'
+ }
+};
+
+function checkClassType() {
+ if (TravellerDetails.classType == 'FirstClass') {
+ return 'F'
+ } else if (TravellerDetails.classType == 'BusinessClass') {
+ return 'C'
+ } else if (TravellerDetails.classType == 'PremiumEconomy') {
+ return 'W'
+ } else if (TravellerDetails.classType == 'Economy') {
+ return 'Y'
+ }
+}
+
+
+/// multi selector
+
+function Close(e) {
+ e.closest('.multiSelect').querySelector(".SelectList").classList.remove("ShowAirlineList");
+ e.closest("span").remove();
+ let check = document.querySelectorAll(".airlinelist");
+ if (check.length == 0) {
+ e.closest('.multiSelect').querySelector(".SearchBox").classList.add('multiInp')
+ }
+}
+function showAirlineList(elem) {
+ elem.closest('.multiSelect').querySelector(".SelectList").classList.add("ShowAirlineList");
+ elem.closest('.multiSelect').querySelector("input").focus();
+}
+function bindAirLine(airlinelist, elem) {
+ let html = "";
+ airlinelist.map((e, i) => {
+ html += `
(${e.airline_code}) ${e.airline_name} `
+ })
+ elem.closest('.SelectList').querySelector('.ListItem').innerHTML = html;
+}
+
+async function GetAirlineDetails(elem) {
+ let key = window.event
+ let list = document.getElementsByClassName('selectAirline') ? document.getElementsByClassName('selectAirline')[0] : '';
+ if (list) {
+ if (key.keyCode == 38) {
+ console.log('low')
+ var prev = list.previousElementSibling;
+ if (prev) {
+ list.classList.remove("selectAirline");
+ prev.classList.add("selectAirline");
+ }
+ } else if (key.keyCode == 40) {
+ console.log('high')
+ var next = list.nextElementSibling;
+ if (next) {
+ list.classList.remove("selectAirline");
+ next.classList.add("selectAirline");
+ };
+ };
+ };
+ let val = elem.value;
+ if (val.length >= 2 && !(key.keyCode == 38) && !(key.keyCode == 40)) {
+ const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllAirline/en/" + val, {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ let obj = await data;
+ obj ? bindAirLine(obj, elem) : ''
+ }
+ if (key.keyCode == 13) {
+ AddAirline(document.getElementsByClassName('selectAirline')[0])
+ }
+
+};
+
+function AddAirline(val) {
+ let check = document.querySelectorAll(".airlinelist");
+ if (check.length <= 2) {
+ let code = val.getAttribute("data-airline-code");
+ let name = val.getAttribute("data-airline-name");
+ let html = `
(${code}) ${name}
+
+ `;
+ val.closest('.multiSelect').querySelector(".SearchBox").insertAdjacentHTML("beforeend", html);
+ let maindiv = val.closest('.multiSelect').querySelector('input')
+ val.closest('.multiSelect').querySelector("input").value = '';
+ val.closest('div').classList.remove("ShowAirlineList");
+ val.closest('.multiSelect').querySelector(".SearchBox").classList.remove('multiInp');
+ val.remove();
+ bindAirLine([], maindiv);
+ }
+
+};
+
+
+function resetAllPaxCounter() {
+ document.getElementById("infant").value = 0;
+ document.getElementById("child").value = 0;
+ document.getElementById("adult").value = 1;
+ TravellerDetails.Adult = 1;
+ TravellerDetails.child = 0;
+ TravellerDetails.Infant = 0;
+ ClassType(document.getElementsByClassName('EconomyClass')[0] , 'Economy');
+
+};
\ No newline at end of file
diff --git a/build/js/hotel/hotel.js b/build/js/hotel/hotel.js
new file mode 100644
index 0000000..8e5195e
--- /dev/null
+++ b/build/js/hotel/hotel.js
@@ -0,0 +1,514 @@
+
+function roomCount() {
+ document.getElementById("roomPax").classList.add("showRoomPax");
+}
+
+function addmore_rooms() {
+ var rooms = document.querySelectorAll(".HotelNoRoomWrapper");
+ html = "";
+ let RemoveHtml = `
+
+ close
+
`
+
+ if (rooms.length < 6) {
+ html = `
+
+ local_hotel
+
Room ${rooms.length + 1}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${rooms.length != 0 ? RemoveHtml : ''}
+
`
+ }
+ if (rooms.length >= 5) document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.add("HotelPaxSelectOption");
+ document.getElementById('MoreOption').querySelector('.addMoreTravller').insertAdjacentHTML("beforebegin", html)
+ TravellerCounter('');
+}
+addmore_rooms();
+
+
+function RemoveRoom(elem) {
+ elem.closest(".HotelNoRoomWrapper").remove();
+ let allRoom = document.querySelectorAll(".HotelNoRoomWrapper")
+ allRoom.forEach((e, i) => {
+ e.querySelector('.Rooms_no').innerHTML = `Room ${i + 1} `
+ });
+ TravellerCounter('');
+ document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.remove("HotelPaxSelectOption");
+};
+
+
+function AddChildPax(elem, check) {
+
+ if (check) {
+ if (elem.previousElementSibling.value <= 3) {
+ elem.previousElementSibling.value++
+ elem.previousElementSibling.previousElementSibling.disabled = false
+ elem.previousElementSibling.previousElementSibling.style.opacity = '1'
+ children_number(elem, check, elem.previousElementSibling.value)
+ TravellerCounter('');
+ } if (elem.previousElementSibling.value == 4) {
+ elem.disabled = true;
+ elem.style.opacity = '0.6';
+ }
+ } else {
+ if (elem.nextElementSibling.value >= 1) {
+ elem.nextElementSibling.nextElementSibling.disabled = false;
+ elem.nextElementSibling.nextElementSibling.style.opacity = '1';
+ elem.nextElementSibling.value--;
+ children_number(elem, check, elem.nextElementSibling.value);
+ TravellerCounter('');
+ } if (elem.nextElementSibling.value == 0) {
+ elem.disabled = true;
+ elem.style.opacity = '0.6';
+ }
+ }
+ if (true) {
+ if (document.querySelector('.child_1')) {
+ document.querySelector('.Child-one').classList.remove('d-none');;
+ } else document.querySelector('.Child-one').classList.add('d-none');
+ if (document.querySelector('.child_2')) {
+ document.querySelector('.Child-two').classList.remove('d-none');
+ } else document.querySelector('.Child-two').classList.add('d-none');
+ if (document.querySelector('.child_3')) {
+ document.querySelector('.Child-three').classList.remove('d-none');
+ } else document.querySelector('.Child-three').classList.add('d-none');
+ if (document.querySelector('.child_4')) {
+ document.querySelector('.Child-four').classList.remove('d-none');
+ } else document.querySelector('.Child-four').classList.add('d-none');
+ }
+};
+function AddAdultPax(elem, check) {
+
+ if (check) {
+ if (elem.previousElementSibling.value <= 5) {
+ elem.previousElementSibling.value++;
+ elem.previousElementSibling.previousElementSibling.disabled = false;
+ elem.previousElementSibling.previousElementSibling.style.opacity = '1';
+ TravellerCounter('');
+ } if (elem.previousElementSibling.value == 6) {
+
+ elem.disabled = true;
+ elem.style.opacity = '0.6';
+ }
+ } else {
+ if (elem.nextElementSibling.value >= 2) {
+ elem.nextElementSibling.value--;
+ elem.nextElementSibling.nextElementSibling.disabled = false;
+ elem.nextElementSibling.nextElementSibling.style.opacity = '1';
+ TravellerCounter('');
+ } if (elem.nextElementSibling.value == 1) {
+ elem.disabled = true;
+ elem.style.opacity = '0.6';
+ }
+ }
+};
+
+
+
+
+function apply_people(elem) {
+ if (elem) {
+ TravellerCounter(elem.getAttribute('data-room'))
+ document.getElementById("roomPax").classList.remove("showRoomPax");
+ if (elem.getAttribute('data-room') == "addmore") {
+ document.getElementById("MoreOption").classList.remove("moreOptionWrapper")
+ } else document.getElementById("MoreOption").classList.add("moreOptionWrapper")
+ }
+};
+
+
+var RoomDetails = []
+function TravellerCounter(optionType) {
+ console.log(RoomDetails)
+ let searchRooms = [];
+ let totalRooms = "";
+
+ if (optionType === "1Room2Adult") {
+ let array_age = [];
+ let data = {
+ "adult": "2",
+ "child": "0",
+ "childAge": array_age
+ }
+ searchRooms.push(data);
+ totalRooms = "1";
+ } else if (optionType === "1Room1Adult") {
+ let array_age = [];
+ let data = {
+ "adult": "1",
+ "child": "0",
+ "childAge": array_age
+ }
+ totalRooms = "1";
+ searchRooms.push(data);
+ } else {
+ let roomElem = [...document.querySelector('#MoreOption').querySelectorAll('.HotelNoRoomWrapper')];
+ let roomData = roomElem.map(e => {
+ let adultVal = e.querySelector('.AdultPax').querySelector('input').value;
+ let childVal = e.querySelector('.ChildPax').querySelector('input').value;
+ let html = e.querySelector('.HotelNoageChild').querySelectorAll('.HotelNoageSelect');
+ let array_age = [...html].map(elem => elem.querySelector('.select_control').value);
+ return {
+ 'adult': adultVal,
+ 'child': childVal,
+ 'childAge': array_age
+ }
+ });
+ searchRooms = [...roomData];
+ totalRooms = searchRooms.length;
+ }
+ RoomDetails = searchRooms;
+ getRoomsInfo(searchRooms);
+}
+TravellerCounter('1Room2Adult')
+
+function getRoomsInfo(rooms) {
+ let roomsInfo = rooms.reduce((acc, elem) =>
+ (
+ {
+ Adult: parseInt(acc.Adult) + parseInt(elem.adult),
+ Child: parseInt(acc.Child) + parseInt(elem.child)
+ })
+ , ({ Adult: 0, Child: 0 }));
+ roomsInfo['Rooms'] = rooms.length;
+ console.log(roomsInfo)
+ document.getElementById('RoomCount').value = `${rooms.length} Room, ${roomsInfo.Adult} Adult ${roomsInfo.Child > 0 ? ', ' + roomsInfo.Child + ' Child' : ''}`;
+}
+
+
+// child count
+
+function children_number(elem, check, index) {
+ let html = "";
+ console.log(index)
+ if (check) {
+ html += `
+
+
+ `;
+ elem.closest(".HotelNoRoomWrapper").querySelector(".HotelNoageChild").insertAdjacentHTML("beforeend", html)
+ } else {
+ let elemet = elem.closest(".HotelNoRoomWrapper").querySelectorAll(".HotelNoageSelect");
+ let ind =
+ elemet.length - 1
+ elemet[ind].remove();
+ }
+ TravellerCounter('');
+};
+
+
+// hote api
+
+let HotelList = [];
+let NationalityList = [];
+getBindHotelList()
+async function getBindHotelList(inp) {
+ const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CityMaster/GetSelectedCity?cityCode=39942,12568,41325,38997,33324&LangCode=EN", {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ HotelList = data
+ console.log(data)
+
+}
+// onkeyup
+
+async function GethotelList(Input) {
+ if (Input.value.length >= 2) {
+ const response = await fetch("https://hotelapi.uat.futuretravelplatform.com/api/hotel/location?searchKey=" + Input.value + "&langCode=EN", {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ HotelList = data
+ autoHotelListbind(Input)
+ console.log(data)
+ }
+}
+
+// bind hotel list
+
+function ShowHotelList(element) {
+ element.closest(".HotelSearchDestination").querySelector(".hideInput") ? element.closest(".HotelSearchDestination").querySelector(".hideInput").classList.remove('hideInput') : ''
+ autoHotelListbind(element)
+}
+function autoHotelListbind(element) {
+ let html = '';
+ HotelList.map(e => {
+ html += `
+
+
location_on
+
${e.displayName}
+
`
+ });
+ element.closest(".HotelSearchDestination").querySelector(".HotelList").innerHTML = html;
+}
+
+function ApplyHotelCity(elem) {
+ console.log(elem)
+ let countryCode = elem.querySelector('a').getAttribute('data-countryCode');
+ let cityCode = elem.querySelector('a').getAttribute('data-cityCode');
+ let city_Id = elem.querySelector('a').getAttribute('data-city_Id');
+ let displayName = elem.querySelector('a').getAttribute('data-displayName');
+
+ let input = document.getElementById('FromHotel');
+ input.value = displayName;
+ input.setAttribute("data-countryCode", countryCode);
+ input.setAttribute("data-cityCode", cityCode);
+ input.setAttribute("data-city_Id", city_Id);
+
+ elem.closest('.HotelDestination').classList.add('hideInput');
+};
+
+
+
+
+
+
+/// nationality list bind
+
+function showNationality(elem) {
+ elem.closest('.HotelSearchFormNationality').querySelector('.HotelNationality').classList.remove('hideInput');
+ autonationalityListbind(elem);
+}
+
+getBindNationalityList()
+async function getBindNationalityList() {
+ const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CountryMaster/GetSelectedCountry/EN/MA,TN,NG,EG,AE,SA,BH,QA,KW,OM", {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ NationalityList = data
+}
+
+async function GetNationalityList(Input) {
+ if (Input.value) {
+ const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllCountry/EN/" + Input.value, {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ NationalityList = data
+ autonationalityListbind(Input)
+ }
+}
+
+function autonationalityListbind(elem) {
+ let html = '';
+ NationalityList.map(e => {
+ html += `
+
+
location_on
+
${e.country_name}
+
`
+ });
+ elem.closest('.HotelSearchFormNationality').querySelector('.NationalityList').innerHTML = html;
+}
+
+function ApplyNationality(elem) {
+ let citycode = elem.querySelector('a').getAttribute('data-countryCode');
+ let countryName = elem.querySelector('a').getAttribute('data-countryName');
+ document.getElementById('FromNationality').value = countryName;
+ document.getElementById('FromNationality').setAttribute('data-countryCode', citycode);
+ elem.closest('.HotelNationality').classList.add('hideInput');
+}
+
+// caleran js for calender
+
+
+var startDate, endDate, HotelStartInstance, HotelEndInstance;
+var HotelFillInputs = function () {
+ HotelStartInstance.elem.value = startDate ? startDate.locale(HotelStartInstance.config.format).format('DD MMM YYYY') : "";
+ HotelEndInstance.elem.value = endDate ? endDate.locale(HotelEndInstance.config.format).format('DD MMM YYYY') : "";
+};
+document.querySelector("#hotelStart").value = moment().format('DD MMM YYYY');
+document.querySelector("#hotelEnd").value = moment().format('DD MMM YYYY');
+caleran("#hotelStart", {
+ startEmpty: document.querySelector("#hotelStart").value === "",
+ startDate: document.querySelector("#hotelStart").value,
+ endDate: document.querySelector("#hotelEnd").value,
+ enableKeyboard: false,
+ minDate: new Date,
+ oninit: function (instance) {
+ HotelStartInstance = instance;
+ if (!instance.config.startEmpty && instance.config.startDate) {
+ instance.elem.value = instance.config.startDate.locale(instance.config.format).format('DD MMM YYYY');
+ startDate = instance.config.startDate.clone();
+ }
+ },
+ onbeforeshow: function (instance) {
+ if (startDate) {
+ HotelStartInstance.config.startDate = startDate;
+ HotelEndInstance.config.startDate = startDate;
+ }
+ if (endDate) {
+ HotelStartInstance.config.endDate = endDate.clone();
+ HotelEndInstance.config.endDate = endDate.clone();
+ }
+ HotelFillInputs();
+ instance.updateHeader();
+ instance.reDrawCells();
+ },
+ onfirstselect: function (instance, start) {
+ startDate = start.clone();
+ HotelStartInstance.globals.startSelected = false;
+ HotelStartInstance.hideDropdown();
+ HotelEndInstance.showDropdown();
+ HotelEndInstance.config.minDate = startDate.clone();
+ HotelEndInstance.config.startDate = startDate.clone();
+ HotelEndInstance.config.endDate = null;
+ HotelEndInstance.globals.startSelected = true;
+ HotelEndInstance.globals.endSelected = false;
+ HotelEndInstance.globals.firstValueSelected = true;
+ HotelEndInstance.setDisplayDate(start);
+ if (endDate && startDate.isAfter(endDate)) {
+ HotelEndInstance.globals.endDate = endDate.clone();
+ }
+ HotelEndInstance.updateHeader();
+ HotelEndInstance.reDrawCells();
+ HotelFillInputs();
+ }
+
+});
+caleran("#hotelEnd", {
+ startEmpty: document.querySelector("#hotelEnd").value === "",
+ startDate: document.querySelector("#hotelStart").value,
+ endDate: document.querySelector("#hotelEnd").value,
+ enableKeyboard: false,
+ autoCloseOnSelect: true,
+ minDate: new Date,
+ oninit: function (instance) {
+ HotelEndInstance = instance;
+ if (!instance.config.startEmpty && instance.config.endDate) {
+ instance.elem.value = (instance.config.endDate.locale(instance.config.format).format('DD MMM YYYY'));
+ endDate = instance.config.endDate.clone();
+ }
+ calcNumberOfNights(startDate, endDate)
+ },
+ onbeforeshow: function (instance) {
+ if (startDate) {
+ HotelStartInstance.config.startDate = startDate;
+ HotelEndInstance.config.startDate = startDate;
+ }
+ if (endDate) {
+ HotelStartInstance.config.endDate = endDate.clone();
+ HotelEndInstance.config.endDate = endDate.clone();
+ }
+ HotelFillInputs();
+ instance.updateHeader();
+ instance.reDrawCells();
+ },
+ onafterselect: function (instance, start, end) {
+ startDate = start.clone();
+ endDate = end.clone();
+ HotelEndInstance.hideDropdown();
+ HotelStartInstance.config.endDate = endDate.clone();
+ HotelStartInstance.globals.firstValueSelected = true;
+ HotelFillInputs();
+ HotelEndInstance.globals.startSelected = true;
+ HotelEndInstance.globals.endSelected = false;
+ calcNumberOfNights(startDate, endDate)
+
+ }
+});
+
+
+// hotel search query string
+
+function searchHotel() {
+ let hotelDetails = document.getElementById('FromHotel')
+ let Nationality = document.getElementById('FromNationality').getAttribute('data-countryCode')
+ let element = document.getElementsByClassName('toast-warning')[0]
+ if (!hotelDetails) {
+ element.classList.remove('d-none')
+ element.querySelector('span').innerHTML = 'Please enter destination city'
+ hideToaster(element)
+ return
+ }
+ if (!Nationality) {
+ element.classList.remove('d-none')
+ element.querySelector('span').innerHTML = 'Please select nationality'
+ hideToaster(element)
+ return
+ }
+ let queryParams = {};
+ queryParams['CityCode'] = hotelDetails.getAttribute('data-cityCode');
+ queryParams['CityId'] = hotelDetails.getAttribute('data-city_Id');
+ queryParams['Country'] = hotelDetails.getAttribute('data-countryCode');
+ queryParams['nationality'] = Nationality;
+ queryParams['langCode'] = 'EN';
+ queryParams['checkinDate'] = moment(document.getElementById('hotelStart').value).format('DD-MMM-YYYY');
+ queryParams['checkoutDate'] = moment(document.getElementById('hotelEnd').value).format('DD-MMM-YYYY');
+
+ RoomDetails.map((e, i) => {
+ let room = []
+ room.push(parseInt(e.adult))
+ room.push(parseInt(e.child))
+ room.push(...e.childAge.map(no => parseInt(no)))
+ let roomdetails = room.join('-')
+ console.log(roomdetails)
+ queryParams[`room${i + 1}`] = roomdetails
+ })
+ // sessionStorage.setItem('SerachReqQueryObj', JSON.stringify(querystring));
+ const urlParams = new URLSearchParams(window.location.search);
+ var query = Object.keys(queryParams).map(key => key + '=' + queryParams[key]).join('&');
+ window.location.href = 'https://travel.neuholidays.com/hotel/result?' + query;
+
+};
+
+function calcNumberOfNights(checkInDate, checkOutDate) {
+ let night = moment(checkOutDate).diff(checkInDate, 'days');
+ document.getElementsByClassName('nightCountgBox')[0].querySelector('.nightNum').innerHTML = night;
+};
diff --git a/build/js/plugins/caleran.js b/build/js/plugins/caleran.js
new file mode 100644
index 0000000..a887b3c
--- /dev/null
+++ b/build/js/plugins/caleran.js
@@ -0,0 +1,2565 @@
+/**
+ *
+ * 888 d8b
+ * 888 Y8P
+ * 888
+ * .d8888b 8888b. 888 .d88b. 888d888 8888b. 88888b. 8888 .d8888b
+ * d88P" "88b 888 d8P Y8b 888P" "88b 888 "88b "888 88K
+ * 888 .d888888 888 88888888 888 .d888888 888 888 888 "Y8888b.
+ * Y88b. 888 888 888 Y8b. 888 888 888 888 888 d8b 888 X88
+ * "Y8888P "Y888888 888 "Y8888 888 "Y888888 888 888 Y8P 888 88888P'
+ * 888
+ * d88P
+ * 888P"
+ *
+ * @name: caleran.js - the multiple date range picker
+ * @description: An inline/popup date range picker with multiple selected range support, now with plain JS
+ * @version: 1.0.2
+ * @author: Taha PAKSU
+ *
+ *
+ * Change Log:
+ * ===========
+ *
+ * v1.0.0
+ * ------
+ * - released first version
+ *
+ * v1.0.1
+ * ------
+ * - Fix swipe month switch direction
+ * - Fix mobile calendar height limit calculation
+ * - Fix input focus on dropdown open
+ * - Add better swipe detection
+ *
+ * v1.0.2
+ * ------
+ * - Fixed swiping issues
+ *
+ *
+ *
+ * Usage:
+ * ------
+ * caleran(".selector", {options});
+ */
+;
+(function (window, document, undefined) {
+ 'use strict';
+ /**
+ * The main caleran class
+ * @class caleran
+ */
+ var caleranPlugin = function (elem, options) {
+ this.elem = elem;
+ this.options = options;
+ this.metadata = this.elem.getAttribute("data-plugin-options") ? JSON.parse(this.elem.getAttribute("data-plugin-options")) : {};
+ };
+ /**
+ * Prototype of caleran plugin
+ * @prototype caleran
+ */
+ caleranPlugin.prototype = {
+ /////////////////////////////////////////////////////////////////////
+ // public properties that can be set through plugin initialization //
+ /////////////////////////////////////////////////////////////////////
+ public: function () {
+ return {
+ startDate: moment().startOf('day'), // (d) the selected start date, initially today
+ endDate: moment().startOf('day'), // (d) the selected end date, initially today
+ format: "L", // (d) the default format for showing in input, default short date format of locale
+ dateSeparator: " - ", // (d) if not used as a single date picker, this will be the seperator
+ calendarCount: 2, // (d) how many calendars will be shown in the plugin screen
+ mobileBreakpoint: 760, // width in pixels to switch to mobile layout on initialization
+ isHotelBooking: false, // (d) hotel booking style ranges
+ inline: false, // (d) display as an inline input replacement
+ minDate: null, // (d) minimum selectable date, default null (no minimum)
+ maxDate: null, // (d) maximum selectable date, default null (no maximum)
+ showHeader: true, // (d) visibility of the part which displays the selected start and end dates
+ showFooter: true, // (d) visibility of the part which contains user defined ranges
+ rangeOrientation: "horizontal", // (d) show ranges horizontally below the calendars or vertically on the side
+ verticalRangeWidth: 180, // (d) range panel width when rangeOrientation is set to vertical
+ showButtons: false, // (d) visibility of the part which contains the buttons on desktop dropdown view
+ startOnMonday: false, // (d) if you want to start the calendars on monday, set this to true
+ container: "body", // (d) the container of the dropdowns
+ oneCalendarWidth: 230, // (d) the width of one calendar, if two calendars are shown, the input width will be 2 * this setting.
+ enableKeyboard: true, // (d) enables keyboard navigation
+ showOn: "bottom", // (d) dropdown placement position relative to input element ( "top", "left", "right", "bottom", "center")
+ arrowOn: "left", // (d) arrow position ("left" "right" "center" for showOn "bottom" or "top", and vice versa)
+ autoAlign: true, // (d) automatically reposition the picker when window resize or scroll or dropdown show
+ locale: moment.locale(), // (d) moment locale setting, different inputs: https://momentjs.com/docs/#/i18n/changing-locale/ , available locales: https://momentjs.com/ (bottom of the page)
+ singleDate: false, // (d) if you want a single date picker, set this to true
+ target: null, // (d) the element to update after selection, defaults to the element that is instantiated on
+ autoCloseOnSelect: false, // (d) closes the dropdown/modal after valid selection
+ startEmpty: false, // (d) starts with no value selected
+ isRTL: false, // flag to use RTL layout
+ ranges: [{ // (d) default range objects array, one range is defined like
+ title: "Today", // {title(string), startDate(moment object), endDate(moment object) }
+ startDate: moment(),
+ endDate: moment()
+ }, {
+ title: "3 Days",
+ startDate: moment(),
+ endDate: moment().add(2, "days")
+ }, {
+ title: "5 Days",
+ startDate: moment(),
+ endDate: moment().add(4, "days")
+ }, {
+ title: "1 Week",
+ startDate: moment(),
+ endDate: moment().add(6, "days")
+ }, {
+ title: "Till Next Week",
+ startDate: moment(),
+ endDate: moment().endOf("week") // if you use Monday as week start, you should use "isoweek" instead of "week"
+ }, {
+ title: "Till Next Month",
+ startDate: moment(),
+ endDate: moment().endOf("month")
+ }],
+ rangeLabel: "Ranges: ", // (d) the title of defined ranges
+ cancelLabel: "Cancel", // (d) the text on the cancel button
+ applyLabel: "Apply", // (d) the text on the apply button
+ nextMonthIcon: "", // (d) the html of the next month icon
+ prevMonthIcon: "", // (d) the html of the prev month icon
+ rangeIcon: "", // (d) the html of the range label icon
+ headerSeparator: "", // (d) the html of the icon between header dates
+ onbeforeselect: function () { // (d) triggered before selection is applied, can be reverted with returning false
+ return true;
+ }, // (d) event which is triggered before selecting the end date ( a range selection is completed )
+ onafterselect: function () { }, // (d) event which is triggered after selecting the end date ( the input value changed )
+ onbeforeshow: function () { }, // (d) event which is triggered before showing the dropdown
+ onbeforehide: function () { }, // (d) event which is triggered before hiding the dropdown
+ onaftershow: function () { }, // (d) event which is triggered after showing the dropdown
+ onafterhide: function () { }, // (d) event which is triggered after hiding the dropdown
+ onfirstselect: function () { }, // (d) event which is triggered after selecting the first date of ranges
+ onrangeselect: function () { }, // (d) event which is triggered after selecting a range from the defined range links
+ onbeforemonthchange: function () { // (d) event which is triggered before switching the month, can be prevented with returning false
+ return true;
+ }, // (d) event which fires before changing the first calendar month of multiple calendars, or the month of a single calendar
+ onaftermonthchange: function () { }, // (d) event which fires after changing the first calendar month of multiple calendars, or the month of a single calendar
+ onafteryearchange: function () { }, // (d)event which fires after changing the first calendar year of multiple calendars, or the year of a single calendar
+ ondraw: function () { }, // (d) event which fires after a complete redraw occurs
+ onBeforeInit: function () { }, // (d) event which is fired before initialization and after configuration
+ onBeforeDestroy: function () {
+ return true;
+ }, // (d) event which is fired before destruction
+ oninit: function () { }, // (d) event which is fired after complete initialization
+ ondestroy: function () { }, // (d) event which is fired after complete destruction
+ validateClick: function () { return true; }, // (d) event which is fired on cell click, returning false will prevent selection
+ onCancel: function(){ return true; }, // (d) event which is fired on cancel button click, returning false will prevent cancel
+ disableDays: function () { // (d) function which is used to disable the related day with returning true after checks
+ return false;
+ },
+ disabledRanges: [], // (d) array which contains disabled date ranges, refer to docs for the structure
+ continuous: false, // (d) flag to make sure the range selected doesn't contain disabled dates
+ disableOnlyStart: false, // (d) flag to apply the disables only to start dates
+ disableOnlyEnd: false, // (d) flag to apply the disables only to end days
+ minSelectedDays: 0, // (d) minimum number of selected days to be accepted
+ enableMonthSwitcher: true, // (d) flag to enable the month switcher when clicking the month name on the calendar titles
+ enableYearSwitcher: true, // (d) flag to enable the year switcher when clicking the year text on the calendar titles
+ enableSwipe: true, // (d) flag to enable the swiped month switch on mobile displays
+ numericMonthSwitcher: false, // (d) flag to enable displaying numbers instead of month names in month switcher
+ monthSwitcherFormat: "MMMM", // (d) Changes the month name display format on the month switcher. Default: "MMMM"
+ showWeekNumbers: false, // (d) flag to show/hide week numbers
+ hideOutOfRange: false, // (d) hides or disables out of range months, years, navigation arrows
+ DOBCalendar: false // (d) Birthdate selection mode
+ };
+ },
+ //////////////////////////////////////////
+ // private variables for internal usage //
+ //////////////////////////////////////////
+ private: function () {
+ return {
+ startSelected: false, // flag which indicates the start date is selected on the calendar, and the next click will define the end date.
+ currentDate: moment().startOf('day'), // the current month which is shown on the first calendar
+ endSelected: true, // flag which indicates that the end date is selected. Also means that a complete range is selected.
+ hoverDate: null, // the day element which is currently being hovered via mouse
+ keyboardHoverDate: null, // the day element which is currently being hovered via keyboard
+ headerStartDay: null, // header start day information container element
+ headerStartDate: null, // header start date of month container element
+ headerStartWeekday: null, // header start week day text container element
+ headerEndDay: null, // header end day information container element
+ headerEndDate: null, // header end date of month container element
+ headerEndWeekday: null, // header end week day text container element
+ swipeX: 0,
+ swipeY: 0,
+ swipeStart: 0,
+ swipeTimeout: null, // swipe debouncing timeout variable
+ isMobile: false, // current environment is mobile or desktop indicator
+ valElements: ["BUTTON", "OPTION", "INPUT", "LI", "METER", "PROGRESS", "PARAM"], // elements which support value property
+ dontHideOnce: false, // flag that tells the dropdown not to close once
+ initiator: null, // element which triggered the dropdown to show
+ initComplete: false, // is the plugin completely initialized?
+ startDateBackup: null, // start date clone while switching months, used for range selection after month/year switch
+ startDateInitial: null, // start date clone when displaying the plugin to use on cancellation operation
+ endDateInitial: null, // end date clone when displaying the plugin to use on cancellation operation
+ firstValueSelected: false, // used with config.startEmpty, set to true if the initial range selection has been made.
+ throttleTimeout: null, // debouncer function timeout variable
+ instanceId: null,
+ documentEvent: null, // used for separating document bound events for multiple instances
+ delayInputUpdate: false, // used for preventing the input to be updated until the apply button is clicked
+ lastScrollX: 0, // horizontal buffer variable of scroll positions for using inside requestAnimationFrame
+ lastScrollY: 0, // vertical buffer variable of scroll positions for using inside requestAnimationFrame
+ isTicking: false, // requestAnimationFrame ticking suppressor
+ parentScrollEventsAttached: false, // runonce flag for input's scrollable parents, which scroll events are attached once
+ rafID: 0, // requestanimationframe ID for cancellation
+ disabledDays: {}
+ };
+ },
+ /**
+ * initialize the plugin
+ * @return caleran object
+ */
+ init: function () {
+ this.config = this.extend(this.extend(this.public(), this.options), this.metadata);
+ this.globals = this.private();
+ this.globals.isMobile = this.checkMobile();
+ this.globals.instanceId = Math.round((+new Date()) + (Math.random() * 100));
+ this.events = this.eventsPrototype();
+ this.events.init(this.globals.instanceId);
+ this.config.onBeforeInit(this);
+ this.applyConfig();
+ this.fetchInputs();
+ this.drawUserInterface();
+ this.drawOverlay();
+ this.addInitialEvents();
+ this.addKeyboardEvents();
+ this.elem.caleran = this;
+ this.config.oninit(this);
+ this.globals.initComplete = true;
+ this.globals.lastScrollX = 0;
+ this.globals.lastScrollY = 0;
+ this.events.dispatch(window, "resize");
+ return this;
+ },
+ /**
+ * validates start and end dates,
+ * swaps dates if end > start,
+ * sets visible month of first selection
+ *
+ * @return void
+ */
+ validateDates: function () {
+ // validate start & end dates
+ var swap;
+
+ if (
+ (
+ (moment.isMoment(this.config.startDate) && this.config.startDate.isValid()) ||
+ (moment(this.config.startDate, this.config.format).isValid())
+ ) && (
+ (moment.isMoment(this.config.endDate) && this.config.endDate.isValid()) ||
+ (moment(this.config.endDate, this.config.format).isValid())
+ )
+ ) {
+ this.config.startDate = moment(this.config.startDate, this.config.format).middleOfDay().locale(this.config.locale);
+ this.config.endDate = moment(this.config.endDate, this.config.format).middleOfDay().locale(this.config.locale);
+ if (this.config.startDate.isAfter(this.config.endDate, "day")) {
+ swap = this.config.startDate.clone();
+ this.config.startDate = this.config.endDate.clone();
+ this.config.endDate = swap.clone();
+ swap = null;
+ }
+ } else {
+ this.config.startDate = moment().middleOfDay().locale(this.config.locale);
+ this.config.endDate = moment().middleOfDay().locale(this.config.locale);
+ }
+ this.globals.currentDate = moment(this.config.startDate, this.config.format);
+ // validate min & max dates
+ if (this.config.minDate !== null && moment(this.config.minDate, this.config.format).isValid()) {
+ this.config.minDate = moment(this.config.minDate, this.config.format).middleOfDay();
+ } else {
+ this.config.minDate = null;
+ }
+ if (this.config.maxDate !== null && moment(this.config.maxDate, this.config.format).isValid()) {
+ this.config.maxDate = moment(this.config.maxDate, this.config.format).middleOfDay();
+ } else {
+ this.config.maxDate = null;
+ }
+ if (this.config.minDate !== null && this.config.maxDate !== null && this.config.minDate.isAfter(this.config.maxDate, "day")) {
+ swap = this.config.minDate.clone();
+ this.config.minDate = this.config.maxDate.clone();
+ this.config.maxDate = swap.clone();
+ swap = null;
+ }
+
+ // validate start and end dates according to min and max dates
+ if (this.config.minDate !== null && this.config.startDate !== null && this.config.minDate.isAfter(this.config.startDate, "day")) {
+ this.config.startDate = this.config.minDate.clone();
+ }
+ if (this.config.minDate !== null && this.config.endDate !== null && this.config.minDate.isAfter(this.config.endDate, "day")) {
+ this.config.endDate = this.config.minDate.clone();
+ }
+
+ if (this.config.maxDate !== null && this.config.startDate !== null && this.config.maxDate.isBefore(this.config.startDate, "day")) {
+ this.config.startDate = this.config.maxDate.clone();
+ }
+ if (this.config.maxDate !== null && this.config.endDate !== null && this.config.maxDate.isBefore(this.config.endDate, "day")) {
+ this.config.endDate = this.config.maxDate.clone();
+ }
+
+ if (this.checkRangeContinuity() === false ||
+ (this.config.disableOnlyStart == true && this.isDisabled(this.config.startDate, this.config.isHotelBooking)) ||
+ (this.config.singleDate === false && this.config.disableOnlyEnd && this.isDisabled(this.config.endDate, this.config.isHotelBooking)) ||
+ (this.config.startEmpty && this.globals.firstValueSelected == false)
+ ) {
+ this.clearInput();
+ }
+ },
+ /**
+ * sets config variables and relations between them,
+ * for example "inline" property converts the input to hidden input,
+ * applies default date from input to plugin and vice versa .. etc.
+ *
+ * @return void
+ */
+ applyConfig: function () {
+
+ // set target element to be updated
+ if (this.config.target === null) this.config.target = this.elem;
+
+ // disable dobcalendar if inline
+ if (this.config.inline === true) this.config.DOBCalendar = false;
+
+ // switch to singledate when dobcalendar is true
+ if (this.config.DOBCalendar == true) this.config.singleDate = true;
+
+ if(typeof this.config.container === "string") this.config.container = document.querySelector(this.config.container);
+
+ // fix dates
+ var props = ["startDate", "endDate", "minDate", "maxDate"];
+ for(var p = 0; p < props.length; p++){
+ var key = props[p];
+ this.config[key] = this.fixDateTime(this.config[key]);
+ }
+
+ this.config.ranges.map( function(range) {
+ range.startDate = this.fixDateTime(range.startDate);
+ range.endDate = this.fixDateTime(range.endDate);
+ return range;
+ }, this);
+
+ // create container relative to environment and settings
+ if (this.globals.isMobile === false) {
+ if (this.config.inline === true) {
+ this.container = document.createElement("div");
+ this.container.classList.add("caleran-container", "caleran-inline");
+ this.container.tabIndex = 1;
+ this.container.onclick = '';
+ this.elem.insertAdjacentElement("beforebegin", this.container);
+ this.container.appendChild(this.elem);
+ this.input = document.createElement("div");
+ this.input.classList.add("caleran-input");
+ this.container.appendChild(this.input);
+ this.elem.type = "hidden";
+ this.config.showButtons = false;
+ this.setViewport();
+ } else {
+ this.container = document.createElement("div");
+ this.container.classList.add("caleran-container", "caleran-popup");
+ this.container.style.display = 'none';
+ this.container.setAttribute("onclick", '');
+ var arrow = document.createElement("div");
+ arrow.classList.add("caleran-box-arrow-top");
+ this.container.appendChild(arrow);
+ this.input = document.createElement("div");
+ this.input.classList.add("caleran-input");
+ this.container.appendChild(this.input);
+ this.config.container.appendChild(this.container);
+ if (this.config.showButtons) {
+ this.globals.delayInputUpdate = true;
+ this.config.autoCloseOnSelect = false;
+ }
+ }
+ if (this.config.rangeOrientation === "horizontal") {
+ this.input.style.width = (this.config.calendarCount * this.config.oneCalendarWidth) + "px";
+ } else {
+ this.input.style.width = ((this.config.calendarCount * this.config.oneCalendarWidth) + this.config.verticalRangeWidth) + "px";
+ }
+ } else {
+ if (this.config.inline === true) {
+ this.container = document.createElement("div");
+ this.container.classList.add("caleran-container-mobile", "caleran-inline");
+ this.container.tabIndex = 1;
+ this.container.onclick = '';
+ this.elem.parentNode.insertBefore(this.container, this.elem);
+ this.container.appendChild(this.elem);
+ this.input = document.createElement("div");
+ this.input.classList.add("caleran-input");
+ this.container.appendChild(this.input);
+ this.elem.type = "hidden";
+ this.config.showButtons = false;
+ } else {
+ this.container = document.createElement("div");
+ this.container.classList.add(["caleran-container-mobile"]);
+ this.container.onclick = '';
+ this.config.container.appendChild(this.container);
+ this.input = document.createElement("div");
+ this.input.classList.add("caleran-input");
+ this.input.style.display = 'none';
+ this.container.appendChild(this.input);
+ if (this.config.showButtons) {
+ this.config.autoCloseOnSelect = false;
+ }
+ if (!this.config.autoCloseOnSelect) this.globals.delayInputUpdate = true;
+ }
+ // disable the soft keyboard on mobile devices
+ this.elem.onfocus = function(){
+ this.blur();
+ };
+ }
+
+ if (this.config.isHotelBooking) {
+ this.container.classList.add("caleran-hotel-style");
+ }
+
+ if(this.config.isRTL) {
+ this.container.style.direction = "rtl";
+ this.container.classList.add("caleran-rtl");
+ }
+
+ this.clearRangeSelection();
+ },
+ /**
+ * Clears the selected range info
+ */
+ clearRangeSelection: function () {
+ for (var range = 0; range < this.config.ranges.length; range++) {
+ this.config.ranges[range].selected = false;
+ }
+ var ranges = this.container.querySelectorAll(".caleran-range");
+ for(var r = 0; r < ranges.length; r++){
+ ranges[r].classList.remove("caleran-range-selected");
+ }
+ },
+ inArray: function(needle, haystack){
+ return Array.isArray(haystack) && haystack.indexOf(needle) >= 0;
+ },
+ /**
+ * Parse input from the source element's value and apply to config
+ * @return void
+ */
+ fetchInputs: function () {
+ var elValue = this.inArray(this.config.target.tagName, this.globals.valElements) ? this.config.target.value : this.config.target.innerText;
+ if (this.config.singleDate === false && elValue.indexOf(this.config.dateSeparator) > 0) {
+ var parts = elValue.split(this.config.dateSeparator);
+ if (parts.length == 2) {
+ if (moment(parts[0], this.config.format, this.config.locale).isValid() && moment(parts[1], this.config.format, this.config.locale).isValid()) {
+ this.config.startDate = moment(parts[0], this.config.format, this.config.locale).middleOfDay();
+ this.config.endDate = moment(parts[1], this.config.format, this.config.locale).middleOfDay();
+ this.globals.firstValueSelected = true;
+ }
+ }
+ } else if (this.config.singleDate === true) {
+ var value = elValue;
+ if (value != "" && moment(value, this.config.format, this.config.locale).isValid()) {
+ this.config.startDate = moment(value, this.config.format, this.config.locale).middleOfDay();
+ this.config.endDate = moment(value, this.config.format, this.config.locale).middleOfDay();
+ this.globals.firstValueSelected = true;
+ }
+ }// clear input if startEmpty is defined
+ if (this.config.startEmpty && !this.globals.firstValueSelected) {
+ this.clearInput();
+ }
+ // validate inputs
+ this.validateDates();
+ },
+ /**
+ * Draws the plugin interface when needed
+ * @return void
+ */
+ drawUserInterface: function () {
+ this.drawHeader();
+ this.calendars = this.input.querySelectorAll(".caleran-calendars")[0];
+ var nextCal = this.globals.currentDate.clone().middleOfDay();
+ this.globals.disabledDays = {};
+ for (var calendarIndex = 0; calendarIndex < this.config.calendarCount; calendarIndex++) {
+ this.drawCalendarOfMonth(nextCal);
+ nextCal = nextCal.add(1, "month");
+ }
+ // remove last border
+ var calendars = this.calendars.querySelectorAll(".caleran-calendar");
+ calendars[calendars.length - 1].classList.add("no-border-right");
+ this.drawArrows();
+ this.drawFooter();
+ if ((this.globals.isMobile === true || this.config.inline === false) && this.globals.initComplete) {
+ this.setViewport();
+ }
+ if (this.globals.startSelected === false) {
+ if (this.globals.initComplete) {
+ this.updateInput(false);
+ } else {
+ var delayState = this.globals.delayInputUpdate;
+ this.globals.delayInputUpdate = false;
+ this.updateInput(false);
+ this.globals.delayInputUpdate = delayState;
+ }
+ }
+ this.reDrawCells();
+ },
+ /**
+ * Draws the overlay to prevent clickthroughs when an instance is open on mobile view
+ * @return void
+ */
+ drawOverlay: function () {
+ if (this.globals.isMobile == false) return;
+ if (document.querySelectorAll(".caleran-overlay").length == 0) {
+ this.overlay = document.createElement("div");
+ this.overlay.classList.add("caleran-overlay");
+ document.body.appendChild(this.overlay);
+ var overlayEvents = function(){
+ var visibleInstances = document.querySelectorAll("body > .caleran-container-mobile");
+ if(visibleInstances.length > 0){
+ for(var vi = 0; vi < visibleInstances.length; vi++){
+ var item = visibleInstances[vi];
+ if(item.style.display != "none"){
+ item.querySelector(".caleran-cancel").click();
+ }
+ }
+ }
+ };
+ this.events.add(this.overlay, "click", overlayEvents, false);
+ this.events.add(this.overlay, "tap", overlayEvents, false);
+ } else {
+ this.overlay = document.querySelectorAll(".caleran-overlay")[0];
+ }
+ },
+ /**
+ * Draws the header part of the plugin, which contains start and end date displays
+ * @return void
+ */
+ drawHeader: function () {
+ var headers = "";
+ this.input.insertAdjacentHTML("beforeend", headers);
+ if (this.config.showHeader === false) {
+ headers = this.input.querySelectorAll(".caleran-header");
+ for(var h = 0; h < headers.length; h++) {
+ headers[h].style.display = 'none';
+ }
+ }
+ this.globals.headerStartDay = this.input.querySelector(".caleran-header-start-day");
+ this.globals.headerStartDate = this.input.querySelector(".caleran-header-start-date");
+ this.globals.headerStartWeekday = this.input.querySelector(".caleran-header-start-weekday");
+ this.globals.headerEndDay = this.input.querySelector(".caleran-header-end-day");
+ this.globals.headerEndDate = this.input.querySelector(".caleran-header-end-date");
+ this.globals.headerEndWeekday = this.input.querySelector(".caleran-header-end-weekday");
+ this.updateHeader();
+ },
+ /**
+ * Updates the start and end dates in the header
+ * @return void
+ */
+ updateHeader: function () {
+ if (this.config.startDate) this.config.startDate.locale(this.config.locale);
+ if (this.config.endDate) this.config.endDate.locale(this.config.locale);
+ if (this.config.startEmpty && this.globals.firstValueSelected === false) return;
+ if (this.config.startDate !== null) {
+ this.globals.headerStartDay.innerText = this.localizeNumbers(this.config.startDate.date());
+ if (this.globals.isMobile) this.globals.headerStartDate.innerText = this.config.startDate.format("MMM") + " " + this.localizeNumbers(this.config.startDate.year());
+ else this.globals.headerStartDate.innerText = this.config.startDate.format("MMMM") + " " + this.localizeNumbers(this.config.startDate.year());
+ this.globals.headerStartWeekday.innerText = this.config.startDate.format("dddd");
+ } else {
+ this.globals.headerStartDay.innerText = "";
+ this.globals.headerStartDate.innerText = "";
+ this.globals.headerStartWeekday.innerText = "";
+ }
+ if (this.config.singleDate === false) {
+ if (this.config.endDate !== null) {
+ this.globals.headerEndDay.innerText = this.localizeNumbers(this.config.endDate.date());
+ if (this.globals.isMobile) this.globals.headerEndDate.innerText = this.config.endDate.format("MMM") + " " + this.localizeNumbers(this.config.endDate.year());
+ else this.globals.headerEndDate.innerText = this.config.endDate.format("MMMM") + " " + this.localizeNumbers(this.config.endDate.year());
+ this.globals.headerEndWeekday.innerText = this.config.endDate.format("dddd");
+ } else {
+ this.globals.headerEndDay.innerText = "";
+ this.globals.headerEndDate.innerText = "";
+ this.globals.headerEndWeekday.innerText = "";
+ }
+ }
+ },
+ /**
+ * checks for updateInput to be run or dismissed
+ * @return {boolean} whether the input should be updated or not
+ */
+ isUpdateable: function () {
+ var returnReasons = this.globals.delayInputUpdate;
+ var clearReasons = this.config.startEmpty && !this.globals.firstValueSelected;
+ clearReasons = clearReasons || (this.config.singleDate === true && this.config.startDate === null);
+ clearReasons = clearReasons || (this.config.singleDate === false && (this.config.startDate === null || this.config.endDate === null));
+ if (clearReasons) this.clearInput();
+ if (clearReasons || returnReasons) return false;
+ return true;
+ },
+ /**
+ * Updates the connected input element value when the value is chosen
+ * @return void
+ */
+ updateInput: function (withEvents) {
+ if (this.config.startDate) this.config.startDate.locale(this.config.locale);
+ if (this.config.endDate) this.config.endDate.locale(this.config.locale);
+ if (!this.isUpdateable()) return;
+ if (this.inArray(this.config.target.tagName, this.globals.valElements)) {
+ if (this.config.singleDate === false) {
+ this.config.target.value = this.config.startDate.format(this.config.format) + this.config.dateSeparator + this.config.endDate.format(this.config.format);
+ } else {
+ this.config.target.value = this.config.startDate.format(this.config.format);
+ }
+ } else {
+ if (this.config.singleDate === false) {
+ this.config.target.innerText = this.config.startDate.format(this.config.format) + this.config.dateSeparator + this.config.endDate.format(this.config.format);
+ } else {
+ this.config.target.innerText = this.config.startDate.format(this.config.format);
+ }
+ }
+ if (this.globals.initComplete === true && withEvents === true) {
+ this.config.onafterselect(this, this.config.startDate.clone(), this.config.endDate.clone());
+ this.events.dispatch(this.input, "change");
+ }
+ },
+ /**
+ * Clears the input and prepares it for a new date range selection
+ * @return void
+ */
+ clearInput: function (stayEmpty) {
+ if (this.inArray(this.config.target.tagName, this.globals.valElements)) {
+ if (this.config.singleDate === false) this.config.target.value = "";
+ else this.config.target.value = "";
+ } else {
+ if (this.config.singleDate === false) this.config.target.innerText = "";
+ else this.config.target.innrtText = "";
+ }
+ this.config.startDate = null;
+ this.config.endDate = null;
+
+ if(stayEmpty) {
+ this.config.startEmpty = true;
+ this.globals.firstValueSelected = false;
+ } else {
+ if(this.config.startEmpty == true) this.globals.firstValueSelected = false;
+ }
+
+
+ if (this.globals.initComplete) {
+ this.updateHeader();
+ var applyButton = typeof this.footer == "undefined" ? [] : this.footer.querySelector(".caleran-apply");
+ if (applyButton.length > 0) applyButton.setAttribute("disabled", "disabled");
+ }
+ },
+ /**
+ * Draws the arrows of the month switcher
+ * @return void
+ */
+ drawArrows: function () {
+ var hideLeftArrow = this.config.hideOutOfRange && this.config.minDate && this.globals.currentDate.clone().add(-1, "month").isBefore(this.config.minDate, "month");
+ var hideRightArrow = this.config.hideOutOfRange && this.config.maxDate && this.globals.currentDate.clone().add(this.config.calendarCount, "month").isAfter(this.config.maxDate, "month");
+ var titles = this.container.querySelectorAll(".caleran-title");
+ if (titles.length > 0) {
+ var t, item;
+ if (this.globals.isMobile) {
+ if (!hideLeftArrow) {
+ for(t = 0; t < titles.length; t++){
+ titles[t].insertAdjacentHTML("afterbegin", "" + this.config.prevMonthIcon + "
");
+ }
+ }
+ if (!hideRightArrow) {
+ for(t = 0; t < titles.length; t++){
+ titles[t].insertAdjacentHTML("beforeend", "" + this.config.nextMonthIcon + "
");
+ }
+ }
+ } else {
+ if(this.config.isRTL){
+ if (!hideLeftArrow) titles[titles.length - 1].insertAdjacentHTML("afterbegin", "" + this.config.prevMonthIcon + "
");
+ if (!hideRightArrow) titles[0].insertAdjacentHTML("beforeend", "" + this.config.nextMonthIcon + "
");
+ }else{
+ if (!hideLeftArrow) titles[0].insertAdjacentHTML("afterbegin", "" + this.config.prevMonthIcon + "
");
+ if (!hideRightArrow) titles[titles.length - 1].insertAdjacentHTML("beforeend", "" + this.config.nextMonthIcon + "
");
+ }
+ }
+ }
+ },
+ /**
+ * Draws a single calendar
+ * @param [momentobject] _month: The moment object containing the desired month, for example given "18/02/2017" as moment object draws the calendar of February 2017.
+ * @return void
+ */
+ drawCalendarOfMonth: function (_month) {
+ var calendarStart = moment(_month).locale(this.config.locale).startOf("month").startOf("isoweek").middleOfDay();
+ var startOfWeek = calendarStart.day();
+ if (startOfWeek == 1 && this.config.startOnMonday === false) {
+ calendarStart.add(-1, "days");
+ startOfWeek = 0;
+ } else if (startOfWeek === 0 && this.config.startOnMonday === true) {
+ calendarStart.add(1, "days");
+ startOfWeek = 1;
+ }
+ if (calendarStart.isAfter(moment(_month).date(1))) calendarStart.add(-7, "day");
+ var calendarOutput = "";
+ var boxCount = 0;
+ var monthClass = "",
+ yearClass = "";
+ if (this.config.enableMonthSwitcher) monthClass = " class='caleran-month-switch'";
+ if (this.config.enableYearSwitcher) yearClass = " class='caleran-year-switch'";
+
+ calendarOutput += "
" + _month.locale(this.config.locale).format("MMMM") + " " + this.localizeNumbers(_month.year()) + "
";
+ calendarOutput += "
";
+ var localeWeekdays = moment.localeData(this.config.locale).weekdaysShort();
+
+ if (this.config.showWeekNumbers) calendarOutput += "
";
+ for (var days = startOfWeek; days < startOfWeek + 7; days++) {
+ calendarOutput += "
" + localeWeekdays[days % 7] + "
";
+ }
+ var prevDisabled = true, prevKey = null;
+ while (boxCount < 42) {
+ var cellDate = calendarStart.middleOfDay().unix();
+ var cellStyle = (_month.month() == calendarStart.month()) ? "caleran-day" : "caleran-disabled";
+ if (boxCount % 7 === 0 && this.config.showWeekNumbers) {
+ calendarOutput += "
" + calendarStart.format("ww") + "
";
+ }
+ calendarOutput += "
" + this.localizeNumbers(calendarStart.date()) + "
";
+
+ /**
+ * Disabled Date Values
+ * 1 => Start of Range disabled
+ * 2 => Fully disabled
+ * 3 => End of Range disabled
+ */
+
+ if (this.isDisabledOnDraw(calendarStart)) {
+ this.globals.disabledDays[cellDate] = prevDisabled == true ? 2 : 1;
+ prevDisabled = true;
+ prevKey = cellDate;
+ } else {
+ if (prevDisabled == true && prevKey != null) {
+ this.globals.disabledDays[prevKey] = 3;
+ }
+ prevDisabled = false;
+ }
+ calendarStart.add(moment.duration({ "days": 1 }));
+ boxCount++;
+ }
+ calendarOutput += "
";
+ calendarOutput += "
" + this.config.ranges[range_id].title + "
");
+ }
+ }
+ if (this.globals.isMobile && !this.config.inline) {
+ if (this.config.singleDate === true || this.config.showFooter === false) {
+ this.input.insertAdjacentHTML("beforeend", "");
+ }
+ }
+ if ((this.globals.isMobile && !this.config.inline) || (!this.globals.isMobile && !this.config.inline && this.config.showButtons)) {
+ if (this.config.rangeOrientation === "horizontal" || this.globals.isMobile) {
+ this.input.insertAdjacentHTML("beforeend", "");
+ } else {
+ this.input.querySelector(".caleran-right").insertAdjacentHTML("beforeend", "");
+ }
+ this.footer = this.input.querySelector(".caleran-footer");
+ this.footer.insertAdjacentHTML("beforeend", "");
+ this.footer.insertAdjacentHTML("beforeend", "");
+ if (this.globals.firstValueSelected === false && this.config.startEmpty == true) {
+ this.footer.querySelector(".caleran-apply").setAttribute("disabled", "disabled");
+ }
+ if (this.globals.isMobile && this.globals.endSelected === false) {
+ this.footer.querySelector(".caleran-apply").setAttribute("disabled", "disabled");
+ }
+ }
+ },
+ /**
+ * Draws next month's calendar (just calls this.reDrawCalendars with an 1 month incremented currentDate)
+ * Used in the next arrow click event
+ *
+ * @return void
+ */
+ drawNextMonth: function (event) {
+ event = event || window.event;
+
+ if(this.config.hideOutOfRange == true && this.config.maxDate && this.globals.currentDate.clone().add(this.config.calendarCount, "month").isAfter(this.config.maxDate, "month"))
+ {
+ return false;
+ }
+
+ if (this.globals.swipeTimeout === null) {
+ var that = this;
+ this.globals.swipeTimeout = setTimeout(function () {
+ if (that.config.onbeforemonthchange(that, that.globals.currentDate.clone().startOfMonth(), "next") === true) {
+ var buffer = that.calendars.scrollTop;
+ that.globals.currentDate.middleOfDay().add(1, "month");
+ that.reDrawCalendars();
+ that.calendars.scrollTop = buffer;
+ that.config.onaftermonthchange(that, that.globals.currentDate.clone().startOfMonth());
+ }
+ that.globals.swipeTimeout = null;
+ }, 100);
+ }
+ if(event.isCancellable) return this.stopBubbling(event);
+ return false;
+ },
+ /**
+ * Draws previous month's calendar (just calls this.reDrawCalendars with an 1 month decremented currentDate)
+ * Used in the prev arrow click event
+ *
+ * @return void
+ */
+ drawPrevMonth: function (event) {
+ event = event || window.event;
+
+ if(this.config.hideOutOfRange == true && this.config.minDate && this.globals.currentDate.clone().add(-1, "month").isBefore(this.config.minDate, "month"))
+ {
+ return false;
+ }
+
+ if (this.globals.swipeTimeout === null) {
+ var that = this;
+ this.globals.swipeTimeout = setTimeout(function () {
+ if (that.config.onbeforemonthchange(that, that.globals.currentDate.clone().startOfMonth(), "prev") === true) {
+ var buffer = that.calendars.scrollTop;
+ that.globals.currentDate.middleOfDay().subtract(1, "month");
+ that.reDrawCalendars();
+ that.calendars.scrollTop = buffer;
+ that.config.onaftermonthchange(that, that.globals.currentDate.clone().startOfMonth());
+ }
+ that.globals.swipeTimeout = null;
+ }, 100);
+ }
+ if(event.isCancellable) return this.stopBubbling(event);
+ return false;
+ },
+ /**
+ * Day cell click event handler
+ * @param [eventobject] e : The event object which contains the clicked cell in e.target property, which enables us to select dates
+ * @return void
+ */
+ cellClicked: function (e) {
+ var event = e || window.event;
+ var target = event.target || event.srcElement;
+ if (target.classList.contains("caleran-day") === false) target = this.closest(target, ".caleran-day");
+ var cell = parseInt(target.getAttribute("data-value"), 10);
+ var selectedMoment = moment.unix(cell).middleOfDay();
+ if (this.config.validateClick(selectedMoment) == false) return false;
+ if (this.config.singleDate === false) {
+ if (this.globals.startSelected === false) {
+ if (this.config.startDate !== null)
+ this.globals.startDateBackup = this.config.startDate.clone();
+ this.config.startDate = selectedMoment;
+ this.config.endDate = null;
+ this.globals.startSelected = true;
+ this.globals.endSelected = false;
+ var applyButton = typeof this.footer == "undefined" ? [] : this.footer.querySelector(".caleran-apply");
+ if (applyButton.length > 0) applyButton.setAttribute("disabled", "disabled");
+ this.config.onfirstselect(this, this.config.startDate.clone());
+ } else {
+ if (selectedMoment.isBefore(this.config.startDate)) {
+ var start = this.config.startDate.clone();
+ this.config.startDate = selectedMoment.clone();
+ selectedMoment = start;
+ }
+ if (selectedMoment.diff(this.config.startDate, "day") < this.config.minSelectedDays) {
+ this.globals.startSelected = false;
+ this.fetchInputs();
+ } else {
+ this.globals.startDateBackup = null;
+ this.config.endDate = selectedMoment;
+ this.globals.endSelected = true;
+ this.globals.startSelected = false;
+ this.globals.hoverDate = null;
+ if (this.config.onbeforeselect(this, this.config.startDate.clone(), this.config.endDate.clone()) === true && this.checkRangeContinuity() === true) {
+ this.globals.firstValueSelected = true;
+ this.clearRangeSelection();
+ this.updateInput(true);
+ }
+ else this.fetchInputs();
+ if (this.config.autoCloseOnSelect && (this.config.inline === false)) {
+ this.hideDropdown(event);
+ } else {
+ if (typeof this.footer != "undefined" && this.config.endDate != null) {
+ this.footer.querySelector(".caleran-apply").removeAttribute("disabled");
+ }
+ }
+ }
+ }
+ } else {
+ this.config.startDate = selectedMoment;
+ this.config.endDate = selectedMoment;
+ this.globals.endSelected = true;
+ this.globals.startSelected = false;
+ this.globals.hoverDate = null;
+ if (this.config.onbeforeselect(this, this.config.startDate.clone(), this.config.endDate.clone()) === true) {
+ this.globals.firstValueSelected = true;
+ this.clearRangeSelection();
+ this.updateInput(true);
+ } else {
+ this.fetchInputs();
+ }
+ if (this.config.autoCloseOnSelect && (this.config.inline === false)) {
+ this.hideDropdown(event);
+ } else {
+ if (typeof this.footer != "undefined" && this.config.endDate != null) {
+ this.footer.querySelector(".caleran-apply").removeAttribute("disabled");
+ }
+ }
+ }
+ this.reDrawCells();
+ this.updateHeader();
+ return this.stopBubbling(event);
+ },
+ /**
+ * Checks if the defined range is continous (doesn't include disabled ranges or disabled days by callback)
+ * @return boolean is continuous or not
+ */
+ checkRangeContinuity: function () {
+ var daysInRange = this.config.endDate.diff(this.config.startDate, "days");
+ var startDate = moment(this.config.startDate).middleOfDay();
+ /**
+ * variables affecting this:
+ * -------------------------
+ * config.isHotelBooking
+ * config.continuous
+ * config.disableOnlyStart
+ * config.disableOnlyEnd
+ *
+ * if disableOnlyStart or disableOnlyEnd is active, skip continuousity.
+ * else check continuousity
+ *
+ */
+ if (this.config.disableOnlyStart == true) {
+ // if disabling only start is active, just start date check will be sufficient
+ // false means continuousity is preserved, true means the date is disabled
+ return this.isDisabled(this.config.startDate, this.config.isHotelBooking) === false;
+ } else if (this.config.disableOnlyEnd == true) {
+ // if disabling only end is active, just end date check will be sufficient
+ // false means continuousity is preserved, true means the date is disabled
+ return this.isDisabled(this.config.endDate, this.config.isHotelBooking) === false;
+ } else {
+ if(this.config.continuous) {
+ var startDateUnix = startDate.middleOfDay().unix();
+ //check if startdate can be a start date
+ if (
+ // hotel style active, get only disabled.
+ // hotel style passing, get disabled.
+ this.isDisabled(startDateUnix, false) == true &&
+ // if hotel style is active check if start date is a range's start date
+ (this.config.isHotelBooking ? this.getDisabledLevel(startDateUnix) === 1 : true)) {
+ return false;
+ }
+
+ if(startDate.isSame(this.config.endDate, "day") == false){
+ startDate.middleOfDay().add(1, "days");
+ for (var i = 0; i <= daysInRange - 2; i++) {
+ startDateUnix = startDate.middleOfDay().unix();
+ if (this.getDisabledLevel(startDateUnix) !== undefined) return false;
+ startDate.add(1, "days");
+ }
+ }
+ // check if enddate can be an end date
+ startDateUnix = startDate.middleOfDay().unix();
+ if (
+ // hotel style active, get only disabled.
+ // hotel style passing, get disabled.
+ this.isDisabled(startDateUnix, false) == true &&
+ // if hotel style is active check if end date is a range's end date
+ (this.config.isHotelBooking ? this.getDisabledLevel(startDateUnix) === 3 : true)) {
+ return false;
+ }
+ }
+ }
+ return true;
+ },
+ /**
+ * Checks if given moment value is disabled for that calendar on first draw
+ * @param [moment] day : The day to be checked
+ * @return {boolean} If the day is disabled or not
+ */
+ isDisabledOnDraw: function (day) {
+ var mday = moment(day).middleOfDay();
+ if (this.config.disableDays(mday) === true) {
+ return true;
+ };
+ for (var rangeIndex = 0; rangeIndex < this.config.disabledRanges.length; rangeIndex++) {
+ var range = this.config.disabledRanges[rangeIndex];
+ if (mday.isBetween(range.start, range.end, "day", "[]")) {
+ return true;
+ }
+ }
+ },
+ /**
+ * Checks if given moment value is disabled for that calendar from the disabled array
+ * @param [moment] day : The day to be checked
+ * @return {boolean} If the day is disabled or not
+ */
+ isDisabled: function (day, hotelStyle) {
+ if (undefined === hotelStyle) hotelStyle = false;
+ if (this.config.disableOnlyStart == true && this.globals.startSelected == true) {
+ return false;
+ }
+ else if (this.config.disableOnlyEnd == true && this.globals.startSelected == false) {
+ return false;
+ }
+ else {
+ if (typeof day == "object" && day !== null) {
+ day = day.middleOfDay().unix();
+ }
+ if (hotelStyle && this.config.isHotelBooking) {
+ return this.globals.disabledDays[day] === 2;
+ }
+ return this.globals.disabledDays[day] !== undefined;
+ }
+ },
+ /**
+ * Gets the disabledDays record for the given day
+ * @param integer|object day
+ */
+ getDisabledLevel: function (day) {
+ if (typeof day == "object" && day !== null) {
+ day = day.middleOfDay().unix();
+ }
+ return this.globals.disabledDays[day];
+ },
+ /**
+ * Event triggered when a day is hovered
+ * @param [eventobject] e : The event object which contains the hovered cell in e.target property, which enables us to style hovered dates
+ * @return void
+ */
+ cellHovered: function (e) {
+ var event = e || window.event;
+ var target = event.target || event.srcElement;
+ if (target.classList.contains("caleran-day") === false) target = this.closest(target, ".caleran-day");
+ if(target) {
+ var cell = parseInt(target.getAttribute("data-value"), 10);
+ this.globals.hoverDate = moment.unix(cell).middleOfDay();
+ this.globals.keyboardHoverDate = null;
+ if (this.globals.startSelected === true) this.reDrawCells();
+ return this.stopBubbling(event);
+ }
+ },
+ /**
+ * Just a calendar refresher to be used with the new variables, updating the calendar view
+ * @return void
+ */
+ reDrawCalendars: function () {
+ //this.requestAnimFrame(this.proxy(function(){
+ this.input.innerHTML = "";
+ this.drawUserInterface();
+ this.container.focus();
+ /*if (this.globals.lastScrollY !== 0) {
+ window.scrollTo(this.globals.lastScrollX, this.globals.lastScrollY);
+ }*/
+ //}, this));
+ },
+ /**
+ * month switcher builder and processor method
+ * @return void
+ */
+ monthSwitchClicked: function () {
+ if (this.calendars.querySelectorAll(".caleran-month-selector").length > 0) return;
+ var that = this;
+ this.calendars.scrollTop = 0;
+ this.calendars.insertAdjacentHTML("beforeend", "");
+ var monthSelector = this.calendars.querySelector(".caleran-month-selector");
+ var currentMonth = this.globals.currentDate.get('month');
+ for (var m = 0; m < 12; m++) {
+ monthSelector.insertAdjacentHTML("beforeend", "" +
+ (this.config.numericMonthSelector ? (m + 1) : moment({ day: 15, hour: 12, month: m }).locale(this.config.locale).format(this.config.monthSwitcherFormat)) +
+ "
");
+ }
+ monthSelector.style.display = "block";
+ this.optimizeFontSize(monthSelector.querySelectorAll(".caleran-ms-month"));
+ this.rebindEventEach(monthSelector, ".caleran-ms-month", "click", function (event) {
+ if(!that.globals) return false;
+ that.globals.currentDate.month(parseInt(event.target.getAttribute("data-month"), 10));
+ that.config.onaftermonthchange(that, that.globals.currentDate.clone().startOfMonth());
+ that.reDrawCalendars();
+ return that.stopBubbling(event);
+ });
+ },
+ /**
+ * year switcher builder and processor method
+ * @return void
+ */
+ yearSwitchClicked: function () {
+ if (this.calendars.querySelectorAll(".caleran-year-selector").length > 0) return;
+ var that = this;
+ this.calendars.scrollTop = 0;
+ this.calendars.insertAdjacentHTML("beforeend", "");
+ var yearSelector = this.calendars.querySelector('.caleran-year-selector');
+ var currentYear = this.globals.currentDate.get('year');
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ yearSelector.setAttribute("data-year", currentYear);
+ for (var year = currentYear - 6; year < currentYear + 7; year++) {
+ yearSelector.insertAdjacentHTML("beforeend", "" + this.localizeNumbers(year) + "
");
+ }
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ yearSelector.style.display = "block";
+ this.optimizeFontSize(yearSelector.querySelectorAll(".caleran-ys-year"));
+
+ this.rebindEventScoped(document, ".caleran-ys-year", "click.caleranys", function (event) {
+ if(!that.globals) return false;
+ that.globals.currentDate.year(parseInt(event.target.getAttribute("data-year")));
+ that.config.onafteryearchange(that, that.globals.currentDate.clone().startOf("year"));
+ that.reDrawCalendars();
+ if(that.config.DOBCalendar == true){
+ that.calendars.querySelectorAll(".caleran-calendar")[0].querySelector(".caleran-month-switch").click();
+ }
+ return that.stopBubbling(event);
+ });
+
+ this.rebindEventScoped(document, ".caleran-ys-year-prev", "click.caleranysprev", function (event) {
+ if(!that.globals) return false;
+ var currentYear = parseInt(yearSelector.getAttribute("data-year"), 10) - 13;
+ var currentYearNow = that.globals.currentDate.get('year');
+ yearSelector.setAttribute("data-year", currentYear);
+ yearSelector.innerHTML = "";
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ for (var year = currentYear - 6; year < currentYear + 7; year++) {
+ yearSelector.insertAdjacentHTML("beforeend", "" + that.localizeNumbers(year) + "
");
+ }
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ return that.stopBubbling(event);
+ });
+
+ this.rebindEventScoped(document, ".caleran-ys-year-next", "click.caleranysnext", function (event) {
+ if(!that.globals) return false;
+ var currentYear = parseInt(yearSelector.getAttribute("data-year"), 10) + 13;
+ var currentYearNow = that.globals.currentDate.get('year');
+ yearSelector.setAttribute("data-year", currentYear);
+ yearSelector.innerHTML = "";
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ for (var year = currentYear - 6; year < currentYear + 7; year++) {
+ yearSelector.insertAdjacentHTML("beforeend", "" + that.localizeNumbers(year) + "
");
+ }
+ yearSelector.insertAdjacentHTML("beforeend", "
");
+ return that.stopBubbling(event);
+ });
+ },
+ /**
+ * Lowers the font size until all the text fits in the element
+ */
+ optimizeFontSize: function (element) {
+ for(var i = 0; i < element.length; i++){
+ var elem = element[i];
+ var wrapper = document.createElement("span"), parent = elem;
+ wrapper.classList.add("adjust-subject");
+ while(elem.firstChild) wrapper.appendChild(elem.firstChild);
+ parent.appendChild(wrapper);
+ parent.insertAdjacentHTML("beforeend", "i");
+ var adjustSubject = wrapper;
+ var fontAdjuster = parent.querySelector(".font-adjuster");
+ if (adjustSubject.offsetHeight === fontAdjuster.offsetHeight) {
+ fontAdjuster.parentNode.removeChild(fontAdjuster);
+ while(adjustSubject.firstChild) parent.appendChild(adjustSubject.firstChild);
+ adjustSubject.parentNode.removeChild(adjustSubject);
+ } else {
+ var loopCount = 0;
+ while (adjustSubject.offsetHeight !== fontAdjuster.offsetHeight && loopCount < 16) {
+ var startSize = 0;
+ if (typeof window.getComputedStyle !== "undefined") {
+ startSize = parseFloat(window.getComputedStyle(fontAdjuster, null).getPropertyValue('font-size'));
+ } else {
+ startSize = parseFloat(fontAdjuster.style.fontSize.replace(/px$/, ""));
+ }
+ adjustSubject.parentNode.style.fontSize = (startSize - 1) + "px";
+ fontAdjuster.style.fontSize = (startSize - 1) + "px";
+ if (startSize < 2) break;
+ loopCount++;
+ }
+ fontAdjuster.parentNode.removeChild(fontAdjuster);
+ while(adjustSubject.firstChild) parent.appendChild(adjustSubject.firstChild);
+ adjustSubject.parentNode.removeChild(adjustSubject);
+ }
+ }
+ },
+ /**
+ * Shows the caleran dropdown
+ * @return void
+ */
+ showDropdown: function (e) {
+ var event = e || window.event || jQuery.Event("click", { target: this.elem });
+ var eventTarget = event.target || event.srcElement;
+ if ((!this.globals.isMobile && this.container.style.display == "none") || (this.globals.isMobile && this.input.style.display == "none")) {
+ if (eventTarget !== this.elem) {
+ this.globals.dontHideOnce = true;
+ this.globals.initiator = eventTarget;
+ }
+ this.fetchInputs();
+ this.reDrawCalendars();
+ this.globals.startDateInitial = this.config.startDate;
+ this.globals.endDateInitial = this.config.endDate;
+ this.config.onbeforeshow(this);
+ if (this.globals.isMobile) {
+ this.input.style.display = "flex";
+ this.overlay.style.display = "block";
+ document.body.classList.add("caleran-open");
+ } else {
+ this.container.style.display = "block";
+ }
+ this.setViewport();
+ if(this.config.DOBCalendar == true){
+ this.calendars.querySelectorAll(".caleran-calendar")[0].querySelector(".caleran-year-switch").click();
+ }
+ this.config.onaftershow(this);
+ }
+ },
+ /**
+ * Hides the caleran dropdown
+ * @return void
+ */
+ hideDropdown: function (e) {
+ var event = e || window.event || new Event("click", { target: "body" });
+ var eventTarget = event.target || event.srcElement;
+ if (this.globals.initiator === eventTarget) return;
+ if (this.config.inline === false && ((!this.globals.isMobile && this.container.style.display !== "none") || (this.globals.isMobile && this.input.style.display !== "none"))) {
+ this.config.onbeforehide(this);
+ if (this.globals.isMobile) {
+ this.input.style.display = "none";
+ this.overlay.style.display = "none";
+ document.body.classList.remove("caleran-open");
+ } else {
+ this.container.style.display = "none";
+ }
+ this.globals.hoverDate = null;
+ if (this.globals.startDateBackup !== null) {
+ this.config.startDate = this.globals.startDateBackup;
+ this.globals.startSelected = false;
+ }
+ this.config.onafterhide(this);
+ }
+ },
+ /**
+ * When only a cell style update is needed, this function is used. This gives us the possibility to change styles without re-drawing the calendars.
+ * @return void
+ */
+ reDrawCells: function () {
+ var that = this;
+ var startDateUnix = this.config.startDate != null ? this.config.startDate.middleOfDay().unix() : null;
+ var endDateUnix = this.config.endDate != null ? this.config.endDate.middleOfDay().unix() : null;
+ var minDateUnix = this.config.minDate != null ? this.config.minDate.middleOfDay().unix() : null;
+ var maxDateUnix = this.config.maxDate != null ? this.config.maxDate.middleOfDay().unix() : null;
+ var hoverDateUnix = this.globals.hoverDate != null ? this.globals.hoverDate.middleOfDay().unix() : null;
+ var keyboardHoverDateUnix = this.globals.keyboardHoverDate != null ? this.globals.keyboardHoverDate.middleOfDay().unix() : null;
+ var currentDateUnix = moment().middleOfDay().unix();
+ this.lastHoverStatus = false;
+ for (var c = 0; c < this.config.calendarCount; c++) {
+ var calendar = this.input.querySelectorAll(".caleran-calendar")[c];
+ var cells = calendar.querySelectorAll(".caleran-days-container > div:not(.caleran-dayofweek):not(.caleran-weeknumber)");
+ var currentMonth = parseInt(calendar.getAttribute("data-month"), 10);
+ for (var i = 0; i < cells.length; i++) {
+ var cell = cells[i];
+ var cellDate = parseInt(cell.getAttribute("data-value"), 10);
+ var cellMoment = moment.unix(cellDate).middleOfDay().locale(that.config.locale);
+ var cellStyle = "caleran-day";
+ var cellDay = cellMoment.day();
+ // is weekend day (saturday or sunday) check
+ if (cellDay == 6 || cellDay === 0) cellStyle += " caleran-weekend";
+ // is today check
+ if (cellDate === currentDateUnix) cellStyle += " caleran-today";
+ cellStyle = this.addDisabledStyles(cell, cellMoment, cellDate, cellStyle, minDateUnix, maxDateUnix, currentMonth);
+ cellStyle = this.addSelectedStyles(cellDate, cellStyle, startDateUnix, endDateUnix, minDateUnix, maxDateUnix);
+ cellStyle = this.addHoverStyles(cell, cellDate, cellStyle, this, startDateUnix, hoverDateUnix, keyboardHoverDateUnix);
+ cell.setAttribute("class", cellStyle);
+ }
+ }
+ this.attachEvents();
+ this.config.ondraw(this);
+ },
+ /**
+ * returns calculated selected state style of the cell
+ * @param cellMoment current cell's day
+ * @param cellStyle current cell's already calculated style
+ * @return appended style of the cell
+ */
+ addSelectedStyles: function (cellDateUnix, cellStyle, startDateUnix, endDateUnix, minDateUnix, maxDateUnix) {
+ var that = this;
+ var cellStyleOriginal = cellStyle;
+
+ if (that.config.startEmpty === false || that.globals.firstValueSelected) {
+ // is the start of the range check
+ if (that.config.singleDate === false && startDateUnix !== null && startDateUnix === cellDateUnix) cellStyle += " caleran-start";
+ // is the end of the range check
+ if (that.config.singleDate === false && endDateUnix !== null && endDateUnix === cellDateUnix) cellStyle += " caleran-end";
+ // is between the start and the end range check
+ if (that.config.singleDate === false && startDateUnix !== null && endDateUnix !== null && cellDateUnix <= endDateUnix && cellDateUnix >= startDateUnix) cellStyle += " caleran-selected";
+ // is the selected date of single date picker
+ if (that.config.singleDate === true && startDateUnix !== null && startDateUnix === cellDateUnix) cellStyle += " caleran-selected caleran-start caleran-end";
+ }
+
+ //if (cellStyleOriginal != cellStyle) { cellStyle = cellStyle.replace("caleran-disabled", "caleran-day"); }
+
+ return cellStyle;
+ },
+ /**
+ * returns calculated hovered state style of the cell
+ * @param cellMoment current cell's day
+ * @param cellStyle current cell's already calculated style
+ * @return appended style of the cell
+ */
+ addHoverStyles: function (cell, cellDateUnix, cellStyle, ref, startDateUnix, hoverDateUnix, keyboardHoverDateUnix) {
+ // hovered date check
+ var that = this;
+ cellStyle.replace("caleran-hovered", "").replace("caleran-hovered-last", "").replace("caleran-hovered-first", "");
+ if (that.globals.startSelected === true && that.globals.endSelected === false && hoverDateUnix !== null) {
+ if ((cellDateUnix >= hoverDateUnix && cellDateUnix <= startDateUnix) ||
+ (cellDateUnix <= hoverDateUnix && cellDateUnix >= startDateUnix)) {
+ cellStyle += " caleran-hovered";
+ }
+ }
+ if (that.config.enableKeyboard == true && keyboardHoverDateUnix !== null) {
+ if (that.globals.startSelected === false) {
+ if (keyboardHoverDateUnix == cellDateUnix) {
+ cellStyle += " caleran-hovered";
+ }
+ } else {
+ if ((cellDateUnix <= startDateUnix && cellDateUnix >= keyboardHoverDateUnix) ||
+ (cellDateUnix >= startDateUnix && cellDateUnix <= keyboardHoverDateUnix)) {
+ cellStyle += " caleran-hovered";
+ }
+ }
+ }
+ if (this.lastHoverStatus === false && cellStyle.indexOf("caleran-hovered") > 0) {
+ this.lastHoverStatus = true;
+ cellStyle += " caleran-hovered-first";
+ }
+ if (this.lastHoverStatus === true && cellStyle.indexOf("caleran-hovered") < 0) {
+ var prev = cell.previousElementSibling;
+ prev = prev && prev.matches('.caleran-day') ? prev : null;
+ if(prev) prev.classList.add("caleran-hovered-last");
+ this.lastHoverStatus = false;
+ }
+ return cellStyle;
+ },
+ /**
+ * returns calculated disabled state style of the cell
+ * @param {object} cell current cell jquery object
+ * @param {object} cellMoment current cell's moment
+ * @param {integer} cellDateUnix current call's moment unix timestamp
+ * @param {string} cellStyle current cell's already calculated style
+ * @param {integer} minDateUnix minDate config moment unix timestamp
+ * @param {integer} maxDateUnix maxDate config moment unix timestamp
+ * @returns {string} appended style of the cell
+ */
+ addDisabledStyles: function (cell, cellMoment, cellDateUnix, cellStyle, minDateUnix, maxDateUnix, currentMonth) {
+ if (this.isDisabled(cellDateUnix)) {
+ if (this.config.isHotelBooking == false) {
+ cellStyle = cellStyle.replace("caleran-day", "caleran-disabled caleran-disabled-range");
+ } else {
+ switch (this.globals.disabledDays[cellDateUnix]) {
+ case 1:
+ cellStyle = cellStyle.replace("caleran-day", "caleran-day caleran-disabled-range caleran-disabled-range-start");
+ break;
+ case 2:
+ cellStyle = cellStyle.replace("caleran-day", "caleran-disabled caleran-disabled-range");
+ break;
+ case 3:
+ cellStyle = cellStyle.replace("caleran-day", "caleran-day caleran-disabled-range caleran-disabled-range-end");
+ break;
+ }
+ }
+ }
+ else if ((maxDateUnix != null && cellDateUnix > maxDateUnix) || (minDateUnix != null && cellDateUnix < minDateUnix)) {
+ cellStyle = cellStyle = cellStyle.replace("caleran-day", "caleran-disabled");
+ }
+ if (cellMoment.month() != currentMonth) {
+ cellStyle += " caleran-not-in-month";
+ }
+ return cellStyle;
+ },
+ /**
+ * Localizes the given number to the current locale
+ * @param {string} input The number to be localized
+ * @returns {string} The localized number string
+ */
+ localizeNumbers: function (input) {
+ return moment.localeData(this.config.locale).postformat('' + input);
+ },
+ /**
+ * Event triggered when a range link is clicked in the footer of the plugin
+ * @param {object} e the clicked range link
+ * @returns void
+ */
+ rangeClicked: function (e) {
+ var event = e || window.event;
+ var target = event.target || event.srcElement;
+ if (!target.hasAttribute("data-id")) return;
+ var range_id = target.getAttribute("data-id");
+ this.globals.currentDate = this.config.ranges[range_id].startDate.startOf('day').clone().middleOfDay();
+ this.config.startDate = this.config.ranges[range_id].startDate.startOf('day').clone().middleOfDay();
+ this.config.endDate = this.config.ranges[range_id].endDate.startOf('day').clone().middleOfDay();
+ this.globals.firstValueSelected = true;
+ if (this.checkRangeContinuity() === false) {
+ this.fetchInputs();
+ } else {
+ this.clearRangeSelection();
+ this.config.ranges[range_id].selected = true;
+ this.config.onrangeselect(this, this.config.ranges[range_id]);
+ this.reDrawCalendars();
+ this.setViewport();
+ if (this.config.autoCloseOnSelect) this.hideDropdown();
+ }
+ return this.stopBubbling(event);
+ },
+ /**
+ * Fixes the view positions of dropdown calendar plugin
+ * @returns void
+ */
+ setViewport: function () {
+ if(this.globals) {
+ if (this.globals.isMobile === true) {
+ if (this.input.style.display !== "none") {
+ this.events.dispatch(this.container, "caleran:resize");
+ }
+ } else {
+ if (this.container.style.display !== "none" && this.globals.initComplete && (this.globals.isMobile === false && this.config.inline === false)) {
+ var viewport = this.getViewport();
+ var result = false;
+ switch (this.config.showOn) {
+ case "top":
+ result = (this.config.autoAlign) ? this.positionOnTopAlign(viewport) : this.positionOnTop(false, viewport);
+ result = this.horizontalAlign(viewport);
+ break;
+ case "left":
+ result = (this.config.autoAlign) ? this.positionOnLeftAlign(viewport) : this.positionOnLeft(false, viewport);
+ result = this.verticalAlign(viewport);
+ break;
+ case "right":
+ result = (this.config.autoAlign) ? this.positionOnRightAlign(viewport) : this.positionOnRight(false, viewport);
+ result = this.verticalAlign(viewport);
+ break;
+ case "bottom":
+ result = (this.config.autoAlign) ? this.positionOnBottomAlign(viewport) : this.positionOnBottom(false, viewport);
+ result = this.horizontalAlign(viewport);
+ break;
+ case "center":
+ result = this.positionOnCenter(viewport);
+ break;
+ default:
+ result = (this.config.autoAlign) ? this.positionOnBottomAlign(viewport) : this.positionOnBottom(false, viewport);
+ result = this.horizontalAlign(viewport);
+ break;
+ }
+ if (this.config.rangeOrientation !== "horizontal") {
+ var height = this.input.querySelector(".caleran-header").clientHeight +
+ this.input.querySelector(".caleran-calendars").clientHeight +
+ ((this.input.querySelectorAll(".caleran-footer").length > 0) ? this.input.querySelector(".caleran-footer").clientHeight : 0);
+ this.input.querySelector(".caleran-right").style.maxHeight = height + "px";
+ }
+ }
+ }
+ }
+ },
+ /**
+ * Vertically aligns the dropdown when the viewport changes
+ * @param {object} viewport An object containing the current viewport dimensions
+ */
+ verticalAlign: function(viewport) {
+ var dropdown = this.getDimensions(this.container, true),
+ start_difference = viewport.top - dropdown.offsetTop,
+ end_difference = dropdown.offsetTop + dropdown.height - viewport.bottom,
+ arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+
+ if(start_difference > 0 && Math.abs(start_difference) < dropdown.height) {
+ this.container.style.top = (parseFloat(this.container.style.top.replace(/px$/, "")) + start_difference) + "px";
+ arrow.style.top = (parseFloat(arrow.style.top.replace(/px$/, "")) - start_difference) + "px";
+ } else if(end_difference > 0 && Math.abs(end_difference) < dropdown.height){
+ this.container.style.top = (parseFloat(this.container.style.top.replace(/px$/, "")) - end_difference) + "px";
+ arrow.style.top = (parseFloat(arrow.style.top.replace(/px$/, "")) + end_difference) + "px";
+ }
+ },
+ /**
+ * Horizontally aligns the dropdown when the viewport changes
+ * @param {object} viewport An object containing the current viewport dimensions
+ */
+ horizontalAlign: function(viewport) {
+ var dropdown = this.getDimensions(this.container, true), difference = dropdown.offsetLeft + dropdown.width - viewport.right,
+ arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ if(difference > 0 && Math.abs(difference) < dropdown.width){
+ this.container.style.left = (parseFloat(this.container.style.left.replace(/px$/,"")) - difference) + "px";
+ arrow.style.left = parseFloat(arrow.style.left.replace(/px$/,"")) + difference;
+ }
+ },
+ /**
+ * Gets the coordinates of the dropdown relative to the position
+ * @param string position
+ */
+ getDropdownPos: function (position) {
+ var input = this.getDimensions(this.elem, true);
+ // console.log(input);
+ // this.debugPosition("inputpos", input.offsetTop, input.offsetLeft, input.offsetLeft + input.width, input.offsetTop + input.height, "rgba(0,0,128,0.5)");
+ var dropdown = this.getDimensions(this.container, true);
+ var margin = parseInt(this.input.style.marginLeft, 10);
+ if(isNaN(margin)) margin = 0;
+ var arrow = 0;
+ if(this.container.querySelectorAll("div[class*='caleran-box-arrow']").length > 0) {
+ arrow = parseFloat(this.container.querySelectorAll("div[class*='caleran-box-arrow']")[0].offsetHeight / 2);
+ }
+ switch (position) {
+ case "left":
+ switch (this.config.arrowOn) {
+ case "top":
+ return {
+ top: input.offsetTop - margin - arrow - (input.height / 2),
+ left: input.offsetLeft - dropdown.width - margin,
+ arrow: 0
+ };
+ case "center":
+ return {
+ top: input.offsetTop - margin - (dropdown.height / 2),
+ left: input.offsetLeft - dropdown.width - margin,
+ arrow: (dropdown.height - (arrow * 2)) / 2 - (input.height / 2)
+ };
+ case "bottom":
+ return {
+ top: input.offsetTop - dropdown.height + input.height + (2 * margin) + arrow,
+ left: input.offsetLeft - dropdown.width - margin,
+ arrow: dropdown.height - (arrow * 4) - (3 * margin) - (input.height / 2)
+ };
+ default:
+ return {
+ top: input.offsetTop - margin - arrow - (input.height / 2),
+ left: input.offsetLeft - dropdown.width - margin,
+ arrow: 0
+ };
+ }
+ break;
+ case "right":
+ switch (this.config.arrowOn) {
+ case "top":
+ return {
+ top: input.offsetTop - margin - arrow - (input.height / 2),
+ left: input.offsetLeft + input.width + margin,
+ arrow: 0
+ };
+ case "center":
+ return {
+ top: input.offsetTop - margin - (dropdown.height / 2),
+ left: input.offsetLeft + input.width + margin,
+ arrow: (dropdown.height - (arrow * 2)) / 2 - (input.height / 2)
+ };
+ case "bottom":
+ return {
+ top: input.offsetTop - dropdown.height + input.height + (2 * margin) + arrow,
+ left: input.offsetLeft + input.width + margin,
+ arrow: dropdown.height - (arrow * 4) - (3 * margin) - (input.height / 2)
+ };
+ default:
+ return {
+ top: input.offsetTop - margin - arrow - (input.height / 2),
+ left: input.offsetLeft + input.width + margin,
+ arrow: 0
+ };
+ }
+ break;
+ case "top":
+ switch (this.config.arrowOn) {
+ case "left":
+ return {
+ top: input.offsetTop - dropdown.height - margin,
+ left: input.offsetLeft - margin,
+ arrow: 0
+ };
+ case "center":
+ return {
+ top: input.offsetTop - dropdown.height - margin,
+ left: input.offsetLeft - ((dropdown.width - (margin * 2) - input.width) / 2),
+ arrow: (dropdown.width - (arrow * 5)) / 2
+ };
+ case "right":
+ return {
+ top: input.offsetTop - dropdown.height - margin,
+ left: input.offsetLeft - (dropdown.width - input.width) + margin,
+ arrow: dropdown.width - (5 * arrow) + margin
+ };
+ default:
+ return {
+ top: input.offsetTop - dropdown.height - margin,
+ left: input.offsetLeft - margin,
+ arrow: 0
+ };
+ }
+ break;
+ case "bottom":
+ switch (this.config.arrowOn) {
+ case "left":
+ return {
+ top: input.offsetTop + input.height - margin + arrow,
+ left: input.offsetLeft - margin,
+ arrow: 0
+ };
+ case "center":
+ return {
+ top: input.offsetTop + input.height - margin + arrow,
+ left: input.offsetLeft - ((dropdown.width - (margin * 2) - input.width) / 2),
+ arrow: (dropdown.width - (arrow * 5)) / 2
+ };
+ case "right":
+ return {
+ top: input.offsetTop + input.height - margin + arrow,
+ left: input.offsetLeft - (dropdown.width - input.width) + margin,
+ arrow: dropdown.width - (5 * arrow) + margin
+ };
+ default:
+ return {
+ top: input.offsetTop + input.height - margin + arrow,
+ left: input.offsetLeft - margin,
+ arrow: 0
+ };
+ }
+ break;
+ case "center":
+ switch (this.config.arrowOn) {
+ case "center":
+ return {
+ top: input.offsetTop - margin - (dropdown.height / 2),
+ left: input.offsetLeft - ((dropdown.width - (margin * 2) - input.width) / 2)
+ };
+ }
+ break;
+ }
+ },
+ /**
+ * Moves the plugin dropdown relative to the input or return the calculated areas
+ * @param {boolean} returnValues whether the method should apply the CSS or return the calculated values
+ * @param {object} viewport the current viewport boundaries, top, right, bottom, left in pixels
+ * @returns {object} if returnValues is set to true, it returns the calculated positions
+ */
+ positionOnTop: function (returnValues, viewport) {
+ var setting = this.getDropdownPos("top");
+ if (!returnValues) {
+ this.container.style.left = (setting.left - 5) + "px";
+ this.container.style.top = (setting.top - 5) + "px";
+ var arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ arrow.setAttribute("class", "caleran-box-arrow-bottom");
+ arrow.style.left = setting.arrow + "px";
+ } else {
+ return setting;
+ }
+ },
+ /**
+ * Moves the plugin dropdown relative to the input or return the calculated areas
+ * @param {boolean} returnValues whether the method should apply the CSS or return the calculated values
+ * @param {object} viewport the current viewport boundaries, top, right, bottom, left in pixels
+ * @returns {object} if returnValues is set to true, it returns the calculated positions
+ */
+ positionOnBottom: function (returnValues, viewport) {
+ var setting = this.getDropdownPos("bottom");
+ if (!returnValues) {
+ this.container.style.left = (setting.left - 5) + "px";
+ this.container.style.top = (setting.top - 5) + "px";
+ var arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ arrow.setAttribute("class", "caleran-box-arrow-top");
+ arrow.style.left = setting.arrow + "px";
+ } else {
+ return setting;
+ }
+ },
+ /**
+ * Moves the plugin dropdown relative to the input or return the calculated areas
+ * @param {boolean} returnValues whether the method should apply the CSS or return the calculated values
+ * @param {object} viewport the current viewport boundaries, top, right, bottom, left in pixels
+ * @returns {object} if returnValues is set to true, it returns the calculated positions
+ */
+ positionOnLeft: function (returnValues, viewport) {
+ var setting = this.getDropdownPos("left");
+ if (!returnValues) {
+ this.container.style.left = (setting.left - 5) + "px";
+ this.container.style.top = (setting.top - 5) + "px";
+ var arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ arrow.setAttribute("class", "caleran-box-arrow-right");
+ arrow.style.top = setting.arrow + "px";
+ } else {
+ return setting;
+ }
+ },
+ /**
+ * Moves the plugin dropdown relative to the input or return the calculated areas
+ * @param {boolean} returnValues whether the method should apply the CSS or return the calculated values
+ * @param {object} viewport the current viewport boundaries, top, right, bottom, left in pixels
+ * @returns {object} if returnValues is set to true, it returns the calculated positions
+ */
+ positionOnRight: function (returnValues, viewport) {
+ var setting = this.getDropdownPos("right");
+ if (!returnValues) {
+ this.container.style.left = (setting.left + 5) + "px";
+ this.container.style.top = (setting.top - 5) + "px";
+ var arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ arrow.setAttribute("class", "caleran-box-arrow-left");
+ arrow.style.top = setting.arrow + "px";
+ } else {
+ return setting;
+ }
+ },
+ /**
+ * Moves the plugin dropdown relative to the input
+ * @param {object} viewport the current viewport boundaries, top, right, bottom, left in pixels
+ * @returns {object}
+ */
+ positionOnCenter: function (viewport) {
+ var setting = this.getDropdownPos("center");
+ var offsetX = Math.max((setting.left + this.container.clientWidth) - (viewport.right - 30), 0);
+ var offsetY = Math.max((setting.top + this.container.clientHeight) - (viewport.bottom - 30), 0);
+ if (!this.config.autoAlign) {
+ offsetX = 0;
+ offsetY = 0;
+ }
+ setting.left -= offsetX;
+ setting.top -= offsetY;
+ this.container.style.left = setting.left;
+ this.container.style.top = setting.top;
+ var arrow = this.container.querySelector("div[class*='caleran-box-arrow-']");
+ if(arrow) arrow.parentNode.removeChild(arrow);
+ },
+ /**
+ * Position the plugin dropdown relative to the input or return the calculated areas, and fixes if any overflow occurs
+ */
+ positionOnBottomAlign: function (viewport) {
+ var standardPosition = this.positionOnBottom(true, viewport);
+ var dropdown = this.getDimensions(this.container);
+ //this.debugPosition("bottomalign", standardPosition.top, standardPosition.left, standardPosition.left + dropdown.width, standardPosition.top + dropdown.height, "rgba(0,128,0,0.5)");
+ if (standardPosition.top + dropdown.height < viewport.bottom) {
+ this.positionOnBottom(false, viewport);
+ } else {
+ this.positionOnTop(false, viewport);
+ }
+ },
+ /**
+ * Position the plugin dropdown relative to the input or return the calculated areas, and fixes if any overflow occurs
+ */
+ positionOnLeftAlign: function (viewport) {
+ var standardPosition = this.positionOnLeft(true, viewport);
+ if (standardPosition.left > viewport.left - 50) {
+ this.positionOnLeft(false, viewport);
+ } else {
+ this.positionOnRight(false, viewport);
+ }
+ },
+ /**
+ * Position the plugin dropdown relative to the input or return the calculated areas, and fixes if any overflow occurs
+ */
+ positionOnRightAlign: function (viewport) {
+ var standardPosition = this.positionOnRight(true, viewport);
+ var dropdown = this.getDimensions(this.container);
+ if (standardPosition.left + dropdown.width < viewport.right + 50) {
+ this.positionOnRight(false, viewport);
+ } else {
+ this.positionOnLeft(false, viewport);
+ }
+ },
+ /**
+ * Position the plugin dropdown relative to the input or return the calculated areas, and fixes if any overflow occurs
+ */
+ positionOnTopAlign: function (viewport) {
+ var standardPosition = this.positionOnTop(true, viewport);
+ if (standardPosition.top > viewport.top) {
+ this.positionOnTop(false, viewport);
+ } else {
+ this.positionOnBottom(false, viewport);
+ }
+ },
+ /**
+ * Helper method for getting an element's inner/outer dimensions and positions
+ * @param [DOMelement] elem The element whose dimensions and position are wanted
+ * @param {boolean} outer true/false variable which tells the method to return inner(false) or outer(true) dimensions
+ * @return {object} an user defined object which contains the width and height of the element and top and left positions relative to the viewport
+ */
+ getDimensions: function (element, outer) {
+ var off = { left: 0, top: 0 }, parent = element;
+ this.attachScrollEvents(element);
+ // now return the dimensions
+ while(parent != null && parent != document.body) {
+ var style = window.getComputedStyle(parent);
+ if(style.position == "fixed") {
+ off.top = off.top + window.scrollY + parseInt(style.top, 10);
+ off.left = off.left + window.scrollX + parseInt(style.left, 10);
+ break;
+ } else {
+ off.left = off.left + parent.offsetLeft;
+ off.top = off.top + parent.offsetTop;
+ parent = parent.offsetParent;
+ }
+ }
+
+ return {
+ width: element.offsetWidth,
+ height: element.offsetHeight,
+ offsetLeft: off.left,
+ offsetTop: off.top
+ };
+ },
+ attachScrollEvents: function(element) {
+ var doc = document, body = doc.body;
+ if (element === this.elem && this.globals.parentScrollEventsAttached == false) {
+ // give each scroll parent a callback when they'll run on scrolling
+ var scrollParent = this.proxy(function () {
+ if(this.globals){
+ // dont run while it's already running
+ if (!this.globals.isTicking) {
+ this.globals.isTicking = true;
+ // rAF technique implementation
+ this.globals.rafID = this.requestAnimFrame(this.proxy(function () {
+ this.setViewport();
+ this.cancelAnimFrame(this.globals.rafID);
+ this.globals.isTicking = false;
+ }, this));
+ }
+ }
+ }, this);
+
+ // find the scrollable parents
+ if (element !== body) {
+ var parent = element.parentNode;
+ while (parent !== body && parent !== null) {
+ // if the parent is scrollable
+ if (parent.scrollHeight > parent.offsetHeight) {
+ // attach the scroll event
+ this.rebindEvent(parent, "scroll", scrollParent);
+ }
+ // switch to next parent
+ parent = parent.parentNode;
+ }
+ }
+ // don't attach again once attached.
+ this.globals.parentScrollEventsAttached = true;
+ }
+ },
+ /**
+ * Helper method for getting the window viewport
+ * @return {object} an user defined object which contains the rectangular position and dimensions of the viewport
+ */
+ getViewport: function () {
+ var top = this.globals.lastScrollY, left = this.globals.lastScrollX, bottom = top + window.innerHeight, right = left + window.innerWidth;
+ //this.debugPosition("caleran-viewport", top + 30, left + 30, right - 30, bottom - 30, "rgba(128,0,0,0.5)");
+ return { top: top, left: left, right: right, bottom: bottom };
+ },
+ debugPosition: function(name, top, left, right, bottom, color){
+ if(document.body.querySelectorAll("#"+name).length > 0){
+ document.body.removeChild(document.body.querySelector("#"+name));
+ }
+
+ document.body.insertAdjacentHTML("beforeend", ";
");
+ var vpelem = document.querySelector("#"+name);
+
+ vpelem.style.top = (top) + "px";
+ vpelem.style.left = (left) + "px";
+ vpelem.style.right = (right) + "px";
+ vpelem.style.bottom = (bottom) + "px";
+ vpelem.style.position = "absolute";
+ vpelem.style.backgroundColor = color;
+ vpelem.style.zIndex = 100000;
+ vpelem.style.opacity = 0.5;
+ vpelem.style.width = (right - left) + "px";
+ vpelem.style.height = (bottom - top) + "px";
+ vpelem.style.pointerEvents = "none";
+ },
+ rebindEventEach: function(container, selector, event, callback, once){
+ var elems = container.querySelectorAll(selector);
+ for(var el = 0; el < elems.length; el++) {
+ this.rebindEvent(elems[el], event, callback, once);
+ }
+ },
+ rebindEvent: function(element, event, callback, once){
+ var events = event.split(" ").map(function(item) { return item.trim(); });
+ for(var e = 0, len = events.length; e < len; e++) {
+ this.events.remove(element, events[e], callback);
+ this.events.add(element, events[e], callback, once);
+ }
+ },
+ rebindEventScoped: function(element, scope, event, callback, once){
+ this.rebindEvent(element, event, function(e) {
+ var eventTarget = e.target || e.srcElement;
+ // loop parent nodes from the target to the delegation node
+ if (eventTarget && (this.matches(eventTarget, scope) || this.closest(eventTarget, scope))) {
+ return callback.call(eventTarget, e);
+ }
+ }.bind(this), once);
+ },
+ matches: function(element, scope){
+ if (element && !element.matches) {
+ var proto = Object.getPrototypeOf(element);
+ proto.matches = proto.matchesSelector ||
+ proto.mozMatchesSelector || proto.msMatchesSelector ||
+ proto.oMatchesSelector || proto.webkitMatchesSelector;
+ try {
+ return proto.matches(scope);
+ }catch(e){
+ return false;
+ }
+ } else {
+ return element.matches(scope);
+ }
+ },
+ closest: function(element, selector){
+ var that = this;
+ if (element && !element.closest) {
+ var proto = Object.getPrototypeOf(element);
+ proto.closest = function(s) {
+ var el = this;
+ do {
+ if (that.matches(el, s)) return el;
+ el = el.parentElement || el.parentNode;
+ } while (el !== null && el.nodeType === 1);
+ return null;
+ };
+ try {
+ return proto.closest(selector);
+ }catch(e){
+ return false;
+ }
+ } else {
+ return element.closest(selector);
+ }
+ },
+ removeEventEach: function(container, selector, event) {
+ var events = event.split(" ").map(function(item) { return item.trim(); }), that = this;
+ for(var e = 0, len = events.length; e < len; e++) {
+ var items = container.querySelectorAll(selector);
+ for(var i = 0, len2 = items.length; i < len2; i++){
+ this.events.remove(items[i], events[e]);
+ }
+ }
+ },
+ /**
+ * Attaches the related events on the elements after render/update
+ * @return void
+ */
+ attachEvents: function () {
+ var clickNextEvent = this.drawNextMonth.bind(this);
+ var clickPrevEvent = this.drawPrevMonth.bind(this);
+ var clickCellEvent = this.cellClicked.bind(this);
+ var hoverCellEvent = this.cellHovered.bind(this);
+ var rangeClickedEvent = this.rangeClicked.bind(this);
+ var monthSwitchClickEvent = this.monthSwitchClicked.bind(this);
+ var yearSwitchClickEvent = this.yearSwitchClicked.bind(this);
+ var clickEvent = "click";
+
+ this.rebindEventEach(this.container, ".caleran-next", clickEvent, !this.config.isRTL ? clickNextEvent : clickPrevEvent, true);
+ this.rebindEventEach(this.container, ".caleran-prev", clickEvent, !this.config.isRTL ? clickPrevEvent : clickNextEvent, true);
+ this.rebindEventEach(this.container, ".caleran-day", clickEvent, clickCellEvent, false);
+ this.rebindEventEach(this.container, ".caleran-day", "mouseover", hoverCellEvent, false);
+ this.removeEventEach(this.container, ".caleran-disabled:not(.caleran-day)", clickEvent);
+ this.rebindEventEach(this.container, ".caleran-range", clickEvent, rangeClickedEvent, false);
+ this.rebindEventEach(this.container, ".caleran-month-switch", clickEvent, monthSwitchClickEvent, false);
+ this.rebindEventEach(this.container, ".caleran-year-switch", clickEvent, yearSwitchClickEvent, false);
+
+ if (this.globals.isMobile === true && this.config.enableSwipe == true) {
+ this.rebindEvent(this.container, "touchstart", function(e){
+ if(this.globals && event.changedTouches.length > 0){
+ this.globals.swipeX = event.changedTouches[0].screenX;
+ this.globals.swipeY = event.changedTouches[0].screenY;
+ this.globals.swipeStart = +new Date();
+ }
+ }.bind(this));
+ this.rebindEvent(this.container, "touchend", function(event){
+ if(this.globals && event.changedTouches.length > 0 &&
+ Math.abs(this.globals.swipeY - event.changedTouches[0].screenY) < 50 &&
+ Math.abs(this.globals.swipeX - event.changedTouches[0].screenX) > 100 &&
+ ((+new Date()) - this.globals.swipeStart) < 250) {
+ if(this.globals.swipeX < event.changedTouches[0].screenX) clickNextEvent();
+ else if(this.globals.swipeX >= event.changedTouches[0].screenX) clickPrevEvent();
+ }
+ }.bind(this));
+ }
+
+ if ((this.globals.isMobile || this.config.showButtons) && !this.config.inline) {
+ this.rebindEventEach(this.input, ".caleran-cancel", "click", this.proxy(function (event) {
+ if(this.config.onCancel(this, this.config.startDate, this.config.endDate) == true) {
+ if (this.globals.startDateInitial) this.config.startDate = this.globals.startDateInitial.clone();
+ if (this.globals.endDateInitial) this.config.endDate = this.globals.endDateInitial.clone();
+ this.hideDropdown(event);
+ }
+ }, this), false);
+
+ this.rebindEventEach(this.input, ".caleran-apply", "click", this.proxy(function (event) {
+ if (this.config.onbeforeselect(this, this.config.startDate.clone(), this.config.endDate.clone()) === true && this.checkRangeContinuity() === true) {
+ this.globals.firstValueSelected = true;
+ if (this.globals.delayInputUpdate) {
+ this.globals.delayInputUpdate = false;
+ this.updateInput(true);
+ this.globals.delayInputUpdate = true;
+ }
+ else {
+ this.updateInput(true);
+ }
+ } else {
+ this.fetchInputs();
+ }
+ this.hideDropdown(event);
+ }, this), false);
+ }
+ },
+ isVisible: function( elem ) {
+ return elem.offsetWidth > 0 && elem.offsetHeight > 0;
+ },
+ /**
+ * Events per instance
+ */
+ addInitialEvents: function () {
+ // buffer current scope
+ var that = this;
+
+ // create namespaced event name
+ var eventClick = "click";
+
+ // create a instance specific unique document click event, which will be used to hide the dropdown
+ this.events.add(document, "click", this.proxy(function (e) {
+ if (this.globals && this.globals.isMobile === false && this.config.inline === false) {
+ var event = e || window.event || new Event("click", { target: "body" });
+ var eventTarget = event.target || event.srcElement;
+ if (this.contains(this.container, eventTarget) === false &&
+ this.elem !== eventTarget && this.isVisible(this.container)) {
+ this.hideDropdown(event);
+ }
+ }
+ }, this));
+
+ // if the keyboard interaction is enabled, redefine the click event
+ if (this.config.enableKeyboard) eventClick = "click focus";
+
+ // prepare the input click + focus event which will open the dropdown
+ this.rebindEvent(this.elem, eventClick, this.proxy(this.debounce(function (e) {
+ var event = e || window.event || new Event("click", { target: "body" });
+ var eventTarget = event.target || event.srcElement;
+ if (this.input.clientHeight > 0 && this.config.target !== eventTarget) {
+ this.hideDropdown(event);
+ } else {
+ this.events.dispatch(document, "click");
+ this.showDropdown(event);
+ }
+ }, 100, true), this), false);
+
+ // on mobile screens, add an event to restyle the modal when a layout change occurs
+ if (this.globals.isMobile) {
+ this.events.add(window, "resize", function () {
+ that.events.dispatch(that.container, "caleran:resize");
+ });
+ }
+
+ // define the mobile resize event
+ this.events.add(this.container, "caleran:resize", function () {
+ that.globals.rafID = that.requestAnimFrame(function () {
+ if(that.globals) {
+ if (that.input.style.display !== "none") {
+ var oneCalendarHeight = that.input.querySelector(".caleran-calendar:first-child");
+ if(oneCalendarHeight && that.isVisible(oneCalendarHeight)) {
+ oneCalendarHeight = oneCalendarHeight.clientHeight;
+ that.input.querySelector(".caleran-calendars").style.height = oneCalendarHeight + "px";
+ if (that.input.offsetTop < 0) that.input.classList.add("caleran-input-top-reset");
+ if (window.innerWidth > window.innerHeight) {
+ // landscape mode
+ that.input.style.height = oneCalendarHeight + "px";
+ } else {
+ // portrait mode
+ that.input.style.height = "auto";
+ }
+ }
+ that.cancelAnimFrame(that.globals.rafID);
+ }
+ }
+ });
+ });
+
+ // run the event once if the environment is mobile and (possibly) display is inline
+ if (this.input.style.display !== "none" && this.globals.isMobile) {
+ this.events.dispatch(this.container, "caleran:resize");
+ }
+
+ // append the desktop layout refreshing event
+ if (this.globals.isMobile === false) {
+ this.rebindEvent(window, "resize scroll", function () {
+ // dont run while it's already running
+ if(that.globals) {
+ if (!that.globals.isTicking) {
+ that.globals.isTicking = true;
+ // rAF technique implementation
+ that.globals.lastScrollX = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft;
+ that.globals.lastScrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+ that.globals.rafID = that.requestAnimFrame(that.proxy(function () {
+ if(this.globals){
+ this.setViewport();
+ this.globals.isTicking = false;
+ this.cancelAnimFrame(this.globals.rafID);
+ }
+ }, that));
+ }
+ }
+ });
+ }
+ },
+ contains:function(parentNode,childNode){
+ if('contains' in parentNode) {
+ return parentNode.contains(childNode);
+ }
+ else {
+ return parentNode.compareDocumentPosition(childNode) % 16;
+ }
+ },
+ /**
+ * cross browser event bubbling (propagation) prevention handler
+ * @return void
+ */
+ stopBubbling: function (e) {
+ if (typeof e.stopPropagation !== "undefined") {
+ e.stopPropagation();
+ } else if (typeof e.cancelBubble !== "undefined") {
+ e.cancelBubble = true;
+ }
+ if (typeof e.preventDefault !== "undefined") {
+ e.preventDefault();
+ }
+ e.returnValue = false;
+ return false;
+ },
+ /**
+ * Delays a multiple triggered method execution after the last one has been triggered
+ * @return [function] given callback execution promise/result
+ */
+ debounce: function (func, wait, immediate) {
+ return function () {
+ var context = this, args = arguments;
+ if(context.globals){
+ var later = function () {
+ if(context.globals){
+ context.globals.throttleTimeout = null;
+ if (!immediate) func.apply(context, args);
+ }
+ };
+ var callNow = immediate && !context.globals.throttleTimeout;
+ clearTimeout(context.globals.throttleTimeout);
+ context.globals.throttleTimeout = setTimeout(later, wait);
+ if (callNow) func.apply(context, args);
+ }
+ };
+ },
+ /**
+ * Mimics jQuery.proxy
+ */
+ proxy: function(callback, scope) {
+ return callback.bind(scope);
+ },
+ extend: function(defaults, options) {
+ var extended = {};
+
+ copyObj(extended, defaults);
+ copyObj(extended, options);
+
+ function copyObj(to, from) {
+ for (var key in from) {
+ if (Object.prototype.hasOwnProperty.call(from, key)) {
+ to[key] = from[key];
+ }
+ }
+ }
+ return extended;
+ },
+ /**
+ * javascript rAF implementation for cross browser compatibility
+ */
+ requestAnimFrame: function (callback) {
+ if (typeof window.requestAnimationFrame === "function") return requestAnimationFrame(callback);
+ if (typeof window.webkitRequestAnimationFrame === "function") return webkitRequestAnimationFrame(callback);
+ if (typeof window.mozRequestAnimationFrame === "function") return mozRequestAnimationFrame(callback);
+ return setTimeout(callback, 100 / 6);
+ },
+ /**
+ * javascript cAF implementation for cross browser compatibility
+ */
+ cancelAnimFrame: function (id) {
+ if (typeof window.cancelAnimationFrame === "function") return cancelAnimationFrame(id);
+ if (typeof window.webkitCancelAnimationFrame === "function") return webkitCancelAnimationFrame(id);
+ if (typeof window.mozCancelAnimationFrame === "function") return mozCancelAnimationFrame(id);
+ return clearTimeout(id);
+ },
+ /**
+ * Attaches keyboard events if enabled
+ * @return void
+ */
+ addKeyboardEvents: function () {
+ if (this.config.enableKeyboard) {
+ var keyDownEvent = function (event) {
+ var keycode = (event.which) ? event.which : event.keyCode;
+ if (this.globals.keyboardHoverDate === null) {
+ if (this.config.startDate === null) {
+ this.globals.keyboardHoverDate = moment({
+ day: 1,
+ month: parseInt(this.calendars.first().getAttribute("data-month"))
+ }).middleOfDay();
+ } else {
+ this.globals.keyboardHoverDate = this.config.startDate.clone().middleOfDay();
+ }
+ } else {
+ this.globals.keyboardHoverDate.middleOfDay();
+ }
+ var shouldReDraw = false, shouldPrevent = false;
+ switch (keycode) {
+ case 37: // left
+ this.globals.keyboardHoverDate.add(-1, "day");
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 38: // top
+ this.globals.keyboardHoverDate.add(-1, "week");
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 39: // right
+ this.globals.keyboardHoverDate.add(1, "day");
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 40: // bottom
+ this.globals.keyboardHoverDate.add(1, "week");
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 32: // space
+ this.input.querySelectorAll(".caleran-day[data-value='" + this.globals.keyboardHoverDate.middleOfDay().unix() + "']")[0].click();
+ shouldReDraw = false;
+ shouldPrevent = true;
+ break;
+ case 33: // page up
+ if (event.shiftKey) {
+ this.globals.keyboardHoverDate.add(-1, "years");
+ } else {
+ this.globals.keyboardHoverDate.add(-1, "months");
+ }
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 34: // page down
+ if (event.shiftKey) {
+ this.globals.keyboardHoverDate.add(1, "years");
+ } else {
+ this.globals.keyboardHoverDate.add(1, "months");
+ }
+ shouldReDraw = true;
+ shouldPrevent = true;
+ break;
+ case 27: // esc
+ case 9: // tab
+ this.hideDropdown(event);
+ break;
+ case 36: // home
+ if (event.shiftKey) {
+ this.globals.keyboardHoverDate = moment().middleOfDay();
+ shouldReDraw = true;
+ shouldPrevent = true;
+ }
+ break;
+ }
+ if (shouldReDraw || shouldPrevent) {
+ this.globals.keyboardHoverDate = this.globals.keyboardHoverDate.middleOfDay();
+ var days = this.input.querySelectorAll(".caleran-day[data-value]");
+ if (this.globals.keyboardHoverDate.isBefore(moment.unix(days[0].getAttribute("data-value")), "day") ||
+ this.globals.keyboardHoverDate.isAfter(moment.unix(days[days.length - 1].getAttribute("data-value")), "day")) {
+ this.globals.currentDate = this.globals.keyboardHoverDate.clone().startOfMonth();
+ this.reDrawCalendars();
+ shouldReDraw = false;
+ }
+ if (shouldReDraw) {
+ this.globals.hoverDate = null;
+ this.reDrawCells();
+ }
+ if (shouldPrevent) return this.stopBubbling(event);
+ return false;
+ }
+ }.bind(this);
+ this.rebindEvent(this.elem, "keydown", keyDownEvent, false);
+ this.rebindEvent(this.container, "keydown", keyDownEvent, false);
+ }
+ },
+ /**
+ * Destroys the instance
+ */
+ destroy: function () {
+ if (this.config.onBeforeDestroy(this)) {
+ this.events.remove(this.container, "caleran:resize");
+ if (this.config.inline) {
+ this.input.parentNode.removeChild(this.input);
+ if (this.globals.isMobile)
+ this.unwrap(this.elem, "caleran-container-mobile");
+ else
+ this.unwrap(this.elem, "caleran-container");
+ this.elem.type = 'text';
+ } else {
+ this.container.parentNode.removeChild(this.container);
+ }
+ this.events.remove(document, this.globals.documentEvent);
+ this.elem.caleran = null;
+ this.config.ondestroy(this);
+
+ var i = null;
+
+ for(i in this.config) this.config[i] = null;
+ this.config = null;
+
+ for(i in this.globals) this.globals[i] = null;
+ this.globals = null;
+ }
+ },
+ unwrap: function (item, parentClass) {
+ if(item && item.parentNode && item.parentNode.classList.contains(parentClass)) {
+ item.parentNode.insertAdjacentHTML("beforebegin", item.parentNode.innerHTML);
+ var wrapper = item.parentNode.parentNode.querySelector("." + parentClass);
+ wrapper.parentNode.removeChild(wrapper);
+ }
+ },
+ /**
+ * Detects if the browser is mobile
+ * @return {boolean} if the browser is mobile or not
+ */
+ checkMobile: function () {
+ return window.matchMedia("only screen and (max-width: " + this.config.mobileBreakpoint + "px)").matches;
+ },
+ /**
+ * Converts the given datetime variable to momentjs object
+ * @param {mixed} datetime the datetime variable to convert to moment object
+ * @return {momentobject} the converted variable
+ */
+ fixDateTime: function(datetime){
+ if(datetime != null && moment.isMoment(datetime) == false){
+ if(typeof datetime === "string"){
+ datetime = moment(datetime, this.config.format).locale(this.config.locale);
+ }else{
+ datetime = moment(datetime).locale(this.config.locale);
+ }
+ }
+ return datetime;
+ },
+ /**
+ * set start date & time programmatically
+ * @param {moment object | js Date object | ISO Datetime string} datetime the value to be set
+ */
+ setStart: function (datetime) {
+ var datetimeConverted = this.fixDateTime(datetime);
+ if (this.isDisabled(datetimeConverted) === false && moment(datetimeConverted).isValid()) {
+ this.config.startDate = moment(datetimeConverted);
+ this.refreshValues();
+ }
+ },
+ /**
+ * set end date & time programmatically
+ * @param {moment object | js Date object | ISO Datetime string} datetime the value to be set
+ */
+ setEnd: function (datetime) {
+ var datetimeConverted = this.fixDateTime(datetime);
+ if (this.isDisabled(datetimeConverted) === false && moment(datetimeConverted).isValid()) {
+ this.config.endDate = moment(datetimeConverted);
+ this.refreshValues();
+ }
+ },
+ /**
+ * set min date & time programmatically
+ * @param {moment object | js Date object | ISO Datetime string} datetime the value to be set
+ */
+ setMinDate: function (datetime) {
+ var datetimeConverted = this.fixDateTime(datetime);
+ if (moment(datetimeConverted).isValid()) {
+ this.config.minDate = moment(datetimeConverted);
+ this.refreshValues();
+ }
+ },
+ /**
+ * set max date & time programmatically
+ * @param {moment object | js Date object | ISO Datetime string} datetime the value to be set
+ */
+ setMaxDate: function (datetime) {
+ var datetimeConverted = this.fixDateTime(datetime);
+ if (moment(datetimeConverted).isValid()) {
+ this.config.maxDate = moment(datetimeConverted);
+ this.refreshValues();
+ }
+ },
+ /**
+ * Sets the displayed month and year
+ * @param {moment object | js Date object | ISO Datetime string} datetime the value to be set
+ */
+ setDisplayDate: function (datetime) {
+ var datetimeConverted = this.fixDateTime(datetime);
+ if (moment(datetimeConverted).isValid()) {
+ this.globals.currentDate = moment(datetimeConverted);
+ this.reDrawCalendars();
+ }
+ },
+ /**
+ * private method to reset the startdate and enddate to the input
+ * @returns void
+ */
+ refreshValues: function () {
+ var backup = this.globals.delayInputUpdate;
+ this.globals.delayInputUpdate = false;
+ this.validateDates();
+ this.updateInput();
+ this.globals.delayInputUpdate = backup;
+ this.reDrawCells();
+ },
+ eventsPrototype: function(){
+ return {
+ instanceId: null,
+ init: function(id){
+ this.instanceId = id;
+ },
+ add: function(target, event, callback, once) {
+ var that = this;
+ // create eventbag if it doesn't exist
+ target.eventsList = target.eventsList || {};
+ event += ".caleran_" + this.instanceId;
+ var callbackName = event + "__" + Object.keys(target.eventsList).filter(function(key){
+ return key.indexOf(event + "__") === 0;
+ }).length;
+ if(once) {
+ target.eventsList[callbackName] = function(e){
+ callback(e);
+ that.remove(target, event, callback);
+ };
+ } else {
+ target.eventsList[callbackName] = function(e){
+ callback(e);
+ };
+ }
+ var genericEvent = event.split(/\./)[0];
+ if(target.addEventListener) {
+ target.addEventListener(genericEvent, target.eventsList[callbackName], false);
+ } else if (target.attachEvent) {
+ target.attachEvent("on" + genericEvent, target.eventsList[callbackName]);
+ } else {
+ target["on" + genericEvent] = target.eventsList[callbackName];
+ }
+ },
+ remove: function(target, event, callback) {
+ if(typeof target.eventsList === "object"){
+ var eventKeys = [];
+ event += ".caleran_" + this.instanceId;
+ eventKeys = Object.keys(target.eventsList).filter(function(key){
+ return key.indexOf(event + "__") === 0;
+ });
+ for(var ek = 0; ek < eventKeys.length; ek++){
+ var eventKey = eventKeys[ek];
+ var genericEvent = event.split(/\./)[0];
+ if(typeof target.removeEventListener === "function") {
+ target.removeEventListener(genericEvent, target.eventsList[eventKey]);
+ } else if(target.detachEvent) {
+ target.detachEvent("on" + genericEvent, target.eventsList[eventKey]);
+ } else {
+ target["on" + genericEvent] = null;
+ }
+ delete target.eventsList[eventKey];
+ }
+ } else {
+ if (typeof target.removeEventListener === "function") {
+ target.removeEventListener(event, null);
+ } else if(target.detachEvent) {
+ target.detachEvent("on" + event, null);
+ }
+ }
+ },
+ dispatch: function(target, event) {
+ if(typeof target.eventsList === "object"){
+ event += ".caleran_" + this.instanceId;
+ var eventKeys = Object.keys(target.eventsList).filter(function(key){
+ return key.indexOf(event + "__") == 0;
+ });
+ for(var ek = 0; ek < eventKeys.length; ek++){
+ var eventKey = eventKeys[ek];
+ var genericEvent = eventKey.split(/\./)[0];
+ this.triggerEvent(target, genericEvent);
+ };
+ } else {
+ this.triggerEvent(target, event);
+ }
+ },
+ triggerEvent: function(el, eventName)
+ {
+ var event;
+ if(document.createEvent){
+ event = document.createEvent('HTMLEvents');
+ event.initEvent(eventName, false, true);
+ }else if(document.createEventObject){// IE < 9
+ event = document.createEventObject();
+ event.eventType = eventName;
+ }
+ event.eventName = eventName;
+ if(el.dispatchEvent){
+ el.dispatchEvent(event);
+ }else if(el.fireEvent && htmlEvents['on'+eventName]){// IE < 9
+ el.fireEvent('on'+event.eventType,event);// can trigger only real event (e.g. 'click')
+ }else if(el[eventName]){
+ el[eventName]();
+ }else if(el['on'+eventName]){
+ el['on'+eventName]();
+ }
+ }
+ };
+ }
+ };
+
+ caleranPlugin.defaults = caleranPlugin.prototype.defaults;
+ /**
+ * The main handler of caleran plugin
+ * @param {object} options javascript object which contains element specific or range specific options
+ * @return {caleran} plugin reference
+ */
+ window.caleran = function (selector, options) {
+ var i = 0;
+ if(typeof selector == "string"){
+ var items = document.querySelectorAll(selector);
+ for(i = 0; i < items.length; i++){
+ var item = items[i];
+ item.caleran = new caleranPlugin(item, options).init();
+ };
+ }else if(typeof selector == "object"){
+ if(NodeList.prototype.isPrototypeOf(selector)){
+ for(i = 0; i < selector.length; i++) {
+ selector[i].caleran = new caleranPlugin(selector[i], options).init();
+ }
+ }else{
+ selector.caleran = new caleranPlugin(selector, options).init();
+ }
+ }
+ };
+
+ /**
+ * add middleOfDay method to moment.js to set 12:00:00 for the current moment
+ * @return {object} modified momentjs instance.
+ */
+ if (typeof moment.fn.middleOfDay !== "function") {
+ moment.fn.middleOfDay = function () {
+ this.hours(12).minutes(0).seconds(0);
+ return this;
+ };
+ moment.fn.startOfMonth = function () {
+ this.middleOfDay().date(1);
+ return this;
+ };
+ }
+})(window, document);
\ No newline at end of file
diff --git a/build/js/plugins/caleran.min.js b/build/js/plugins/caleran.min.js
new file mode 100644
index 0000000..fb449d1
--- /dev/null
+++ b/build/js/plugins/caleran.min.js
@@ -0,0 +1,2 @@
+!function(c,h,n){"use strict";function s(t,e){this.elem=t,this.options=e,this.metadata=this.elem.getAttribute("data-plugin-options")?JSON.parse(this.elem.getAttribute("data-plugin-options")):{}}s.defaults=(s.prototype={public:function(){return{startDate:moment().startOf("day"),endDate:moment().startOf("day"),format:"L",dateSeparator:" - ",calendarCount:2,mobileBreakpoint:760,isHotelBooking:!1,inline:!1,minDate:null,maxDate:null,showHeader:!0,showFooter:!0,rangeOrientation:"horizontal",verticalRangeWidth:180,showButtons:!1,startOnMonday:!1,container:"body",oneCalendarWidth:230,enableKeyboard:!0,showOn:"bottom",arrowOn:"left",autoAlign:!0,locale:moment.locale(),singleDate:!1,target:null,autoCloseOnSelect:!1,startEmpty:!1,isRTL:!1,ranges:[{title:"Today",startDate:moment(),endDate:moment()},{title:"3 Days",startDate:moment(),endDate:moment().add(2,"days")},{title:"5 Days",startDate:moment(),endDate:moment().add(4,"days")},{title:"1 Week",startDate:moment(),endDate:moment().add(6,"days")},{title:"Till Next Week",startDate:moment(),endDate:moment().endOf("week")},{title:"Till Next Month",startDate:moment(),endDate:moment().endOf("month")}],rangeLabel:"Ranges: ",cancelLabel:"Cancel",applyLabel:"Apply",nextMonthIcon:"",prevMonthIcon:"",rangeIcon:"",headerSeparator:"",onbeforeselect:function(){return!0},onafterselect:function(){},onbeforeshow:function(){},onbeforehide:function(){},onaftershow:function(){},onafterhide:function(){},onfirstselect:function(){},onrangeselect:function(){},onbeforemonthchange:function(){return!0},onaftermonthchange:function(){},onafteryearchange:function(){},ondraw:function(){},onBeforeInit:function(){},onBeforeDestroy:function(){return!0},oninit:function(){},ondestroy:function(){},validateClick:function(){return!0},onCancel:function(){return!0},disableDays:function(){return!1},disabledRanges:[],continuous:!1,disableOnlyStart:!1,disableOnlyEnd:!1,minSelectedDays:0,enableMonthSwitcher:!0,enableYearSwitcher:!0,enableSwipe:!0,numericMonthSwitcher:!1,monthSwitcherFormat:"MMMM",showWeekNumbers:!1,hideOutOfRange:!1,DOBCalendar:!1}},private:function(){return{startSelected:!1,currentDate:moment().startOf("day"),endSelected:!0,hoverDate:null,keyboardHoverDate:null,headerStartDay:null,headerStartDate:null,headerStartWeekday:null,headerEndDay:null,headerEndDate:null,headerEndWeekday:null,swipeX:0,swipeY:0,swipeStart:0,swipeTimeout:null,isMobile:!1,valElements:["BUTTON","OPTION","INPUT","LI","METER","PROGRESS","PARAM"],dontHideOnce:!1,initiator:null,initComplete:!1,startDateBackup:null,startDateInitial:null,endDateInitial:null,firstValueSelected:!1,throttleTimeout:null,instanceId:null,documentEvent:null,delayInputUpdate:!1,lastScrollX:0,lastScrollY:0,isTicking:!1,parentScrollEventsAttached:!1,rafID:0,disabledDays:{}}},init:function(){return this.config=this.extend(this.extend(this.public(),this.options),this.metadata),this.globals=this.private(),this.globals.isMobile=this.checkMobile(),this.globals.instanceId=Math.round(+new Date+100*Math.random()),this.events=this.eventsPrototype(),this.events.init(this.globals.instanceId),this.config.onBeforeInit(this),this.applyConfig(),this.fetchInputs(),this.drawUserInterface(),this.drawOverlay(),this.addInitialEvents(),this.addKeyboardEvents(),(this.elem.caleran=this).config.oninit(this),this.globals.initComplete=!0,this.globals.lastScrollX=0,this.globals.lastScrollY=0,this.events.dispatch(c,"resize"),this},validateDates:function(){var t;(moment.isMoment(this.config.startDate)&&this.config.startDate.isValid()||moment(this.config.startDate,this.config.format).isValid())&&(moment.isMoment(this.config.endDate)&&this.config.endDate.isValid()||moment(this.config.endDate,this.config.format).isValid())?(this.config.startDate=moment(this.config.startDate,this.config.format).middleOfDay().locale(this.config.locale),this.config.endDate=moment(this.config.endDate,this.config.format).middleOfDay().locale(this.config.locale),this.config.startDate.isAfter(this.config.endDate,"day")&&(t=this.config.startDate.clone(),this.config.startDate=this.config.endDate.clone(),this.config.endDate=t.clone(),t=null)):(this.config.startDate=moment().middleOfDay().locale(this.config.locale),this.config.endDate=moment().middleOfDay().locale(this.config.locale)),this.globals.currentDate=moment(this.config.startDate,this.config.format),null!==this.config.minDate&&moment(this.config.minDate,this.config.format).isValid()?this.config.minDate=moment(this.config.minDate,this.config.format).middleOfDay():this.config.minDate=null,null!==this.config.maxDate&&moment(this.config.maxDate,this.config.format).isValid()?this.config.maxDate=moment(this.config.maxDate,this.config.format).middleOfDay():this.config.maxDate=null,null!==this.config.minDate&&null!==this.config.maxDate&&this.config.minDate.isAfter(this.config.maxDate,"day")&&(t=this.config.minDate.clone(),this.config.minDate=this.config.maxDate.clone(),this.config.maxDate=t.clone(),t=null),null!==this.config.minDate&&null!==this.config.startDate&&this.config.minDate.isAfter(this.config.startDate,"day")&&(this.config.startDate=this.config.minDate.clone()),null!==this.config.minDate&&null!==this.config.endDate&&this.config.minDate.isAfter(this.config.endDate,"day")&&(this.config.endDate=this.config.minDate.clone()),null!==this.config.maxDate&&null!==this.config.startDate&&this.config.maxDate.isBefore(this.config.startDate,"day")&&(this.config.startDate=this.config.maxDate.clone()),null!==this.config.maxDate&&null!==this.config.endDate&&this.config.maxDate.isBefore(this.config.endDate,"day")&&(this.config.endDate=this.config.maxDate.clone()),(!1===this.checkRangeContinuity()||1==this.config.disableOnlyStart&&this.isDisabled(this.config.startDate,this.config.isHotelBooking)||!1===this.config.singleDate&&this.config.disableOnlyEnd&&this.isDisabled(this.config.endDate,this.config.isHotelBooking)||this.config.startEmpty&&0==this.globals.firstValueSelected)&&this.clearInput()},applyConfig:function(){null===this.config.target&&(this.config.target=this.elem),!0===this.config.inline&&(this.config.DOBCalendar=!1),1==this.config.DOBCalendar&&(this.config.singleDate=!0),"string"==typeof this.config.container&&(this.config.container=h.querySelector(this.config.container));for(var t=["startDate","endDate","minDate","maxDate"],e=0;e .caleran-container-mobile");if(0