Выберите даты
Дом:
Заезд: (с 14:00)
Выезд: (до 12:00)
Ночей:
Итого: BYN
.booking-calendar {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
}
#calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-top: 15px;
}
.day-cell {
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
cursor: pointer;
font-size: 14px;
}
.day-cell.available {
background-color: #4caf50;
color: white;
}
.day-cell.booked {
background-color: #f44336;
color: white;
}
.day-cell.unavailable {
background-color: #bdbdbd;
color: #666;
}
.day-cell:hover:not(.booked):not(.unavailable) {
transform: scale(1.1);
z-index: 10;
}
// Данные о ценах и занятости (можно получать через API)
const prices = {
balcony: 500, // BYN за ночь
terrace: 550
};
const availability = { // Формат: 'YYYY-MM-DD': 'status'
'2025-04-01': 'available',
'2025-04-02': 'booked',
'2025-04-03': 'unavailable',
// ... остальные даты
};
let selectedHouse = 'balcony'; // По умолчанию
let checkIn = null;
let checkOut = null;
// Рендеринг календаря
function renderCalendar() {
const calendar = document.getElementById('calendar-grid');
calendar.innerHTML = '';
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
// Дни недели
['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'].forEach(day => {
const cell = document.createElement('div');
cell.style.fontWeight = 'bold';
cell.textContent = day;
calendar.appendChild(cell);
});
// Количество дней в месяце
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(currentYear, currentMonth, day);
const dateKey = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const cell = document.createElement('div');
cell.className ='day-cell';
cell.textContent = day;
if (availability[dateKey] === 'booked') {
cell.classList.add('booked');
cell.title = 'Занято';
} else if (availability[dateKey] === 'unavailable') {
cell.classList.add('unavailable');
cell.title = 'Недоступно';
} else {
cell.classList.add('available');
cell.addEventListener('click', () => selectDate(date));
}
calendar.appendChild(cell);
}
}
// Выбор даты
function selectDate(date) {
if (!checkIn) {
checkIn = date;
document.getElementById('check-in').textContent = formatDate(date);
} else if (!checkOut && date > checkIn) {
checkOut = date;
document.getElementById('check-out').textContent = formatDate(date);
calculateCost();
document.querySelector('.booking-details').style.display = 'block';
} else {
// Сброс при повторном клике
checkIn = date;
checkOut = null;
document.getElementById('check-in').textContent = formatDate(date);
document.getElementById('check-out').textContent = '';
document.querySelector('.booking-details').style.display = 'none';
}
}
// Форматирование даты
function formatDate(date) {
return date.toLocaleDateString('ru-RU');
}
// Расчёт стоимости
function calculateCost() {
const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
const pricePerNight = prices[selectedHouse];
const total = nights * pricePerNight;
document.getElementById('nights-count').textContent = nights;
document.getElementById('total-cost').textContent = total.toFixed(2);
}
// Генерация ссылки для ЕРИП (пример)
function generateERIPLink() {
// Здесь должна быть логика формирования ссылки (зависит от вашего провайдера ЕРИП)
// Пример:
const amount = parseFloat(document.getElementById('total-cost').textContent);
const orderId = 'BR-' + Date.now(); // Уникальный ID заказа
return `https://erip.example.com/pay?amount=${amount}&orderId=${orderId}`;
}
// Обработка кнопки оплаты
document.getElementById('pay-button').addEventListener('click', () => {
if (!checkIn || !checkOut) {
alert('Выберите даты заезда и выезда!');
return;
}
const paymentLink = generateERIPLink();
window.open(paymentLink, '_blank');
});
// Инициализация
window.onload = () => {
renderCalendar();
document.getElementById('selected-house').textContent =
selectedHouse === 'balcony' ? 'Дом с балконом' : 'Дом с террасой';
};
