{"id":30165,"date":"2026-06-02T10:19:24","date_gmt":"2026-06-02T09:19:24","guid":{"rendered":"https:\/\/www.hydro-x.co.uk\/hx-training\/?page_id=30165"},"modified":"2026-06-02T10:19:33","modified_gmt":"2026-06-02T09:19:33","slug":"30165-2","status":"publish","type":"page","link":"https:\/\/www.hydro-x.co.uk\/hx-training\/30165-2\/","title":{"rendered":""},"content":{"rendered":"<p><!--\nArlo Web Control Demo - Events list - Theme 2\nDocumentation: https:\/\/developer.arlo.co\/doc\/webcontrols\/upcomingevents\n--><br \/>\n<html><br \/>\n    <head>\n<link rel=\"stylesheet\" href=\"\/hx-training\/arlo.eventlist.stylesheet.css\" type=\"text\/css\" \/>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.5.0\/css\/font-awesome.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n      <link\n            rel=\"stylesheet\"\n           href=\"https:\/\/fonts.googleapis.com\/css?family=Source+Sans+Pro:300,400,700\"\n        \/>\n      <link\n            rel=\"stylesheet\"\n   \n        \/>\n      <link\n            rel=\"stylesheet\"\n            href=\"https:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700\"\n        \/>\n      <link\n            rel=\"stylesheet\"\n            href=\"https:\/\/webcontrols.arlo.co\/icons8\/styles.css\"\n        \/><br \/>\n    <\/head><br \/>\n    <body><\/p>\n<p>    <!-- Target Elements --><\/p>\n<div class=\"arlo\">\n<div class=\"arlo-filters-container\">\n<div id=\"filters\"><\/div>\n<div id=\"arlo-filter-toggle\">\n<div class=\"arlo-filter-toggle-show\">\n                    Show filters <i class=\"fa fa-chevron-down\"><\/i>\n                <\/div>\n<div class=\"arlo-filter-toggle-hide\">\n                    Hide filters <i class=\"fa fa-chevron-up\"><\/i>\n                <\/div><\/div><\/div>\n<div id=\"upcoming-events\"><\/div><\/div>\n<p>    <!-- Templates --><br \/>\n    <script type='text\/template' id='filter-template'><\/p>\n<div class=\"arlo-filters arlo-font-primary\">\n<div class=\"arlo-other-filters arlo-clearfix arlo-font-primary\">\n                    <%= showFilter({filterCode: \"months\"}) %><\/p><\/div>\n<div class=\"arlo-category-selectors arlo-clearfix\"><\/div>\n<div class=\"arlo-row arlo-clearfix\">\n<div class=\"arlo-filter-tags\">\n                    <%= showFilter({filterCode: \"templatetag\", displayStyle: \"ul\", showCount: false, callbacks: {onBeforeRender: \"updateTemplateTagNames\"}}) %>\n                <\/div>\n<p>                <%= showTimezoneSelector() %>\n            <\/div><\/div>\n<p>    <\/script><\/p>\n<p>    <script type='text\/template' id='event-template-template'>\n        <%= ContentFields %><\/p>\n<div class=\"templateId\" data-templateid=\"<%= TemplateID %>\"><\/div>\n<p>    <\/script><\/p>\n<p>    <script type='text\/template' id='upcoming-events-template'><\/p>\n<div class=\"arlo-listitem arlo-clearfix\">\n<div class=\"arlo-heading\">\n<div class=\"arlo-date arlo-font-special\">\n<div class=\"arlo-start-date-container\">\n<div class=\"arlo-start-date\">\n                            <%= formatDate(StartDateTime, 'DD') %>\n                        <\/div>\n<div class=\"arlo-start-month\">\n                          <%= formatDate(StartDateTime, 'MMMM') %>\n                        <\/div><\/div>\n<p>                    <% if(formatDate(StartDateTime, \"D MMM\") !== formatDate(EndDateTime, \"D MMM\")) { %><\/p>\n<div class=\"arlo-end-date-container\">\n<div class=\"arlo-end-date\">\n                                <%= formatDate(EndDateTime, 'DD') %>\n                            <\/div>\n<p>                            <% if(formatDate(StartDateTime, \"MMM\") !== formatDate(EndDateTime, \"MMM\")) { %><\/p>\n<div class=\"arlo-end-month\">\n                              <%= formatDate(EndDateTime, 'MMM') %>\n                            <\/div>\n<p>                            <% } %>\n                        <\/div>\n<p>                    <% } %>\n                <\/div>\n<div class=\"arlo-title\">\n<div class=\"arlo-name arlo-text-color-dark arlo-h2\">\n                        <a class=\"arlo-font-special\" href=\"<%= ViewUri %>\">\n                            <%- Name %>\n                        <\/a>\n                    <\/div><\/div><\/div>\n<div class=\"arlo-details\">\n<div class=\"arlo-summary arlo-text-color-normal\">\n                    <%- Summary %>\n                <\/div>\n<div class=\"arlo-info\">\n<div class=\"arlo-location\">\n\t\t\t\t\t <% if (typeof(Location.IsOnline) !== \"undefined\" &#038;&#038; Location.IsOnline === true &#038;&#038; (typeof(Location.Name) !== \"undefined\" &#038;&#038; Location.Name !== \"\")) { %>\n                            <span class=\"arlo-text-color-light\"><i class=\"fa fa-headphones\"><\/i><\/span>\n                            <span class=\"arlo-online arlo-text-color-normal arlo-font-size-larger\"><%- Location.Name %><\/span>\n                            <% } else { %><\/p>\n<p>                                <span class=\"arlo-text-color-light\"><i class=\"fa fa-map-marker\"><\/i><\/span>\n                                <% if (typeof(Location.ViewUri) !== \"undefined\" &#038;&#038; Location.ViewUri !== \"\") { %>\n                                    <a href=\"<%- Location.ViewUri %>\" class=\"arlo-location arlo-text-color-secondary arlo-font-size-larger\">\n                                        <%- Location.Name %>\n                                    <\/a>\n                                    <% } else { %>\n                                        <span class=\"arlo-text-color-normal arlo-font-size-larger\"><%- Location.Name %><\/span>\n                                        <% } %>\n                                            <% } %>\n                    <\/div>\n<div class=\"arlo-duration\">\n                        <span class=\"arlo-text-color-light\"><i class=\"fa fa-clock-o\"><\/i><\/span>\n                        <span class=\"arlo-text-color-normal arlo-font-size-larger\"><%- DurationDescription %><\/span>\n                        <% if (typeof(Location.IsOnline) !== \"undefined\" &#038;&#038; Location.IsOnline === true) { %>\n                            <% } %>\n                    <\/div>\n<p>                    <% if (typeof(Notice) !== \"undefined\" &#038;&#038; Notice !== \"\") { %><\/p>\n<div class=\"arlo-notice arlo-text-color-light\"><span class=\"arlo-text-color-light arlo-font-size-larger\"><i><%- Notice %><\/i><\/span><\/div>\n<p>                        <% } %><\/p>\n<p>                        <% if (Sessions.length > 1) { %>\n                        <span class=\"arlo-sessions\">\n                            <span class=\"arlo-duration arlo-text-color-light\">\n                                <i class=\"fa fa-clock-o\"><\/i>\n                                <span class=\"arlo-session-info arlo-text-color-secondary arlo-font-size-larger\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-html=\"true\" title=\"\" style=\"display: inline;\" data-original-title=\"\">\n                                Show sessions\n                            <\/span><\/p>\n<div class=\"tooltipcontent\">\n<h4>Session details<\/h4>\n<p>                                <%= formatSessionsInformation({ fieldsToDisplay: ['Name', 'Day', 'Date', 'TimeSpan'] }) %>\n                            <\/div>\n<p>                        <\/span>\n                        <% } %>\n                <\/div>\n<div class=\"arlo-offers\">\n                    <%= formatAdvertisedOffers({ showPriceWithTaxInclusive: false,}) %><\/p><\/div>\n<div class=\"arlo-register\">\n                    <% if (PlacesRemaining !== \"\") { %>\n                        <span class=\"arlo-places-remaining arlo-text-color-secondary arlo-font-size-larger\"><%= PlacesRemaining %> Places Remaining<\/span>\n                        <% } %><\/p>\n<p>                            <% if (EventFullMessage !== \"\") { %>\n                                <span class=\"arlo-places-remaining arlo-text-color-primary arlo-font-size-larger\"><%= EventFullMessage %><\/span>\n                                <% } %><\/p>\n<p>                                    <%= formatRegistrationInfo('link') %>\n                <\/div>\n<p>                <span class=\"arlo-loadEventTemplateHiddenButtonContainer\">\n            \t<%= showEventTemplateInformation({message:\"View Template Details\",\n                        template:\"#event-template-template\", showLoadButton: false, targetElement: \"arlo-eventTemplatetarget\", callbacks: {onShow: \"eventTemplateLoaded\" } }) %>\n      \t\t\t<\/span>\n            <\/div><\/div>\n<div class=\"eventTemplateId\" data-eventtemplateid=\"<%= EventTemplateID %>\"><\/div><\/div>\n<p>    <\/script><\/p>\n<p>    <!-- Dependencies --><br \/>\n    <script src=\"\/\/code.jquery.com\/jquery-1.12.4.min.js\" integrity=\"sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=\" crossorigin=\"anonymous\"><\/script><br \/>\n    <script type=\"text\/javascript\" src=\"\/\/packages.arlocdn.net\/jscontrols\/1.0\/resources\/resizesensor.js\" charset=\"utf-8\"><\/script><br \/>\n    <script type=\"text\/javascript\" src=\"\/\/packages.arlocdn.net\/jscontrols\/1.0\/resources\/elementqueries.js\" charset=\"utf-8\"><\/script><br \/>\n    <script type=\"text\/javascript\" src=\"\/\/connect.arlocdn.net\/jscontrols\/1.1\/init.js\" charset=\"utf-8\" defer=\"defer\"><\/script><br \/>\n      <\/html><\/p>\n<p><script>\n document.addEventListener(\"arlojscontrolsloaded\", function() {\n  var platformID = \"hydroxtraining.arlo.co\"; \/\/ Change platformID to point at your own account<\/p>\n<p>  var filter = {\n    moduleType: \"Filters\",\n    targetElement: \"#filters\",\n    template: \"#filter-template\",\n    filterControlId: 1\n  };<\/p>\n<p>  var eventList = {\n    moduleType: \"UpcomingEvents\",\n    targetElement: \"#upcoming-events\",\n    template: \"#upcoming-events-template\",\n    maxCount: 12,\n    filterControlId: 1,\n    includeLoadMoreButton: true,\n    loadMoreButtonText: \"Show More\",\n    filter: {\n      templateid: [12]\n    },\n    smartDateFormats: {\n      startDay: \"D\"\n    },\n    callbacks: {\n      onShow: eventListOnShowCallback\n    }\n  };<\/p>\n<p>  var app = new window.ArloWebControls();<\/p>\n<p>  app.start({\n    platformID: platformID,\n    googleMapsAPIKey: \"AIzaSyAQecSspMnsipB9oV0N4WKbqFNy5zhlNwg\",\n    showDevErrors: false,\n    modules: [eventList, filter]\n  });<\/p>\n<p>  \/* ----- Callback function ----- *\/\n  \/\/ \"OnShow\" callback\n  function eventListOnShowCallback(getEventListItemsFunction) {\n    var listItems = getEventListItemsFunction();\n    var listParent = $(listItems[0]).parent()[0];<\/p>\n<p>    ElementQueries.init();<\/p>\n<p>    \/\/ Set all list items to height of tallest item plus padding\n    function setEventTemplateListItemHeight() {\n      if ($(listParent).width() < 450) {\n        $(listParent).find(\".arlo-listitem\").height(\"auto\");\n        return;\n      }\n      $(listParent).find(\".arlo-listitem\").height(\"auto\");\n      var tallestListItemHeight = 0;\n      var tallestContentHeight = 0;\n\n      $.each($(listParent).find(\".arlo-listitem\"), function(index, listItem) {\n        \/\/ Get height from combining heights of list item elements (because of issue with using listitems own height)\n        var height = 0;\n        height += $(listItem).find(\".arlo-heading\").height() > 60\n          ? $(listItem).find(\".arlo-title\").height()\n          : 60;\n        height += $(listItem).find(\".arlo-summary\").height();\n        height += $(listItem).find(\".arlo-info\").height();\n        height += $(listItem).find(\".arlo-offers\").height();\n$('.arlo-event-register').text(\"book now\")<\/p>\n<p>        if (height > tallestListItemHeight) {\n          tallestListItemHeight = height;\n        }\n      });\n      $(listParent).find(\".arlo-listitem\").height(tallestListItemHeight + 60);\n    }<\/p>\n<p>    setTimeout(function() {\n      setEventTemplateListItemHeight();\n    }, 0);<\/p>\n<p>    $(window).resize(function() {\n      setEventTemplateListItemHeight();\n    });<\/p>\n<p>    \/\/ Set up tooltips\n    $.each(listItems, function(index, listItem) {\n      var tooltipElement = $(listItem).find('[data-toggle=\"tooltip\"]')[0];\n      if (tooltipElement) {\n        var toolTipContent = $(listItem).find(\".tooltipcontent\")[0];\n        if (toolTipContent) {\n          $(tooltipElement).attr(\n            \"data-original-title\",\n            $(toolTipContent).html()\n          );\n          $(tooltipElement).tooltip();\n        }\n      }\n    });\n  }\n});<\/p>\n<p>window.locationfiltertoggle = function(filter, $) {\n  \/\/jshint unused:false\n  window.ElementQueries.init();\n};<\/p>\n<p>window.updateTemplateTagNames = function(filterModel, $) {\n  var deleteFilterIndexes = [];\n  $.each(filterModel.attributes.Values, function(index, filterValue) {\n    switch (filterValue.Label) {\n      case \"Web_Public\":\n        filterValue.Label = \"Open Courses\";\n        break;\n      case \"Web_LiveOnline\":\n        filterValue.Label = \"LIVE Virtual Classroom\";\n        break;\n      case \"Web_PrivateOnsite\":\n        filterValue.Label = \"On-site\";\n        break;\n      case \"Web_SelfpacedOnline\":\n        filterValue.Label = \"E-learning\";\n        break;\n      default:\n        deleteFilterIndexes.push(index);\n    }\n  });<\/p>\n<p>  $.each(deleteFilterIndexes, function(index, value) {\n    filterModel.attributes.Values.splice(value - index, 1);\n  });<\/p>\n<p>  $(\"#arlo-filter-toggle\").click(function() {\n    $(this).parent().toggleClass(\"arlo-show-filter\");\n  });\n};<\/p>\n<p><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Show filters Hide filters<\/p>\n","protected":false},"author":1088,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30165","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/pages\/30165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/users\/1088"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/comments?post=30165"}],"version-history":[{"count":2,"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/pages\/30165\/revisions"}],"predecessor-version":[{"id":30197,"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/pages\/30165\/revisions\/30197"}],"wp:attachment":[{"href":"https:\/\/www.hydro-x.co.uk\/hx-training\/wp-json\/wp\/v2\/media?parent=30165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}