{"id":7871,"date":"2025-05-13T08:18:30","date_gmt":"2025-05-13T08:18:30","guid":{"rendered":"https:\/\/avtodomar.si\/test-page\/"},"modified":"2026-02-13T08:07:00","modified_gmt":"2026-02-13T08:07:00","slug":"test-page","status":"publish","type":"page","link":"https:\/\/avtodomar.si\/en\/test-page\/","title":{"rendered":"Test page"},"content":{"rendered":"\n<div>\n<p>    <meta charset=\"UTF-8\"><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n    <title>Booking Calendar<\/title><\/p>\n<div class=\"calendar-container\">\n<div class=\"calendar-header\">\n            <button id=\"prev-month\">&lt;<\/button><\/p>\n<h2 id=\"month-year\">March 2025<\/h2>\n<p>            <button id=\"next-month\">&gt;<\/button>\n        <\/div>\n<div class=\"weekdays\">\n<div>Monday<\/div>\n<div>Tuesday<\/div>\n<div>Wednesday<\/div>\n<div>Thursday<\/div>\n<div>Friday<\/div>\n<div>Saturday<\/div>\n<div>Sunday<\/div>\n<\/p><\/div>\n<div id=\"calendar-grid\" class=\"calendar-grid\"><\/div>\n<\/p><\/div>\n<style>\n* {\nmargin: 0;\npadding: 0;\nbox-sizing: border-box;\nfont-family: Arial, sans-serif;\n}<\/p>\n<p>body {\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nmin-height: 100vh;\nbackground-color: #f5f5f5;\npadding: 20px;\n}<\/p>\n<p>.calendar-container {\nwidth: 100%;\nmax-width: 1200px;\nbackground-color: white;\nborder-radius: 8px;\nbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\npadding: 20px;\n}<\/p>\n<p>.calendar-header {\ndisplay: flex;\nalign-items: center;\nmargin-bottom: 20px;\n}<\/p>\n<p>.calendar-header button {\nbackground: none;\nborder: none;\nfont-size: 24px;\ncursor: pointer;\npadding: 0 15px;\n}<\/p>\n<p>#month-year {\nflex-grow: 1;\ntext-align: center;\nfont-size: 24px;\nfont-weight: bold;\n}<\/p>\n<p>.weekdays {\ndisplay: grid;\ngrid-template-columns: repeat(7, 1fr);\ngap: 10px;\nmargin-bottom: 10px;\nfont-weight: bold;\n}<\/p>\n<p>.calendar-grid {\ndisplay: grid;\ngrid-template-columns: repeat(7, 1fr);\ngap: 10px;\n}<\/p>\n<p>.day {\nborder-radius: 4px;\npadding: 10px;\nmin-height: 80px;\nposition: relative;\ncursor: pointer;\n}<\/p>\n<p>.day-number {\nfont-size: 18px;\nfont-weight: bold;\nmargin-bottom: 5px;\n}<\/p>\n<p>.day.prev-month, .day.next-month {\nbackground-color: #d3d3d3;\n}<\/p>\n<p>.day.available {\nbackground-color: #a8e6a8;\n}<\/p>\n<p>.day.booked {\nbackground-color: #e67a7a;\ncolor: white;\n}<\/p>\n<p>.day.partial {\nbackground-color: #ffd580;\n}<\/p>\n<p>.status {\nfont-size: 12px;\ntext-align: right;\n}<\/p>\n<p>.price {\nmargin-top: 5px;\n}<\/p>\n<p>.current-price {\nfont-weight: bold;\n}<\/p>\n<p>.original-price {\ntext-decoration: line-through;\ncolor: #888;\nfont-size: 12px;\nmargin-left: 5px;\n}<\/p>\n<p>.notification {\nposition: absolute;\ntop: -8px;\nright: -8px;\nbackground-color: #333;\ncolor: white;\nwidth: 24px;\nheight: 24px;\nborder-radius: 50%;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nfont-size: 12px;\nfont-weight: bold;\n}<\/p>\n<p>.selected {\nborder: 2px solid #4a90e2;\n}\n<\/style>\n<p><script>\n\/\/ Calendar data with availability information\nconst calendarData = {\n    months: [\n        \"Januar\", \"Februar\", \"Marec\", \"April\", \"Maj\", \"Junij\",\n        \"Julij\", \"Avgust\", \"September\", \"Oktober\", \"November\", \"December\"\n    ],\n    weekdays: [\n        \"Ponedeljek\", \"Torek\", \"Sreda\", \"\u010cetrtek\", \"Petek\", \"Sobota\", \"Nedelja\"\n    ],\n    availability: {\n        \/\/ Only March 2025 data as requested\n        \"2025-03\": {\n            \"1\": { status: \"booked\" },\n            \"2\": { status: \"booked\" },\n            \"3\": { status: \"booked\" },\n            \"4\": { status: \"booked\" },\n            \"5\": { status: \"booked\" },\n            \"6\": { status: \"booked\" },\n            \"7\": { status: \"partial\", partialText: \"Na voljo do 12:00\", notification: 2 },\n            \"8\": { status: \"available\" },\n            \"9\": { status: \"available\" },\n            \"10\": { status: \"available\" },\n            \"11\": { status: \"available\" },\n            \"12\": { status: \"available\" },\n            \"13\": { status: \"available\" },\n            \"14\": { status: \"available\" },\n            \"15\": { status: \"available\" },\n            \"16\": { status: \"available\" },\n            \"17\": { status: \"available\" },\n            \"18\": { status: \"available\" },\n            \"19\": { status: \"available\" },\n            \"20\": { status: \"available\" },\n            \"21\": { status: \"available\" },\n            \"22\": { status: \"available\" },\n            \"23\": { status: \"available\" },\n            \"24\": { status: \"available\" },\n            \"25\": { status: \"available\" },\n            \"26\": { status: \"available\" },\n            \"27\": { status: \"available\" },\n            \"28\": { status: \"available\" },\n            \"29\": { status: \"available\" },\n            \"30\": { status: \"available\" },\n            \"31\": { status: \"available\" }\n        }\n    }\n};<\/p>\n<p>\/\/ Current date and selection state\nlet currentDate = new Date(2025, 2, 1); \/\/ March 2025 (0-indexed month)\nlet startDate = null;\nlet endDate = null;<\/p>\n<p>\/\/ Initialize the calendar\ndocument.addEventListener('DOMContentLoaded', function() {\n    renderCalendar();<\/p>\n<p>    \/\/ Event listeners for navigation\n    document.getElementById('prev-month').addEventListener('click', () => {\n        currentDate.setMonth(currentDate.getMonth() - 1);\n        renderCalendar();\n    });<\/p>\n<p>    document.getElementById('next-month').addEventListener('click', () => {\n        currentDate.setMonth(currentDate.getMonth() + 1);\n        renderCalendar();\n    });\n});<\/p>\n<p>\/\/ Render the calendar\nfunction renderCalendar() {\n    const year = currentDate.getFullYear();\n    const month = currentDate.getMonth();<\/p>\n<p>    \/\/ Update header\n    document.getElementById('month-year').textContent = `${calendarData.months[month]} ${year}`;<\/p>\n<p>    \/\/ Get first day of month and total days\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n    const daysInMonth = lastDay.getDate();<\/p>\n<p>    \/\/ Get day of week for first day (0 = Sunday, 1 = Monday, etc.)\n    \/\/ Adjust for Monday as first day of week\n    let firstDayIndex = firstDay.getDay() - 1;\n    if (firstDayIndex < 0) firstDayIndex = 6; \/\/ Sunday becomes last day\n    \n    \/\/ Get days from previous month\n    const prevMonth = month === 0 ? 11 : month - 1;\n    const prevMonthYear = month === 0 ? year - 1 : year;\n    const prevMonthDays = new Date(prevMonthYear, prevMonth + 1, 0).getDate();\n    \n    \/\/ Clear calendar\n    const calendarGrid = document.getElementById('calendar-grid');\n    calendarGrid.innerHTML = '';\n    \n    \/\/ Get availability data for current month\n    const monthKey = `${year}-${String(month + 1).padStart(2, '0')}`;\n    const availabilityData = calendarData.availability[monthKey] || {};\n    \n    \/\/ Previous month days\n    for (let i = 0; i < firstDayIndex; i++) {\n        const day = prevMonthDays - firstDayIndex + i + 1;\n        const dayElement = createDayElement(day, 'prev-month');\n        calendarGrid.appendChild(dayElement);\n    }\n    \n    \/\/ Current month days\n    for (let day = 1; day <= daysInMonth; day++) {\n        const dayData = availabilityData[day.toString()] || { status: 'available' };\n        const dayElement = createDayElement(day, 'current-month', dayData);\n        \n        \/\/ Add click event for date selection\n        dayElement.addEventListener('click', () => selectDate(year, month, day));<\/p>\n<p>        calendarGrid.appendChild(dayElement);\n    }<\/p>\n<p>    \/\/ Next month days\n    const nextDays = 42 - (firstDayIndex + daysInMonth); \/\/ 6 rows of 7 days\n    for (let day = 1; day <= nextDays; day++) {\n        const dayElement = createDayElement(day, 'next-month');\n        calendarGrid.appendChild(dayElement);\n    }\n}\n\n\/\/ Create a day element\nfunction createDayElement(day, monthClass, dayData = {}) {\n    const dayElement = document.createElement('div');\n    dayElement.classList.add('day', monthClass);\n    \n    \/\/ Add status class if it's current month\n    if (monthClass === 'current-month' &#038;&#038; dayData.status) {\n        dayElement.classList.add(dayData.status);\n    }\n    \n    \/\/ Create day number\n    const dayNumber = document.createElement('div');\n    dayNumber.classList.add('day-number');\n    dayNumber.textContent = day;\n    dayElement.appendChild(dayNumber);\n    \n    \/\/ Add status text and prices for current month\n    if (monthClass === 'current-month') {\n        \/\/ Status text\n        const statusText = document.createElement('div');\n        statusText.classList.add('status');\n        \n        if (dayData.status === 'booked') {\n            statusText.textContent = 'Zasedeno';\n        } else if (dayData.status === 'available') {\n            statusText.textContent = 'Na voljo';\n        } else if (dayData.status === 'partial') {\n            statusText.textContent = dayData.partialText || 'Na voljo do 12:00';\n        }\n        \n        dayElement.appendChild(statusText);\n        \n        \/\/ Price\n        const priceDiv = document.createElement('div');\n        priceDiv.classList.add('price');\n        \n        const currentPrice = document.createElement('span');\n        currentPrice.classList.add('current-price');\n        currentPrice.textContent = '183\u20ac';\n        \n        const originalPrice = document.createElement('span');\n        originalPrice.classList.add('original-price');\n        originalPrice.textContent = '230\u20ac';\n        \n        priceDiv.appendChild(currentPrice);\n        priceDiv.appendChild(originalPrice);\n        dayElement.appendChild(priceDiv);\n        \n        \/\/ Add notification badge if present\n        if (dayData.notification) {\n            const badge = document.createElement('div');\n            badge.classList.add('notification');\n            badge.textContent = dayData.notification;\n            dayElement.appendChild(badge);\n        }\n    }\n    \n    return dayElement;\n}\n\n\/\/ Handle date selection\nfunction selectDate(year, month, day) {\n    const selectedDate = new Date(year, month, day);\n    \n    \/\/ Check if the date is available\n    const monthKey = `${year}-${String(month + 1).padStart(2, '0')}`;\n    const availabilityData = calendarData.availability[monthKey] || {};\n    const dayData = availabilityData[day.toString()] || { status: 'available' };\n    \n    \/\/ Don't allow selection of booked dates\n    if (dayData.status === 'booked') {\n        alert('Ta datum je \u017ee zaseden.');\n        return;\n    }\n    \n    if (!startDate || (startDate &#038;&#038; endDate) || selectedDate < startDate) {\n        \/\/ Start a new selection\n        startDate = selectedDate;\n        endDate = null;\n    } else {\n        \/\/ Complete the selection\n        endDate = selectedDate;\n        \n        \/\/ Check if any date in range is booked\n        let hasBookedDate = false;\n        const currentDate = new Date(startDate);\n        \n        while (currentDate <= endDate) {\n            const y = currentDate.getFullYear();\n            const m = currentDate.getMonth() + 1;\n            const d = currentDate.getDate();\n            \n            const mKey = `${y}-${String(m).padStart(2, '0')}`;\n            const dData = calendarData.availability[mKey]?.[d.toString()] || { status: 'available' };\n            \n            if (dData.status === 'booked') {\n                hasBookedDate = true;\n                break;\n            }\n            \n            currentDate.setDate(currentDate.getDate() + 1);\n        }\n        \n        if (hasBookedDate) {\n            alert('Izbrano obdobje vsebuje \u017ee zasedene datume.');\n            endDate = null;\n        }\n    }\n    \n    \/\/ Update the UI to show selected dates\n    updateSelectedDates();\n}\n\n\/\/ Update the UI to show selected dates\nfunction updateSelectedDates() {\n    \/\/ Remove selected class from all days\n    document.querySelectorAll('.day').forEach(day => {\n        day.classList.remove('selected');\n    });<\/p>\n<p>    \/\/ If no selection, return\n    if (!startDate) return;<\/p>\n<p>    \/\/ Get all days in the current view\n    const days = document.querySelectorAll('.day.current-month');\n    const year = currentDate.getFullYear();\n    const month = currentDate.getMonth();<\/p>\n<p>    \/\/ Highlight selected days\n    days.forEach((dayElement, index) => {\n        const day = index + 1;\n        const currentDay = new Date(year, month, day);<\/p>\n<p>        if (startDate && endDate) {\n            \/\/ Range selection\n            if (currentDay >= startDate && currentDay <= endDate) {\n                dayElement.classList.add('selected');\n            }\n        } else if (startDate) {\n            \/\/ Single date selection\n            if (currentDay.getTime() === startDate.getTime()) {\n                dayElement.classList.add('selected');\n            }\n        }\n    });\n}\n<\/script><\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7871","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/pages\/7871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/comments?post=7871"}],"version-history":[{"count":1,"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/pages\/7871\/revisions"}],"predecessor-version":[{"id":7874,"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/pages\/7871\/revisions\/7874"}],"wp:attachment":[{"href":"https:\/\/avtodomar.si\/en\/wp-json\/wp\/v2\/media?parent=7871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}