{"id":7,"date":"2023-02-21T12:55:01","date_gmt":"2023-02-21T12:55:01","guid":{"rendered":"https:\/\/wp-hostel.com\/demo\/?page_id=7"},"modified":"2023-02-21T12:55:37","modified_gmt":"2023-02-21T12:55:37","slug":"twin-private-ensuite","status":"publish","type":"page","link":"https:\/\/wp-hostel.com\/demo\/?page_id=7","title":{"rendered":"Twin Private Ensuite"},"content":{"rendered":"\n<p>This is just an example how you can manually create pages for your rooms, or some of them, and add a booking calendar for each room.<br>Your page can contain images and media or even custom design. Then simply use the shortcode to display the calendar.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-3\">\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"684\" src=\"https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-1024x684.jpg\" alt=\"\" class=\"wp-image-11\" srcset=\"https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-1024x684.jpg 1024w, https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-300x200.jpg 300w, https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-768x513.jpg 768w, https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-1536x1025.jpg 1536w, https:\/\/wp-hostel.com\/demo\/wp-content\/uploads\/2023\/02\/alexandra-gorn-JIUjvqe2ZHg-unsplash-1-2048x1367.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Photo by <a href=\"https:\/\/unsplash.com\/@alexagorn?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Alexandra Gorn<\/a> on <a href=\"https:\/\/unsplash.com\/photos\/JIUjvqe2ZHg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\"><div id=\"hostelproRoomCalendarWrap1\">\n\t<div id=\"hostelproRoomCalendar2\"><\/div>\n\t<form method=\"post\" action=\"https:\/\/wp-hostel.com\/demo\/?page_id=7\" id=\"hostelPROBookCalendarForm2\">\n\t\t<input type=\"hidden\" name=\"room_id\" value=\"2\">\n\t\t<input type=\"hidden\" name=\"in_booking_mode\" value=\"1\">\n\t\t<input type=\"hidden\" name=\"from_date\" value=\"2026-05-19\">\n\t\t<input type=\"hidden\" name=\"to_date\" value=\"2026-05-20\">\n\t\t<input type=\"hidden\" name=\"currently_setting\" value=\"from\">\t\t\n\t\t<input type=\"hidden\" name=\"action\" value=\"hostelpro_ajax\">\n\t\t<input type=\"hidden\" name=\"type\" value=\"load_booking_form\">\n\t\t<input type=\"hidden\" id=\"hostelpro-alternate2\">\n\t\t<input type=\"hidden\" name=\"unavailable\" value=\"\">\n\t\t\t\t\n\t\t<p>From: <span id=\"hostelPROFromDateDisplay2\">May 19, 2026<\/span><br>\n\t\tTo: <span id=\"hostelPROToDateDisplay2\">May 20, 2026<\/span><br><\/p>\n\t\t<p class=\"hostelpro-book-buttton-wrap\"><input type=\"button\" value=\"Book\" onclick=\"hostelPROLoadBooking(this.form, 'hostelproRoomCalendarWrap1');\"><\/p>\n\t\t<input type=\"hidden\" id=\"hostelPROBookSingleDayMsg2\" value=\"\">\n\t\t\n\t<\/form>\n<\/div>\t\n\n<script type=\"text\/javascript\">\t\n  jQuery(function() {\n    jQuery( \"#hostelproRoomCalendar2\" ).datepicker({\n    \tnumberOfMonths: 1,\t\n    \tyearRange: \"2026:2027\",\n    \tmaxDate: \"+1y\",\n    \tminDate: \"0\",   \n    \tdateFormat : 'MM d, yy',        \n      altFormat : \"mm\/dd\/yy\",\t\n      altField: \"#hostelpro-alternate2\",\n    \tbeforeShowDay: function(date) {\n    \tvar unavailableDates = [];\n\t\t\tvar selDate = date;\n\t\t\tresult = hostelPROUnavailable(date, unavailableDates);\n\t\t\tif(!result[0]) return result; \/\/ don't check further the unavailable dates\t\t\t\n\t\t\t\/\/ if the date is not unavailable, let's see do we need to color it\n\t\t\tvar fromDate = jQuery('#hostelPROBookCalendarForm2 input[name=from_date]').val();\n\t\t\tvar toDate = jQuery('#hostelPROBookCalendarForm2 input[name=to_date]').val();\n\t\t\tvar fromParts = fromDate.split('-');\n\t\t\tfromDate = new Date(fromParts[0], fromParts[1]-1, fromParts[2]);\n\t\t\tvar toParts = toDate.split('-');\n\t\t\ttoDate = new Date(toParts[0], toParts[1]-1, toParts[2]);\t\t\t\n\t\t\tif(date.valueOf() >= fromDate.valueOf() && date.valueOf() <= toDate.valueOf()) {\n\t\t\t\t\/\/ return true with highlighted class\n\t\t\t\t return [true, 'hostelpro-highlight', null];\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ else just return true\n\t\t\treturn [true];\n    \t},\t\n\t\t\n\t\tonSelect: function(date) {\n\t\t\thostelPROSelectDate(date, 2, '1');\n\t\t}\n\t\t\n    });\n});\n<\/script>\n<\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>This is just an example how you can manually create pages for your rooms, or some of them, and add a booking calendar for each room.Your page can contain images and media or even custom design. Then simply use the shortcode to display the calendar.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":3,"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/wp-hostel.com\/demo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}