CalendarBuilt revision v17.10.0 CSS core TopicsHuman supportBring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry. CalendarOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<nav data-kit-region="rail" aria-label="Application">
<a data-kit-role="identity" data-kit-region="rail-head" href="?destination=home#main"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span><span data-kit-region="tenant">Oakmere Village Hall</span></a>
<ul>
<li><a data-kit-role="destination" href="?destination=home#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Home</span></a></li></ul><ul data-kit-region="destinations">
<li><a data-kit-role="destination" data-kit-state="current" href="#main" aria-current="page"><svg data-kit-icon="calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Calendar</span></a></li>
<li><a data-kit-role="destination" href="../reports/"><svg data-kit-icon="chart-bar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/></svg><span data-kit-region="name">Reports</span></a></li>
<li data-kit-region="profile"><button type="button" id="kit-shell-profile" aria-haspopup="menu" aria-controls="kit-shell-account"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">MP</span></span><span data-kit-region="name">Maya Patel</span></button></li>
</ul>
</nav>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span><span data-kit-region="tenant">Oakmere Village Hall</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></span><span>16 items</span></p></div>
<div data-kit-region="actions"><a href="../layout-calendar/#layout-calendar">CSS core</a></div>
</header>
<main data-kit-region="body" id="main">
<div>
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-date"><label for="calendar-date-control" id="calendar-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-date-control-resolved" aria-expanded="false" aria-controls="calendar-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-scope">Hall</label><div data-kit-region="select"><select id="calendar-scope"><option value="all">All halls</option><option value="oakmere" selected>Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-filters"><span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 filters</span></span></span></button>
<div data-kit-region="filters" id="kit-calendar-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall</span></span></button>
<div data-kit-role="popover" id="calendar-room-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-room">Room</label><div data-kit-region="select"><select id="calendar-scope-room"><option value="all">All rooms</option><option value="main-hall" selected>Main Hall</option><option value="meeting-room">Meeting Room</option><option value="memorial-room">Memorial Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&payment=overdue&catering=kitchen" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-booking-filter"><span data-kit-region="label"><span data-kit-region="name">Booking</span></span></button>
<div data-kit-role="popover" id="calendar-booking-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-booking">Booking</label><div data-kit-region="select"><select id="calendar-scope-booking"><option value="all" selected>Any booking</option><option value="regular">Regular</option><option value="one-off">One-off</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button>
<div data-kit-role="popover" id="calendar-status-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-status">Status</label><div data-kit-region="select"><select id="calendar-scope-status"><option value="all" selected>Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-hirer-kind-filter"><span data-kit-region="label"><span data-kit-region="name">Hirer kind</span></span></button>
<div data-kit-role="popover" id="calendar-hirer-kind-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-hirer-kind">Hirer kind</label><div data-kit-region="select"><select id="calendar-scope-hirer-kind"><option value="all" selected>Any hirer</option><option value="school">School</option><option value="club">Club</option><option value="private">Private</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-payment-filter"><span data-kit-region="label"><span data-kit-region="name">Payment</span> <span data-kit-region="value">Overdue</span></span></button>
<div data-kit-role="popover" id="calendar-payment-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-payment">Payment</label><div data-kit-region="select"><select id="calendar-scope-payment"><option value="all">Any payment</option><option value="paid">Paid</option><option value="due">Due</option><option value="overdue" selected>Overdue</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&room=main-hall&catering=kitchen" aria-label="Clear Payment"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-setup-filter"><span data-kit-region="label"><span data-kit-region="name">Setup</span></span></button>
<div data-kit-role="popover" id="calendar-setup-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-setup">Setup</label><div data-kit-region="select"><select id="calendar-scope-setup"><option value="all" selected>Any setup</option><option value="theatre">Theatre</option><option value="cabaret">Cabaret</option><option value="boardroom">Boardroom</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-catering-filter"><span data-kit-region="label"><span data-kit-region="name">Catering</span> <span data-kit-region="value">Kitchen</span></span></button>
<div data-kit-role="popover" id="calendar-catering-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-catering">Catering</label><div data-kit-region="select"><select id="calendar-scope-catering"><option value="all">Any catering</option><option value="kitchen" selected>Kitchen</option><option value="none">None</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&room=main-hall&payment=overdue" aria-label="Clear Catering"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-access-filter"><span data-kit-region="label"><span data-kit-region="name">Access</span></span></button>
<div data-kit-role="popover" id="calendar-access-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-access">Access</label><div data-kit-region="select"><select id="calendar-scope-access"><option value="all" selected>Any access</option><option value="step-free">Step-free</option><option value="parking">Parking</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-deposit-filter"><span data-kit-region="label"><span data-kit-region="name">Deposit</span></span></button>
<div data-kit-role="popover" id="calendar-deposit-filter" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-deposit">Deposit</label><div data-kit-region="select"><select id="calendar-scope-deposit"><option value="all" selected>Any deposit</option><option value="held">Held</option><option value="returned">Returned</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="more" id="calendar-more-filters" data-kit-fit="pending" hidden>
<button type="button" data-kit-role="secondary-action" popovertarget="calendar-more-filters-popover"><span data-kit-region="label"><span data-kit-region="name">More filters</span><span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span></span></button>
<div data-kit-role="popover" id="calendar-more-filters-popover" popover="auto">
<ul>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&payment=overdue&catering=kitchen" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-booking-filter"><span data-kit-region="label"><span data-kit-region="name">Booking</span></span></button></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-hirer-kind-filter"><span data-kit-region="label"><span data-kit-region="name">Hirer kind</span></span></button></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-payment-filter"><span data-kit-region="label"><span data-kit-region="name">Payment</span> <span data-kit-region="value">Overdue</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&room=main-hall&catering=kitchen" aria-label="Clear Payment"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-setup-filter"><span data-kit-region="label"><span data-kit-region="name">Setup</span></span></button></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-catering-filter"><span data-kit-region="label"><span data-kit-region="name">Catering</span> <span data-kit-region="value">Kitchen</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?week=this&hall=oakmere&room=main-hall&payment=overdue" aria-label="Clear Catering"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-access-filter"><span data-kit-region="label"><span data-kit-region="name">Access</span></span></button></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="calendar-deposit-filter"><span data-kit-region="label"><span data-kit-region="name">Deposit</span></span></button></li>
</ul>
</div>
</div>
<a data-kit-region="clear-filters" href="?week=this&hall=oakmere">Clear filters</a>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-view-form-group"><fieldset><legend id="calendar-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
<p data-kit-role="status-line" role="status" aria-live="polite">New bookings wait for the hall manager to approve them.</p>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
<a data-kit-region="block" href="../record/" aria-label="Community lunch, 13:00–13:29" style="grid-row: 6 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) * 29 / 60);"><span data-kit-region="name">Community lunch</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>13:29</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../record/" aria-label="School booking for Oakmere Hall, 09:00–11:00" style="grid-row: 2 / span 2;"><span data-kit-region="name">School booking for Oakmere Hall</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../record/" aria-label="Room check, 13:00–13:30" style="grid-row: 6 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Room check</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T13:00+01:00"><span>13:00–</span><wbr><span>13:30</span></time><span data-kit-region="kind"> · Inspection</span></span></a>
<a data-kit-region="block" href="../record/" aria-label="Key handover, 15:00–15:20" style="grid-row: 8 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 3);"><span data-kit-region="name">Key handover</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T15:00+01:00">15:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T15:00+01:00"><span>15:00–</span><wbr><span>15:20</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" data-kit-state="folded" href="day-one-column/" aria-label="16:00–16:35, 3 inspections" style="grid-row: 9 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) * 7 / 12);"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-15T16:00+01:00">16:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">3 inspections</span></span></a>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(3.5 * var(--kit-hour-height));"></div>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
<a data-kit-region="block" href="../record/" aria-label="Meter reading, 13:00–13:05" style="grid-row: 6 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 12);"><span data-kit-region="name">Meter reading</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>13:05</span></time><span data-kit-region="kind"> · Inspection</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<a data-kit-region="block" href="../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 5 / span 3; --kit-calendar-block-part: 1;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" data-kit-state="uncovered" href="../record/" aria-label="Hire request, 11:00–13:00, Cover needed" style="grid-row: 4 / span 2; --kit-calendar-block-part: 2;"><span data-kit-region="name">Hire request</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T11:00+01:00"><span>11:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Requested</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../record/" aria-label="Yoga class, 10:00–12:00" style="grid-row: 3 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" data-kit-state="cancelled" href="../record/" aria-label="Piano lesson, 14:00–14:30, Cancelled" style="grid-row: 7 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Piano lesson</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T14:00+01:00">14:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T14:00+01:00"><span>14:00–</span><wbr><span>14:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
<a data-kit-region="block" data-kit-holds="standing" data-kit-state="uncovered" href="../record/" aria-label="Key collection, 15:00–15:30, Cover needed, This booking will move when you are back online" style="grid-row: 8 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Key collection</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T15:00+01:00">15:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T15:00+01:00"><span>15:00–</span><wbr><span>15:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span><span data-kit-region="standing" data-kit-state="unsaved"><span role="status">This booking will move when you are back online.</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="preparation uncovered" href="../record/" aria-label="Summer term choir, 10:00–12:00, Season not confirmed, Cover needed" style="grid-row: 3 / span 2;"><span data-kit-region="name">Summer term choir</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-20T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-20T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Season not confirmed</span><span>Cover needed</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>13:29</span></time><span>Community lunch<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>School booking for Oakmere Hall<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T13:00+01:00"><span>13:00–</span><wbr><span>13:30</span></time><span>Room check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T15:00+01:00"><span>15:00–</span><wbr><span>15:20</span></time><span>Key handover<span data-kit-region="supporting">Booking · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T16:00+01:00"><span>16:00–</span><wbr><span>16:15</span></time><span>Room check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T16:15+01:00"><span>16:15–</span><wbr><span>16:30</span></time><span>Fire door check<span data-kit-region="supporting">Inspection · Meeting Room · Cover needed</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-15T16:30+01:00"><span>16:30–</span><wbr><span>16:35</span></time><span>Meter reading<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>13:05</span></time><span>Meter reading<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-18T11:00+01:00"><span>11:00–</span><wbr><span>13:00</span></time><span>Hire request<span data-kit-region="supporting">Requested · Cover needed</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-18T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-19T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-19T14:00+01:00"><span>14:00–</span><wbr><span>14:30</span></time><span>Piano lesson<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-19T15:00+01:00"><span>15:00–</span><wbr><span>15:30</span></time><span>Key collection<span data-kit-region="supporting">Booking · Cover needed</span></span></a></div></div><div data-kit-region="standing" data-kit-state="unsaved"><p role="status">This booking will move when you are back online.</p></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="preparation uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/"><time datetime="2025-04-20T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Summer term choir<span data-kit-region="supporting">Booking · Season not confirmed · Cover needed</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</div>
</main>
<nav data-kit-region="bottom-bar" aria-label="Application">
<ul data-kit-region="destinations">
<li><a data-kit-role="destination" href="?destination=home#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Home</span></a></li>
<li><a data-kit-role="destination" data-kit-state="current" href="#main" aria-current="page"><svg data-kit-icon="calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Calendar</span></a></li>
<li><a data-kit-role="destination" href="../reports/"><svg data-kit-icon="chart-bar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/></svg><span data-kit-region="name">Reports</span></a></li>
<li data-kit-region="profile"><button type="button" id="kit-shell-profile-bar" aria-haspopup="menu" aria-controls="kit-shell-account"><span data-kit-role="avatar" data-kit-size="small" aria-hidden="true"><span data-kit-region="initials">M</span></span><span data-kit-region="name">Maya Patel</span></button></li>
</ul>
</nav>
<div id="kit-shell-account-menu" data-kit-region="account-menu"><ul aria-labelledby="kit-shell-profile" id="kit-shell-account" popover="manual" role="menu" data-kit-role="popover"><li role="none" data-kit-region="head"><p title="Maya Patel" data-kit-region="account-name">Maya Patel</p><p title="maya.patel@oakmerehall.org.uk" data-kit-region="account-email"><span><span>maya<wbr />.patel@</span><wbr/><span>oakmerehall<wbr />.org.uk</span></span></p></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><a aria-current="true" id="kit-shell-account/0-0" role="menuitem" href="?hall=oakmere#main" data-kit-region="item"><span data-kit-region="name">Oakmere Village Hall</span></a></li></ul></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><a id="kit-shell-account/1-0" role="menuitem" href="?destination=account-settings#main" data-kit-region="item"><span data-kit-region="name">Account settings</span></a></li><li role="none"><button id="kit-shell-account/1-1" role="menuitem" type="submit" form="kit-shell-account/1-1-form" data-kit-region="item"><span data-kit-region="name">Sign out</span></button><form id="kit-shell-account/1-1-form" action="?sign-out" method="post" hidden></form></li></ul></li></ul></div>
</div>
Calendar, long-hoursOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></span><span>12 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-long-hours">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-long-hours-date"><label for="calendar-long-hours-date-control" id="calendar-long-hours-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-long-hours-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-long-hours-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-long-hours-date-control-resolved" aria-expanded="false" aria-controls="calendar-long-hours-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-long-hours-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-long-hours-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-long-hours-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-long-hours-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-long-hours-scope">Hall</label><div data-kit-region="select"><select id="calendar-long-hours-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-long-hours-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-long-hours-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-long-hours-room">Room</label><div data-kit-region="select"><select id="calendar-long-hours-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-long-hours-view-form-group"><fieldset><legend id="calendar-long-hours-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-long-hours-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-long-hours-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-long-hours-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-long-hours-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 16;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="07:00">07:00</time>
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
<time datetime="18:00">18:00</time>
<time datetime="19:00">19:00</time>
<time datetime="20:00">20:00</time>
<time datetime="21:00">21:00</time>
<time datetime="22:00">22:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Toddler group, 09:30–11:30" style="grid-row: 3 / span 3; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 2);"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Badminton club, 19:00–21:00" style="grid-row: 13 / span 2;"><span data-kit-region="name">Badminton club</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T19:00+01:00">19:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T19:00+01:00"><span>19:00–</span><wbr><span>21:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Art class, 10:00–12:00" style="grid-row: 4 / span 2;"><span data-kit-region="name">Art class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Choir rehearsal, 18:30–20:00" style="grid-row: 12 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T18:30+01:00">18:30</time></span><span data-kit-region="line"><time datetime="2025-04-15T18:30+01:00"><span>18:30–</span><wbr><span>20:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(7.5 * var(--kit-hour-height));"></div>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Lunch club, 13:00–15:00" style="grid-row: 7 / span 2;"><span data-kit-region="name">Lunch club</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 19:30–21:30" style="grid-row: 13 / span 3; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 2);"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T19:30+01:00">19:30</time></span><span data-kit-region="line"><time datetime="2025-04-16T19:30+01:00"><span>19:30–</span><wbr><span>21:30</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Brownies, 17:30–19:00" style="grid-row: 11 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Brownies</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T17:30+01:00">17:30</time></span><span data-kit-region="line"><time datetime="2025-04-17T17:30+01:00"><span>17:30–</span><wbr><span>19:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Hall inspection, 09:00–10:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Hall inspection</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Inspection</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Quiz night, 20:00–22:00" style="grid-row: 14 / span 2;"><span data-kit-region="name">Quiz night</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T20:00+01:00">20:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T20:00+01:00"><span>20:00–</span><wbr><span>22:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 11:00–15:00" style="grid-row: 5 / span 4;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T11:00+01:00"><span>11:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Morning service, 08:00–09:30" style="grid-row: 2 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Morning service</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-20T08:00+01:00">08:00</time></span><span data-kit-region="line"><time datetime="2025-04-20T08:00+01:00"><span>08:00–</span><wbr><span>09:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Birthday party, 16:00–18:00" style="grid-row: 10 / span 2;"><span data-kit-region="name">Birthday party</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-20T16:00+01:00">16:00</time></span><span data-kit-region="line"><time datetime="2025-04-20T16:00+01:00"><span>16:00–</span><wbr><span>18:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:30</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T19:00+01:00"><span>19:00–</span><wbr><span>21:00</span></time><span>Badminton club<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Art class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T18:30+01:00"><span>18:30–</span><wbr><span>20:00</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Lunch club<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T19:30+01:00"><span>19:30–</span><wbr><span>21:30</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T17:30+01:00"><span>17:30–</span><wbr><span>19:00</span></time><span>Brownies<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Hall inspection<span data-kit-region="supporting">Inspection · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T20:00+01:00"><span>20:00–</span><wbr><span>22:00</span></time><span>Quiz night<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-19T11:00+01:00"><span>11:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-20T08:00+01:00"><span>08:00–</span><wbr><span>09:30</span></time><span>Morning service<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-20T16:00+01:00"><span>16:00–</span><wbr><span>18:00</span></time><span>Birthday party<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, early-nowOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></span><span>11 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-early-now">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-early-now-date"><label for="calendar-early-now-date-control" id="calendar-early-now-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-early-now-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-early-now-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-early-now-date-control-resolved" aria-expanded="false" aria-controls="calendar-early-now-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-early-now-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-early-now-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-early-now-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-early-now-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-early-now-scope">Hall</label><div data-kit-region="select"><select id="calendar-early-now-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-early-now-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-early-now-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-early-now-room">Room</label><div data-kit-region="select"><select id="calendar-early-now-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-early-now-view-form-group"><fieldset><legend id="calendar-early-now-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-early-now-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-early-now-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-early-now-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-early-now-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 15;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="07:00">07:00</time>
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
<time datetime="18:00">18:00</time>
<time datetime="19:00">19:00</time>
<time datetime="20:00">20:00</time>
<time datetime="21:00">21:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Slimming group, 09:30–11:00" style="grid-row: 3 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Slimming group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Youth club, 18:00–20:00" style="grid-row: 12 / span 2;"><span data-kit-region="name">Youth club</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T18:00+01:00">18:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T18:00+01:00"><span>18:00–</span><wbr><span>20:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Baby clinic, 09:00–12:00" style="grid-row: 3 / span 3;"><span data-kit-region="name">Baby clinic</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Table tennis, 19:00–20:30" style="grid-row: 13 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Table tennis</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T19:00+01:00">19:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T19:00+01:00"><span>19:00–</span><wbr><span>20:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Coffee morning, 10:00–11:30" style="grid-row: 4 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Coffee morning</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Trustees meeting, 14:00–15:30" style="grid-row: 8 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Trustees meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T14:00+01:00">14:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T14:00+01:00"><span>14:00–</span><wbr><span>15:30</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(2.25 * var(--kit-hour-height));"></div>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Craft club, 13:00–15:00" style="grid-row: 7 / span 2;"><span data-kit-region="name">Craft club</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Hall deep clean, 08:00–09:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Hall deep clean</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T08:00+01:00">08:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T08:00+01:00"><span>08:00–</span><wbr><span>09:00</span></time><span data-kit-region="kind"> · Inspection</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Film night, 19:00–21:00" style="grid-row: 13 / span 2;"><span data-kit-region="name">Film night</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T19:00+01:00">19:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T19:00+01:00"><span>19:00–</span><wbr><span>21:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Christening party, 12:00–16:00" style="grid-row: 6 / span 4;"><span data-kit-region="name">Christening party</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T12:00+01:00"><span>12:00–</span><wbr><span>16:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Art exhibition, 11:00–15:00" style="grid-row: 5 / span 4;"><span data-kit-region="name">Art exhibition</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-20T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-20T11:00+01:00"><span>11:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Slimming group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T18:00+01:00"><span>18:00–</span><wbr><span>20:00</span></time><span>Youth club<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>12:00</span></time><span>Baby clinic<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T19:00+01:00"><span>19:00–</span><wbr><span>20:30</span></time><span>Table tennis<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Coffee morning<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T14:00+01:00"><span>14:00–</span><wbr><span>15:30</span></time><span>Trustees meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Craft club<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T08:00+01:00"><span>08:00–</span><wbr><span>09:00</span></time><span>Hall deep clean<span data-kit-region="supporting">Inspection · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T19:00+01:00"><span>19:00–</span><wbr><span>21:00</span></time><span>Film night<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-19T12:00+01:00"><span>12:00–</span><wbr><span>16:00</span></time><span>Christening party<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-20T11:00+01:00"><span>11:00–</span><wbr><span>15:00</span></time><span>Art exhibition<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, bandsOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-bands">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-bands-date"><label for="calendar-bands-date-control" id="calendar-bands-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-bands-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-bands-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-bands-date-control-resolved" aria-expanded="false" aria-controls="calendar-bands-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-bands-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-bands-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-bands-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-bands-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-bands-scope">Hall</label><div data-kit-region="select"><select id="calendar-bands-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-bands-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-bands-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-bands-room">Room</label><div data-kit-region="select"><select id="calendar-bands-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-bands-view-form-group"><fieldset><legend id="calendar-bands-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-bands-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-bands-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-bands-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-bands-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 5; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
</div>
<div data-kit-region="bands">
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 2; --kit-calendar-band-last: 4; --kit-calendar-band-stack: 1;">Hall closed for rewiring</a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 5; --kit-calendar-band-last: 5; --kit-calendar-band-stack: 1;">Spring fair</a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 5; --kit-calendar-band-last: 5; --kit-calendar-band-stack: 2;">Oakmere Primary School summer fair rehearsal</a>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 1 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 11:00–12:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Choir rehearsal, 10:00–11:30" style="grid-row: 2 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Hall handover, 13:00–14:00" style="grid-row: 5 / span 1;"><span data-kit-region="name">Hall handover</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for rewiring</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for rewiring</a></div></div></div></div></article></div>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for rewiring</a></div></div></div></div></article></div>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Spring fair</a></div></div></div></div></article></div>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Oakmere Primary School summer fair rehearsal</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span>Hall handover<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, partial-day-closureOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>3 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-partial-day-closure">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-partial-day-closure-date"><label for="calendar-partial-day-closure-date-control" id="calendar-partial-day-closure-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-partial-day-closure-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-partial-day-closure-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-partial-day-closure-date-control-resolved" aria-expanded="false" aria-controls="calendar-partial-day-closure-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-partial-day-closure-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-partial-day-closure-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-partial-day-closure-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-partial-day-closure-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-closure-scope">Hall</label><div data-kit-region="select"><select id="calendar-closure-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-closure-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-closure-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-closure-room">Room</label><div data-kit-region="select"><select id="calendar-closure-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-partial-day-closure-view-form-group"><fieldset><legend id="calendar-partial-day-closure-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-partial-day-closure-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-partial-day-closure-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-partial-day-closure-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-partial-day-closure-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="column">
<div data-kit-region="closure" style="grid-row: 4 / span 2;"><a data-kit-region="name" href="../../record/">Hall closed for floor cleaning</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Community lunch, 13:00–14:00" style="grid-row: 5 / span 1;"><span data-kit-region="name">Community lunch</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<div data-kit-region="closure" style="grid-row: 2 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><a data-kit-region="name" href="../../record/" draggable="true">Meeting Room closed for rewiring</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>14:00</span></time><span>Hall closed for floor cleaning<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Meeting Room closed for rewiring<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, closure-under-blockOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></span><span>6 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-closure-under-block">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-closure-under-block-date"><label for="calendar-closure-under-block-date-control" id="calendar-closure-under-block-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-closure-under-block-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-closure-under-block-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-closure-under-block-date-control-resolved" aria-expanded="false" aria-controls="calendar-closure-under-block-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-closure-under-block-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-closure-under-block-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-closure-under-block-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-closure-under-block-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-closure-scope">Hall</label><div data-kit-region="select"><select id="calendar-closure-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-closure-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-closure-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-closure-room">Room</label><div data-kit-region="select"><select id="calendar-closure-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-closure-under-block-view-form-group"><fieldset><legend id="calendar-closure-under-block-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-closure-under-block-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-closure-under-block-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-closure-under-block-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-closure-under-block-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 5; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
<time datetime="18:00">18:00</time>
</div>
</aside>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<div data-kit-region="closure" style="grid-row: 4 / span 1; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><a data-kit-region="name" href="../../record/">Floor repair</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Teen jazz, 16:00–17:00" style="grid-row: 4 / span 1; --kit-calendar-block-part: 1;"><span data-kit-region="name">Teen jazz</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T16:00+01:00">16:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T16:00+01:00"><span>16:00–</span><wbr><span>17:00</span></time><span data-kit-region="kind"> · Class</span></span></a>
</div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<div data-kit-region="closure" style="grid-row: 2 / span 1; --kit-calendar-block-part: 2; --kit-calendar-block-size: calc(var(--kit-hour-height) / 4);"><a data-kit-region="name" href="../../record/">Fire drill</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Junior ballet, 14:00–14:30" style="grid-row: 2 / span 1; --kit-calendar-block-part: 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Junior ballet</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T14:00+01:00">14:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T14:00+01:00"><span>14:00–</span><wbr><span>14:30</span></time><span data-kit-region="kind"> · Class</span></span></a>
</div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<div data-kit-region="closure" style="grid-row: 1 / span 2; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: var(--kit-hour-height);"><a data-kit-region="name" href="../../record/">Sound system check</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Adult contemporary, 13:00–15:00" style="grid-row: 1 / span 2; --kit-calendar-block-part: 1;"><span data-kit-region="name">Adult contemporary</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Class</span></span></a>
</div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<div data-kit-region="closure" style="grid-row: 4 / span 2; --kit-calendar-block-part: 2;"><a data-kit-region="name" href="../../record/">Heating maintenance</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Ballroom, 15:30–16:30" style="grid-row: 3 / span 2; --kit-calendar-block-part: 1; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: var(--kit-hour-height);"><span data-kit-region="name">Ballroom</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T15:30+01:00">15:30</time></span><span data-kit-region="line"><time datetime="2025-04-17T15:30+01:00"><span>15:30–</span><wbr><span>16:30</span></time><span data-kit-region="kind"> · Class</span></span></a>
</div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 3;">
<div data-kit-region="closure" style="grid-row: 2 / span 1; --kit-calendar-block-part: 3; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><a data-kit-region="name" href="../../record/">Mirror cleaning</a></div>
<a data-kit-region="block" href="../../record/" aria-label="Hip hop, 14:00–15:00" style="grid-row: 2 / span 1; --kit-calendar-block-part: 1;"><span data-kit-region="name">Hip hop</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T14:00+01:00">14:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T14:00+01:00"><span>14:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Class</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Tap, 14:30–15:30" style="grid-row: 2 / span 2; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: var(--kit-hour-height);"><span data-kit-region="name">Tap</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T14:30+01:00">14:30</time></span><span data-kit-region="line"><time datetime="2025-04-18T14:30+01:00"><span>14:30–</span><wbr><span>15:30</span></time><span data-kit-region="kind"> · Class</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T16:00+01:00"><span>16:00–</span><wbr><span>17:00</span></time><span>Teen jazz<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T16:30+01:00"><span>16:30–</span><wbr><span>17:00</span></time><span>Floor repair<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T14:00+01:00"><span>14:00–</span><wbr><span>14:15</span></time><span>Fire drill<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T14:00+01:00"><span>14:00–</span><wbr><span>14:30</span></time><span>Junior ballet<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Adult contemporary<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T13:30+01:00"><span>13:30–</span><wbr><span>14:30</span></time><span>Sound system check<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T15:30+01:00"><span>15:30–</span><wbr><span>16:30</span></time><span>Ballroom<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T16:00+01:00"><span>16:00–</span><wbr><span>18:00</span></time><span>Heating maintenance<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T14:00+01:00"><span>14:00–</span><wbr><span>15:00</span></time><span>Hip hop<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T14:30+01:00"><span>14:30–</span><wbr><span>15:00</span></time><span>Mirror cleaning<span data-kit-region="supporting">Closure</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T14:30+01:00"><span>14:30–</span><wbr><span>15:30</span></time><span>Tap<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, whole-day-closureOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></span><span>8 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-whole-day-closure">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-whole-day-closure-date"><label for="calendar-whole-day-closure-date-control" id="calendar-whole-day-closure-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-whole-day-closure-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-whole-day-closure-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-whole-day-closure-date-control-resolved" aria-expanded="false" aria-controls="calendar-whole-day-closure-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-whole-day-closure-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-whole-day-closure-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-whole-day-closure-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-whole-day-closure-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-scope">Hall</label><div data-kit-region="select"><select id="calendar-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-scope-room">Room</label><div data-kit-region="select"><select id="calendar-scope-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-whole-day-closure-view-form-group"><fieldset><legend id="calendar-whole-day-closure-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-whole-day-closure-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-whole-day-closure-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-whole-day-closure-view" value="day"><span data-kit-region="segment-name">Day</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="bands">
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 4; --kit-calendar-band-last: 4; --kit-calendar-band-stack: 1;">Hall closed for rewiring</a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 6; --kit-calendar-band-last: 6; --kit-calendar-band-stack: 1;">Hall closed for resurfacing</a>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="cancelled" href="../../record/" aria-label="Toddler group, 09:30–11:00, Cancelled" style="grid-row: 2 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-17T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
<a data-kit-region="block" data-kit-state="cancelled" href="../../record/" aria-label="Choir rehearsal, 14:00–15:30, Cancelled" style="grid-row: 7 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T14:00+01:00">14:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T14:00+01:00"><span>14:00–</span><wbr><span>15:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Wedding rehearsal, 12:00–13:00" style="grid-row: 5 / span 1;"><span data-kit-region="name">Wedding rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="cancelled" href="../../record/" aria-label="Yoga class, 10:00–11:00, Cancelled" style="grid-row: 3 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Sunday service, 10:00–11:30" style="grid-row: 3 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Sunday service</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-20T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-20T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for rewiring</a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T14:00+01:00"><span>14:00–</span><wbr><span>15:30</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Wedding rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for resurfacing</a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-19T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-20T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Sunday service<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, overlapOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>8 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-overlap">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-overlap-date"><label for="calendar-overlap-date-control" id="calendar-overlap-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-overlap-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-overlap-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-overlap-date-control-resolved" aria-expanded="false" aria-controls="calendar-overlap-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-overlap-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-overlap-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-overlap-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-overlap-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-overlap-scope">Hall</label><div data-kit-region="select"><select id="calendar-overlap-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-overlap-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-overlap-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-overlap-room">Room</label><div data-kit-region="select"><select id="calendar-overlap-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-overlap-view-form-group"><fieldset><legend id="calendar-overlap-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-overlap-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-overlap-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-overlap-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-overlap-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="bands">
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 1; --kit-calendar-band-last: 1; --kit-calendar-band-stack: 1;">Open day</a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 1; --kit-calendar-band-last: 1; --kit-calendar-band-stack: 2;">Meeting Room decorated</a>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" data-kit-state="folded" href="../day-rooms/" aria-label="3 items, 11:00–12:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">3 items</span></a>
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 4 / span 3;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<a data-kit-region="block" href="../../record/" aria-label="Toddler group, 09:00–11:00" style="grid-row: 1 / span 2; --kit-calendar-block-part: 1;"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Fire inspection, 09:30–10:30" style="grid-row: 1 / span 2; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: var(--kit-hour-height);"><span data-kit-region="name">Fire inspection</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-16T09:30+01:00"><span>09:30–</span><wbr><span>10:30</span></time><span data-kit-region="kind"> · Inspection</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Open day</a></div></div></div></div></article></div>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Meeting Room decorated</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Hire request<span data-kit-region="supporting">Requested</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:30+01:00"><span>11:30–</span><wbr><span>12:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T09:30+01:00"><span>09:30–</span><wbr><span>10:30</span></time><span>Fire inspection<span data-kit-region="supporting">Inspection</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, contiguous-runOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></span><span>16 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-contiguous-run">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-contiguous-run-date"><label for="calendar-contiguous-run-date-control" id="calendar-contiguous-run-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-contiguous-run-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-contiguous-run-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-contiguous-run-date-control-resolved" aria-expanded="false" aria-controls="calendar-contiguous-run-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-contiguous-run-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-contiguous-run-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-contiguous-run-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-contiguous-run-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-contiguous-run-scope">Hall</label><div data-kit-region="select"><select id="calendar-contiguous-run-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-contiguous-run-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-contiguous-run-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-contiguous-run-room">Room</label><div data-kit-region="select"><select id="calendar-contiguous-run-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-contiguous-run-view-form-group"><fieldset><legend id="calendar-contiguous-run-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-contiguous-run-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-contiguous-run-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-contiguous-run-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-contiguous-run-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 4;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="folded" href="../day-one-column/" aria-label="09:00–09:20, 2 bookings" style="grid-row: 1 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 3);"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-14T09:00+01:00">09:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">2 bookings</span></span></a>
<a data-kit-region="block" data-kit-state="folded" href="../day-one-column/" aria-label="10:00–10:35, 3 room inspections" style="grid-row: 2 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) * 7 / 12);"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-14T10:00+01:00">10:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">3 room inspections</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga, 09:00–09:15" style="grid-row: 1 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 4);"><span data-kit-region="name">Yoga</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>09:15</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Singing, 09:45–10:00" style="grid-row: 1 / span 1; --kit-calendar-block-offset: calc(var(--kit-hour-height) * 3 / 4); --kit-calendar-block-size: calc(var(--kit-hour-height) / 4);"><span data-kit-region="name">Singing</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T09:45+01:00">09:45</time></span><span data-kit-region="line"><time datetime="2025-04-15T09:45+01:00"><span>09:45–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="folded" href="../day-one-column/" aria-label="09:00–09:45, 3 bookings" style="grid-row: 1 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) * 3 / 4);"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-16T09:00+01:00">09:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">3 bookings</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="folded" href="../day-one-column/" aria-label="09:00–10:00, 4 inspections" style="grid-row: 1 / span 1;"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-17T09:00+01:00">09:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">4 inspections</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="folded" href="../day-one-column/" aria-label="09:00–09:30, 2 inspections" style="grid-row: 1 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name" aria-hidden="true"><span data-kit-region="start"><time datetime="2025-04-18T09:00+01:00">09:00</time><span data-kit-region="separator"> · </span></span><span data-kit-region="count">2 inspections</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>09:10</span></time><span>Chair stack<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:10+01:00"><span>09:10–</span><wbr><span>09:20</span></time><span>Trolley store<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>10:10</span></time><span>Room check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:10+01:00"><span>10:10–</span><wbr><span>10:20</span></time><span>Fire door check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:20+01:00"><span>10:20–</span><wbr><span>10:35</span></time><span>Meter reading<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T09:00+01:00"><span>09:00–</span><wbr><span>09:15</span></time><span>Yoga<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T09:45+01:00"><span>09:45–</span><wbr><span>10:00</span></time><span>Singing<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T09:00+01:00"><span>09:00–</span><wbr><span>09:15</span></time><span>Yoga<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T09:15+01:00"><span>09:15–</span><wbr><span>09:30</span></time><span>Judo<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T09:30+01:00"><span>09:30–</span><wbr><span>09:45</span></time><span>Singing<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:00+01:00"><span>09:00–</span><wbr><span>09:15</span></time><span>Ramp check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:15+01:00"><span>09:15–</span><wbr><span>09:30</span></time><span>Door widths<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:30+01:00"><span>09:30–</span><wbr><span>09:45</span></time><span>Hearing loop test<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:45+01:00"><span>09:45–</span><wbr><span>10:00</span></time><span>Signage check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T09:00+01:00"><span>09:00–</span><wbr><span>09:10</span></time><span>Gate check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T09:20+01:00"><span>09:20–</span><wbr><span>09:30</span></time><span>Lift check<span data-kit-region="supporting">Inspection · Meeting Room</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<p>Nothing booked</p>
</section>
</div>
</div>
</main>
</div>
Calendar, cancelledOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>3 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-cancelled">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-cancelled-date"><label for="calendar-cancelled-date-control" id="calendar-cancelled-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-cancelled-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-cancelled-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-cancelled-date-control-resolved" aria-expanded="false" aria-controls="calendar-cancelled-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-cancelled-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-cancelled-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-cancelled-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-cancelled-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-cancelled-scope">Hall</label><div data-kit-region="select"><select id="calendar-cancelled-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-cancelled-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-cancelled-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-cancelled-room">Room</label><div data-kit-region="select"><select id="calendar-cancelled-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-cancelled-view-form-group"><fieldset><legend id="calendar-cancelled-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-cancelled-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-cancelled-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-cancelled-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-cancelled-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="cancelled" href="../../record/" aria-label="Toddler group, 09:30–11:00, Cancelled" style="grid-row: 1 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="cancelled" href="../../record/" aria-label="Choir rehearsal, 12:00–13:00, Cancelled" style="grid-row: 4 / span 1;"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cancelled</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, uncoveredOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>3 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-uncovered">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-uncovered-date"><label for="calendar-uncovered-date-control" id="calendar-uncovered-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-uncovered-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-uncovered-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-uncovered-date-control-resolved" aria-expanded="false" aria-controls="calendar-uncovered-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-uncovered-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-uncovered-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-uncovered-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-uncovered-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-uncovered-scope">Hall</label><div data-kit-region="select"><select id="calendar-uncovered-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-uncovered-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-uncovered-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-uncovered-room">Room</label><div data-kit-region="select"><select id="calendar-uncovered-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-uncovered-view-form-group"><fieldset><legend id="calendar-uncovered-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-uncovered-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-uncovered-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-uncovered-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-uncovered-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<a data-kit-region="block" data-kit-state="uncovered" href="../../record/" aria-label="Toddler group, 09:00–10:00, Cover needed" style="grid-row: 1 / span 1; --kit-calendar-block-part: 1;"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span></span></a>
<a data-kit-region="block" data-kit-state="uncovered" href="../../record/" aria-label="Story time, 09:30–10:00, Cover needed" style="grid-row: 1 / span 1; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Story time</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="uncovered" href="../../record/" aria-label="Community lunch, 12:00–13:00, Cover needed" style="grid-row: 4 / span 1;"><span data-kit-region="name">Community lunch</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking · Cover needed</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>10:00</span></time><span>Story time<span data-kit-region="supporting">Booking · Cover needed</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking · Cover needed</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, clashingOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-clashing">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-clashing-date"><label for="calendar-clashing-date-control" id="calendar-clashing-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-clashing-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-clashing-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-clashing-date-control-resolved" aria-expanded="false" aria-controls="calendar-clashing-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-clashing-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-clashing-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-clashing-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-clashing-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-clashing-scope">Hall</label><div data-kit-region="select"><select id="calendar-clashing-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-clashing-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-clashing-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-clashing-room">Room</label><div data-kit-region="select"><select id="calendar-clashing-room"><option value="all">All rooms</option><option value="main-hall" selected>Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-clashing-view-form-group"><fieldset><legend id="calendar-clashing-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-clashing-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-clashing-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-clashing-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-clashing-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column" style="--kit-calendar-column-parts: 2;">
<a data-kit-region="block" data-kit-state="clashing" href="../../record/" aria-label="Toddler group, 09:00–10:00, Time conflict" style="grid-row: 1 / span 1; --kit-calendar-block-part: 1;"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Time conflict</span></span></span></a>
<a data-kit-region="block" data-kit-state="clashing" href="../../record/" aria-label="Hall inspection, 09:30–10:00, Time conflict" style="grid-row: 1 / span 1; --kit-calendar-block-part: 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Hall inspection</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Inspection</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Time conflict</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="clashing" href="../../record/" aria-label="Parish council, 12:00–13:00, Time conflict" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Meeting in 2 rooms</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Time conflict</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="clashing"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking · Time conflict</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="clashing"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>10:00</span></time><span>Hall inspection<span data-kit-region="supporting">Inspection · Time conflict</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="clashing"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting in 2 rooms · Time conflict</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, coveredOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>3 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-covered">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-covered-date"><label for="calendar-covered-date-control" id="calendar-covered-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-covered-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-covered-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-covered-date-control-resolved" aria-expanded="false" aria-controls="calendar-covered-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-covered-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-covered-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-covered-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-covered-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-covered-scope">Hall</label><div data-kit-region="select"><select id="calendar-covered-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-covered-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-covered-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-covered-room">Room</label><div data-kit-region="select"><select id="calendar-covered-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-covered-view-form-group"><fieldset><legend id="calendar-covered-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-covered-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-covered-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-covered-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-covered-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="covered" href="../../record/" aria-label="Toddler group, 09:00–10:30, Cover arranged" style="grid-row: 1 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover arranged</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="covered" href="../../record/" aria-label="Community lunch, 12:00–13:00, Cover arranged" style="grid-row: 4 / span 1;"><span data-kit-region="name">Community lunch</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover arranged</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="covered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:30</span></time><span>Toddler group<span data-kit-region="supporting">Booking · Cover arranged</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="covered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking · Cover arranged</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, preparationOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>3 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-preparation">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-preparation-date"><label for="calendar-preparation-date-control" id="calendar-preparation-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-preparation-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-preparation-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-preparation-date-control-resolved" aria-expanded="false" aria-controls="calendar-preparation-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-preparation-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-preparation-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-preparation-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-preparation-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-preparation-scope">Hall</label><div data-kit-region="select"><select id="calendar-preparation-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-preparation-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-preparation-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-preparation-room">Room</label><div data-kit-region="select"><select id="calendar-preparation-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-preparation-view-form-group"><fieldset><legend id="calendar-preparation-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-preparation-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-preparation-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-preparation-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-preparation-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="preparation" href="../../record/" aria-label="Summer term yoga, 09:00–10:30, Season not confirmed" style="grid-row: 1 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Summer term yoga</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Season not confirmed</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="preparation uncovered" href="../../record/" aria-label="Summer term toddler group, 12:00–13:00, Season not confirmed, Cover needed" style="grid-row: 4 / span 1;"><span data-kit-region="name">Summer term toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Season not confirmed</span><span>Cover needed</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="preparation"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:30</span></time><span>Summer term yoga<span data-kit-region="supporting">Booking · Season not confirmed</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="preparation uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Summer term toddler group<span data-kit-region="supporting">Booking · Season not confirmed · Cover needed</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, day-roomsOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></span><span>5 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-day-rooms">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?day=previous" rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?day=next" rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-day-rooms-date"><label for="calendar-day-rooms-date-control" id="calendar-day-rooms-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-day-rooms-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-day-rooms-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-day-rooms-date-control-resolved" aria-expanded="false" aria-controls="calendar-day-rooms-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-day-rooms-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-day-rooms-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-day-rooms-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-day-rooms-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-day-scope">Hall</label><div data-kit-region="select"><select id="calendar-day-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-day-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-day-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-day-room">Room</label><div data-kit-region="select"><select id="calendar-day-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option><option value="meeting-room">Meeting Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-day-view-form-group"><fieldset><legend id="calendar-day-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-day-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-day-view" value="day" checked><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-day-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-day-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 4; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>No room yet</strong></span></div>
<div data-kit-region="column-head"><span><strong>Main Hall</strong></span></div>
<div data-kit-region="column-head"><span><strong>Meeting Room</strong></span></div>
<div data-kit-region="column-head"><span><strong>Memorial Room</strong></span></div>
</div>
<div data-kit-region="bands">
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 1; --kit-calendar-band-last: 4; --kit-calendar-band-stack: 1;">Open day</a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 3; --kit-calendar-band-last: 3; --kit-calendar-band-stack: 2;">Meeting Room decorated</a>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(3.5 * var(--kit-hour-height));"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Hire request, 11:00–12:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Hire request</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Requested</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Community lunch, 11:30–12:00" style="grid-row: 3 / span 1; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Community lunch</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T11:30+01:00">11:30</time></span><span data-kit-region="line"><time datetime="2025-04-14T11:30+01:00"><span>11:30–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 4 / span 3;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 3 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Open day</a></div></div></div></div></article></div>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Meeting Room decorated</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Hire request<span data-kit-region="supporting">Requested</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:30+01:00"><span>11:30–</span><wbr><span>12:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, day-one-columnOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></span><span>2 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-day-one-column">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Memorial Hall calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?day=previous" rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?day=next" rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-day-one-column-date"><label for="calendar-day-one-column-date-control" id="calendar-day-one-column-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-day-one-column-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-day-one-column-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-day-one-column-date-control-resolved" aria-expanded="false" aria-controls="calendar-day-one-column-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-day-one-column-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-day-one-column-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-day-one-column-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-day-one-column-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-day-one-scope">Hall</label><div data-kit-region="select"><select id="calendar-day-one-scope"><option value="memorial">Memorial Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-day-one-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-day-one-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-day-one-kind">Kind</label><div data-kit-region="select"><select id="calendar-day-one-kind"><option value="all">All kinds</option><option value="booking">Bookings</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-day-one-view-form-group"><fieldset><legend id="calendar-day-one-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-day-one-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-day-one-view" value="day" checked><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-day-one-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-day-one-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 1; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(3.5 * var(--kit-hour-height));"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Art class, 09:00–11:00" style="grid-row: 1 / span 2;"><span data-kit-region="name">Art class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Whist drive, 13:00–15:00" style="grid-row: 5 / span 2;"><span data-kit-region="name">Whist drive</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Art class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Whist drive<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, monthOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-01">April 2025</time></span><span>19 items, most in the week of <time datetime="2025-04-14">14 April 2025</time></span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-month">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-01">April 2025</time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?month=previous" rel="prev" aria-label="Previous month"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?month=next" rel="next" aria-label="Next month"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-month-date"><label for="calendar-month-date-control" id="calendar-month-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-month-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-01"}'><input id="calendar-month-date-control" type="text" autocomplete="off" value="Tuesday, 1 April 2025" aria-describedby="calendar-month-date-control-resolved" aria-expanded="false" aria-controls="calendar-month-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-month-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-month-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-month-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-01"><div id="calendar-month-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-month-scope">Hall</label><div data-kit-region="select"><select id="calendar-month-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-month-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-month-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-month-room">Room</label><div data-kit-region="select"><select id="calendar-month-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-month-view-form-group"><fieldset><legend id="calendar-month-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-month-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-month-view" value="month" checked><span data-kit-region="segment-name">Month</span></label><label data-kit-region="segment"><input type="radio" name="calendar-month-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-month-view" value="day"><span data-kit-region="segment-name">Day</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="month-grid" style="--kit-calendar-columns: 7;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong></span></div>
</div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-03-31">31 Mar</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-01">1</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2025-04-01T09:30+01:00">09:30</time></a><button data-kit-region="new" type="button" aria-label="New booking on 1 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-02">2</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-03">3</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Parish council</span> <time datetime="2025-04-03T19:00+01:00">19:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 3 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-04">4</time></span><button data-kit-region="new" type="button" aria-label="New booking on 4 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-05">5</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Birthday party</span> <time datetime="2025-04-05T14:00+01:00">14:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 5 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-06">6</time></span><button data-kit-region="new" type="button" aria-label="New booking on 6 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-07">7</time></span><button data-kit-region="new" type="button" aria-label="New booking on 7 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-08">8</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2025-04-08T09:30+01:00">09:30</time></a><button data-kit-region="new" type="button" aria-label="New booking on 8 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-09">9</time></span><button data-kit-region="new" type="button" aria-label="New booking on 9 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-10">10</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Yoga class</span> <time datetime="2025-04-10T10:00+01:00">10:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 10 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-11">11</time></span><button data-kit-region="new" type="button" aria-label="New booking on 11 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-12">12</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Wedding reception</span> <time datetime="2025-04-12T12:00+01:00">12:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 12 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-13">13</time></span><button data-kit-region="new" type="button" aria-label="New booking on 13 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-14">14</time></span><a data-kit-region="band" href="../../record/">Open day</a><a data-kit-region="band" href="../../record/">Meeting Room decorated</a><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Yoga class</span> <time datetime="2025-04-14T10:00+01:00">10:00</time></a><a data-kit-region="item" data-kit-state="folded" href="../day-rooms/">4 more</a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-15">15</time></span><a data-kit-region="band" href="../../record/">Hall closed for rewiring</a><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Key handover</span> <time datetime="2025-04-15T15:00+01:00">15:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 15 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-16">16</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Parish council</span> <time datetime="2025-04-16T11:00+01:00">11:00</time></a><a data-kit-region="item" data-kit-state="cancelled" href="../../record/"><span data-kit-region="head">Choir rehearsal</span> <time datetime="2025-04-16T18:00+01:00">18:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 16 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-17">17</time></span><button data-kit-region="new" type="button" aria-label="New booking on 17 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-18">18</time></span><button data-kit-region="new" type="button" aria-label="New booking on 18 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-19">19</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Birthday party</span> <time datetime="2025-04-19T14:00+01:00">14:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 19 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-20">20</time></span><button data-kit-region="new" type="button" aria-label="New booking on 20 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-21">21</time></span><button data-kit-region="new" type="button" aria-label="New booking on 21 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-22">22</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2025-04-22T09:30+01:00">09:30</time></a><button data-kit-region="new" type="button" aria-label="New booking on 22 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-23">23</time></span><button data-kit-region="new" type="button" aria-label="New booking on 23 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-24">24</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Yoga class</span> <time datetime="2025-04-24T10:00+01:00">10:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 24 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-25">25</time></span><button data-kit-region="new" type="button" aria-label="New booking on 25 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-26">26</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Village fair planning</span> <time datetime="2025-04-26T10:00+01:00">10:00</time></a><button data-kit-region="new" type="button" aria-label="New booking on 26 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-27">27</time></span><button data-kit-region="new" type="button" aria-label="New booking on 27 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-28">28</time></span><button data-kit-region="new" type="button" aria-label="New booking on 28 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-29">29</time></span><a data-kit-region="item" href="../../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2025-04-29T09:30+01:00">09:30</time></a><button data-kit-region="new" type="button" aria-label="New booking on 29 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-04-30">30</time></span><button data-kit-region="new" type="button" aria-label="New booking on 30 April 2025"></button></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-05-01">1 May</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-05-02">2 May</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-05-03">3 May</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2025-05-04">4 May</time></span></div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-01">1 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-01T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-02">2 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-03">3 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-03T19:00+01:00"><span>19:00–</span><wbr><span>20:30</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-04">4 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-05">5 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-05T14:00+01:00"><span>14:00–</span><wbr><span>16:00</span></time><span>Birthday party<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-06">6 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-07">7 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-08">8 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-08T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-09">9 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-10">10 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-10T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-11">11 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-12">12 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-12T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-13">13 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Open day</a></div></div></div></div></article></div>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Meeting Room decorated</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Hire request<span data-kit-region="supporting">Requested</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting · Meeting Room</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T11:30+01:00"><span>11:30–</span><wbr><span>12:00</span></time><span>Community lunch<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking · Main Hall</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Hall closed for rewiring</a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T15:00+01:00"><span>15:00–</span><wbr><span>15:20</span></time><span>Key handover<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:30</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="cancelled"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T18:00+01:00"><span>18:00–</span><wbr><span>20:00</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking · Cancelled</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-19T14:00+01:00"><span>14:00–</span><wbr><span>16:00</span></time><span>Birthday party<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-22T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-24">24 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-24T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-25">25 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-26">26 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-26T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Village fair planning<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-27">27 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-28">28 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-29">29 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-29T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-30">30 Apr</time></span></header>
<p>Nothing booked</p>
</section>
</div>
</div>
</main>
</div>
Calendar, emptyOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></span><span>No bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-empty">CSS core</a></div>
</header>
<main data-kit-region="body" id="main">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-16"><span>14 – </span><wbr><span>16 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-empty-date"><label for="calendar-empty-date-control" id="calendar-empty-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-empty-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-empty-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-empty-date-control-resolved" aria-expanded="false" aria-controls="calendar-empty-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-empty-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-empty-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-empty-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-empty-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-empty-scope">Hall</label><div data-kit-region="select"><select id="calendar-empty-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-empty-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-empty-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-empty-room">Room</label><div data-kit-region="select"><select id="calendar-empty-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-empty-view-form-group"><fieldset><legend id="calendar-empty-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-empty-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-empty-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-empty-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-empty-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" data-kit-state="empty" style="--kit-calendar-columns: 3; --kit-calendar-hours: 14;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div>
<p>Nothing booked this week. Bookings show here once they're made.</p>
</div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="07:00">07:00</time>
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
<time datetime="18:00">18:00</time>
<time datetime="19:00">19:00</time>
<time datetime="20:00">20:00</time>
</div>
</aside>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(11.5 * var(--kit-hour-height));"></div>
</div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days" data-kit-state="empty">
<div>
<p>Nothing booked this week. Bookings show here once they're made.</p>
</div>
</div>
</div>
</main>
</div>
Calendar, movingOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-moving">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-moving-date"><label for="calendar-moving-date-control" id="calendar-moving-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-moving-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-moving-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-moving-date-control-resolved" aria-expanded="false" aria-controls="calendar-moving-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-moving-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-moving-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-moving-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-moving-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-moving-scope">Hall</label><div data-kit-region="select"><select id="calendar-moving-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-moving-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-moving-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-moving-room">Room</label><div data-kit-region="select"><select id="calendar-moving-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-moving-view-form-group"><fieldset><legend id="calendar-moving-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-moving-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-moving-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-moving-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-moving-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 4; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="moving" href="../../record/calendar-item/" aria-label="Yoga class, 10:00–12:00" draggable="true" style="grid-row: 3 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 5 / span 3;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/calendar-item/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, acceptingOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-accepting">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-accepting-date"><label for="calendar-accepting-date-control" id="calendar-accepting-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-accepting-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-accepting-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-accepting-date-control-resolved" aria-expanded="false" aria-controls="calendar-accepting-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-accepting-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-accepting-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-accepting-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-accepting-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-accepting-scope">Hall</label><div data-kit-region="select"><select id="calendar-accepting-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-accepting-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-accepting-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-accepting-room">Room</label><div data-kit-region="select"><select id="calendar-accepting-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-accepting-view-form-group"><fieldset><legend id="calendar-accepting-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-accepting-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-accepting-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-accepting-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-accepting-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 4; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="moving" href="../../record/calendar-item/" aria-label="Yoga class, 10:00–12:00" draggable="true" style="grid-row: 3 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
</div>
<div data-kit-region="column">
<div data-kit-region="drop-target" data-kit-state="accepting" style="grid-row: 3 / span 2;"><div data-kit-region="block" aria-hidden="true"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></div></div>
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 5 / span 3;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/calendar-item/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, refusedOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-refused">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-17"><span>14 – </span><wbr><span>17 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-refused-date"><label for="calendar-refused-date-control" id="calendar-refused-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-refused-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-refused-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-refused-date-control-resolved" aria-expanded="false" aria-controls="calendar-refused-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-refused-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-refused-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-refused-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-refused-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-refused-scope">Hall</label><div data-kit-region="select"><select id="calendar-refused-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-refused-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-refused-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-refused-room">Room</label><div data-kit-region="select"><select id="calendar-refused-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-refused-view-form-group"><fieldset><legend id="calendar-refused-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-refused-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-refused-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-refused-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-refused-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 4; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Board meeting, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
<div data-kit-region="drop-target" data-kit-state="refused" style="grid-row: 8 / span 2;"><div data-kit-region="block" aria-hidden="true"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T15:00+01:00">15:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T15:00+01:00"><span>15:00–</span><wbr><span>17:00</span></time><span data-kit-region="kind"> · Booking</span></span></div><p data-kit-region="reason" data-kit-side="trailing">Oakmere Hall is kept for the lunch club then</p></div>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-state="moving" href="../../record/calendar-item/" aria-label="Yoga class, 10:00–12:00" draggable="true" style="grid-row: 3 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Parish council, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Parish council</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Meeting</span></span></a>
<div data-kit-region="drop-target" data-kit-state="refused" style="grid-row: 6 / span 1;"><div data-kit-region="block" aria-hidden="true"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span data-kit-region="kind"> · Booking</span></span></div><p data-kit-region="reason" data-kit-side="below">Oakmere Hall is closed for floor cleaning then</p></div>
</div>
<div data-kit-region="column">
<div data-kit-region="drop-target" data-kit-state="refused" style="grid-row: 3 / span 2;"><div data-kit-region="block" aria-hidden="true"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></div><p data-kit-region="reason" data-kit-side="leading">Oakmere Hall closes at <time datetime="10:00">10:00</time> on Thursdays</p></div>
<a data-kit-region="block" href="../../record/" aria-label="Wedding reception, 12:00–15:00" style="grid-row: 5 / span 3;"><span data-kit-region="name">Wedding reception</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/calendar-item/"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Parish council<span data-kit-region="supporting">Meeting</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T12:00+01:00"><span>12:00–</span><wbr><span>15:00</span></time><span>Wedding reception<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Open the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-13/2025-04-19"><span>April 13 – </span><wbr><span>19, 2025</span></time></span><span>3 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-toolbar-form">CSS core</a></div>
</header>
<main data-kit-region="body" id="main">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-13/2025-04-19"><span>April 13 – </span><wbr><span>19, 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<form><div data-kit-region="date"><div data-kit-role="form-group" id="calendar-toolbar-form-date"><label for="calendar-toolbar-form-date-control" id="calendar-toolbar-form-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-toolbar-form-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"sun","locale":"en","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-toolbar-form-date-control" type="text" autocomplete="off" value="Monday, April 14, 2025" aria-describedby="calendar-toolbar-form-date-control-resolved" aria-expanded="false" aria-controls="calendar-toolbar-form-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, January 22, 2025
Thursday, January 23, 2025
Friday, January 24, 2025
Saturday, January 25, 2025
Sunday, January 26, 2025
Monday, January 27, 2025
Tuesday, January 28, 2025
Saturday, February 22, 2025
Sunday, February 23, 2025
Monday, February 24, 2025
Tuesday, February 25, 2025
Wednesday, February 26, 2025
Thursday, February 27, 2025
Friday, February 28, 2025
Saturday, March 22, 2025
Sunday, March 23, 2025
Monday, March 24, 2025
Tuesday, March 25, 2025
Wednesday, March 26, 2025
Thursday, March 27, 2025
Friday, March 28, 2025
Tuesday, April 22, 2025
Wednesday, April 23, 2025
Thursday, April 24, 2025
Friday, April 25, 2025
Saturday, April 26, 2025
Sunday, April 27, 2025
Monday, April 28, 2025
Thursday, May 22, 2025
Friday, May 23, 2025
Saturday, May 24, 2025
Sunday, May 25, 2025
Monday, May 26, 2025
Tuesday, May 27, 2025
Wednesday, May 28, 2025
Sunday, June 22, 2025
Monday, June 23, 2025
Tuesday, June 24, 2025
Wednesday, June 25, 2025
Thursday, June 26, 2025
Friday, June 27, 2025
Saturday, June 28, 2025
Tuesday, July 22, 2025
Wednesday, July 23, 2025
Thursday, July 24, 2025
Friday, July 25, 2025
Saturday, July 26, 2025
Sunday, July 27, 2025
Monday, July 28, 2025
Friday, August 22, 2025
Saturday, August 23, 2025
Sunday, August 24, 2025
Monday, August 25, 2025
Tuesday, August 26, 2025
Wednesday, August 27, 2025
Thursday, August 28, 2025
Monday, September 22, 2025
Tuesday, September 23, 2025
Wednesday, September 24, 2025
Thursday, September 25, 2025
Friday, September 26, 2025
Saturday, September 27, 2025
Sunday, September 28, 2025
Wednesday, October 22, 2025
Thursday, October 23, 2025
Friday, October 24, 2025
Saturday, October 25, 2025
Sunday, October 26, 2025
Monday, October 27, 2025
Tuesday, October 28, 2025
Saturday, November 22, 2025
Sunday, November 23, 2025
Monday, November 24, 2025
Tuesday, November 25, 2025
Wednesday, November 26, 2025
Thursday, November 27, 2025
Friday, November 28, 2025
Monday, December 22, 2025
Tuesday, December 23, 2025
Wednesday, December 24, 2025
Thursday, December 25, 2025
Friday, December 26, 2025
Saturday, December 27, 2025
Sunday, December 28, 2025</span><span id="calendar-toolbar-form-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-toolbar-form-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-toolbar-form-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-toolbar-form-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></form>
</div>
<form>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-toolbar-form-scope">Hall</label><div data-kit-region="select"><select id="calendar-toolbar-form-scope" name="hall"><option value="all">All halls</option><option value="oakmere" selected>Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-toolbar-form-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-toolbar-form-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-toolbar-form-room">Room</label><div data-kit-region="select"><select id="calendar-toolbar-form-room" name="room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
</form>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-toolbar-form-view"><fieldset><legend id="calendar-toolbar-form-view-label">View</legend><div data-kit-role="segmented-control" id="calendar-toolbar-form-view-control"><label data-kit-region="segment"><input type="radio" name="view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-13">Apr 13</time></span></div>
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">Apr 14</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">Apr 15</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">Apr 16</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">Apr 17</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">Apr 18</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">Apr 19</time></span></div></div>
<div data-kit-region="time-grid"><aside aria-label="Times" data-kit-region="time-gutter"><div data-kit-region="hours"><time datetime="09:00">9:00 AM</time><time datetime="10:00">10:00 AM</time><time datetime="11:00">11:00 AM</time><time datetime="12:00">12:00 PM</time><time datetime="13:00">1:00 PM</time></div></aside>
<div data-kit-region="column"></div>
<div data-kit-region="column"><a href="../../record/" aria-label="Hall hire, 9:00–11:00 AM" data-kit-region="block" style="grid-row: 1 / span 2;"><span data-kit-region="name">Hall hire</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">9:00 AM</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>9:00 – </span><wbr><span>11:00 AM</span></time><span data-kit-region="kind"> · Booking</span></span></a></div>
<div data-kit-region="column"><a href="../../record/" aria-label="Yoga class, 11:00 AM–12:00 PM" data-kit-region="block" style="grid-row: 3 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T11:00+01:00">11:00 AM</time></span><span data-kit-region="line"><time datetime="2025-04-15T11:00+01:00"><span>11:00 AM – </span><wbr><span>12:00 PM</span></time><span data-kit-region="kind"> · Booking</span></span></a></div>
<div data-kit-region="column"><a href="../../record/" aria-label="Committee meeting, 1:00–2:00 PM" data-kit-region="block" style="grid-row: 5 / span 1;"><span data-kit-region="name">Committee meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T13:00+01:00">1:00 PM</time></span><span data-kit-region="line"><time datetime="2025-04-16T13:00+01:00"><span>1:00 – </span><wbr><span>2:00 PM</span></time><span data-kit-region="kind"> · Booking</span></span></a></div>
<div data-kit-region="column"></div>
<div data-kit-region="column"></div>
<div data-kit-region="column"></div></div></div>
<div data-kit-region="days">
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-13">Apr 13</time></span></header><p>Nothing booked</p></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">Apr 14</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject"><time datetime="2025-04-14T09:00+01:00"><span>9:00 – </span><wbr><span>11:00 AM</span></time><span>Hall hire<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">Apr 15</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject"><time datetime="2025-04-15T11:00+01:00"><span>11:00 AM – </span><wbr><span>12:00 PM</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">Apr 16</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject"><time datetime="2025-04-16T13:00+01:00"><span>1:00 – </span><wbr><span>2:00 PM</span></time><span>Committee meeting<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">Apr 17</time></span></header><p>Nothing booked</p></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">Apr 18</time></span></header><p>Nothing booked</p></section>
<section data-kit-region="day"><header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">Apr 19</time></span></header><p>Nothing booked</p></section></div>
</div>
</main>
</div>
Calendar, at-placeOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time><span data-kit-region="zone">Eastern Time</span></span><span>4 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-at-place">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time><span data-kit-region="zone">Eastern Time</span></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-at-place-date"><label for="calendar-at-place-date-control" id="calendar-at-place-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-at-place-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-at-place-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-at-place-date-control-resolved" aria-expanded="false" aria-controls="calendar-at-place-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-at-place-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-at-place-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-at-place-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-at-place-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-at-place-scope">Studio</label><div data-kit-region="select"><select id="calendar-at-place-scope"><option value="all">All studios</option><option value="riverside">Riverside Studio</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-at-place-view-form-group"><fieldset><legend id="calendar-at-place-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-at-place-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-at-place-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-at-place-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-at-place-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 7; --kit-calendar-hours: 10;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="08:00">08:00</time>
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
<time datetime="15:00">15:00</time>
<time datetime="16:00">16:00</time>
<time datetime="17:00">17:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 09:00–10:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00-04:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00-04:00"><span>09:00–</span><wbr><span>10:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Pilates, 11:00–12:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Pilates</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T11:00-04:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T11:00-04:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Supplier call, 15:00–16:00 UK Time" style="grid-row: 3 / span 1;"><span data-kit-region="name">Supplier call</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T15:00+01:00"><span>15:00</span><wbr><span data-kit-region="zone">UK Time</span></time></span><span data-kit-region="line"><time datetime="2025-04-17T15:00+01:00"><span>15:00–</span><wbr><span>16:00</span><wbr><span data-kit-region="zone">UK Time</span></time><span data-kit-region="kind"> · Call</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Dance rehearsal, 15:00–16:00" style="grid-row: 8 / span 1;"><span data-kit-region="name">Dance rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-19T15:00-04:00">15:00</time></span><span data-kit-region="line"><time datetime="2025-04-19T15:00-04:00"><span>15:00–</span><wbr><span>16:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00-04:00"><span>09:00–</span><wbr><span>10:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T11:00-04:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Pilates<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T15:00+01:00"><span>15:00–</span><wbr><span>16:00</span><wbr><span data-kit-region="zone">UK Time</span></time><span>Supplier call<span data-kit-region="supporting">Call</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sat</strong><br /><time datetime="2025-04-19">19 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-19T15:00-04:00"><span>15:00–</span><wbr><span>16:00</span></time><span>Dance rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Sun</strong><br /><time datetime="2025-04-20">20 Apr</time></span></header>
<p>Nothing booked</p>
</section>
</div>
</div>
</main>
</div>
Calendar, steppingOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-21/2025-04-25"><span>21 – </span><wbr><span>25 April 2025</span></time></span><span>2 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-stepping">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-21/2025-04-25"><span>21 – </span><wbr><span>25 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="../stepped/" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-stepping-date"><label for="calendar-stepping-date-control" id="calendar-stepping-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-stepping-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-stepping-date-control" type="text" autocomplete="off" value="Monday, 21 April 2025" aria-describedby="calendar-stepping-date-control-resolved" aria-expanded="false" aria-controls="calendar-stepping-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-stepping-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-stepping-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-stepping-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-21"><div id="calendar-stepping-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-stepping-scope">Hall</label><div data-kit-region="select"><select id="calendar-stepping-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-stepping-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-stepping-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-stepping-room">Room</label><div data-kit-region="select"><select id="calendar-stepping-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-stepping-view-form-group"><fieldset><legend id="calendar-stepping-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-stepping-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-stepping-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-stepping-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-stepping-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 5; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-24">24 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-25">25 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-22T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-22T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Choir rehearsal, 12:00–13:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-24T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-04-24T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-22T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-24">24 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-24T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-25">25 Apr</time></span></header>
<p>Nothing booked</p>
</section>
</div>
</div>
</main>
</div>
Calendar, steppedOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-28/2025-05-02"><span>28 April – </span><wbr><span>2 May 2025</span></time></span><span>2 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-stepped">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-28/2025-05-02"><span>28 April – </span><wbr><span>2 May 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="../stepping/" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-stepped-date"><label for="calendar-stepped-date-control" id="calendar-stepped-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-stepped-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-stepped-date-control" type="text" autocomplete="off" value="Monday, 28 April 2025" aria-describedby="calendar-stepped-date-control-resolved" aria-expanded="false" aria-controls="calendar-stepped-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-stepped-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-stepped-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-stepped-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-28"><div id="calendar-stepped-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-stepped-scope">Hall</label><div data-kit-region="select"><select id="calendar-stepped-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-stepped-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-stepped-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-stepped-room">Room</label><div data-kit-region="select"><select id="calendar-stepped-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-stepped-view-form-group"><fieldset><legend id="calendar-stepped-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-stepped-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-stepped-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-stepped-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-stepped-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 5; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-28">28 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-29">29 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-30">30 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-05-01">1 May</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-05-02">2 May</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Yoga class, 10:00–11:00" style="grid-row: 2 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-29T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-29T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Choir rehearsal, 12:00–13:00" style="grid-row: 4 / span 1;"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-05-01T12:00+01:00">12:00</time></span><span data-kit-region="line"><time datetime="2025-05-01T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span data-kit-region="kind"> · Booking</span></span></a>
</div>
<div data-kit-region="column"></div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-28">28 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-29">29 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-29T10:00+01:00"><span>10:00–</span><wbr><span>11:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-30">30 Apr</time></span></header>
<p>Nothing booked</p>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-05-01">1 May</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-05-01T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-05-02">2 May</time></span></header>
<p>Nothing booked</p>
</section>
</div>
</div>
</main>
</div>
Calendar, saved-behindOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></span><span>5 bookings</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-saved-behind">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-18"><span>14 – </span><wbr><span>18 April 2025</span></time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-saved-behind-date"><label for="calendar-saved-behind-date-control" id="calendar-saved-behind-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-saved-behind-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-saved-behind-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-saved-behind-date-control-resolved" aria-expanded="false" aria-controls="calendar-saved-behind-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-saved-behind-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-saved-behind-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-saved-behind-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-saved-behind-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-saved-behind-scope">Hall</label><div data-kit-region="select"><select id="calendar-saved-behind-scope"><option value="all">All halls</option><option value="oakmere">Oakmere Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-saved-behind-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-saved-behind-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-saved-behind-room">Room</label><div data-kit-region="select"><select id="calendar-saved-behind-room"><option value="all">All rooms</option><option value="main-hall">Main Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-saved-behind-view-form-group"><fieldset><legend id="calendar-saved-behind-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-saved-behind-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-saved-behind-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-saved-behind-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-saved-behind-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<button data-kit-role="primary-action" type="button"><span data-kit-region="label">New booking</span></button>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 5; --kit-calendar-hours: 5;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></div>
</div>
<div data-kit-region="bands">
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 1; --kit-calendar-band-last: 1; --kit-calendar-band-stack: 1;"><span data-kit-region="name">Spring fair</span><span data-kit-region="standing" data-kit-state="failed"><span role="alert">The spring fair was not moved: the connection dropped before it saved.</span></span></a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 2; --kit-calendar-band-last: 2; --kit-calendar-band-stack: 1;"><span data-kit-region="name">Open day</span><span data-kit-region="standing" data-kit-state="conflict"><span role="alert">Maya Patel moved the open day to Tuesday while you were moving it to Wednesday.</span></span></a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 3; --kit-calendar-band-last: 3; --kit-calendar-band-stack: 1;"><span data-kit-region="name">Craft market</span><span data-kit-region="standing" data-kit-state="processing"><span role="status">Moving the craft market…</span></span></a>
<a data-kit-region="band" href="../../record/" style="--kit-calendar-band-first: 4; --kit-calendar-band-last: 4; --kit-calendar-band-stack: 1;"><span data-kit-region="name">Staff training day</span><span data-kit-region="standing" data-kit-state="unsaved"><span role="status">The training day will move when you are back online.</span></span></a>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
</div>
</aside>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-holds="standing" href="../../record/" aria-label="Board meeting, 09:00–09:30, This meeting was not moved" style="grid-row: 1 / span 1; --kit-calendar-block-size: calc(var(--kit-hour-height) / 2);"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>09:30</span></time><span data-kit-region="kind"> · Meeting</span><span data-kit-region="separator"> · </span><span data-kit-region="standing" data-kit-state="failed"><span role="alert">This meeting was not moved: the connection dropped before it saved.</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-holds="standing" href="../../record/" aria-label="Yoga class, 11:00–12:00, Maya Patel moved this booking" style="grid-row: 3 / span 1;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standing" data-kit-state="conflict"><span role="alert">Maya Patel moved this booking to 11:00 while you were moving it to 10:00.</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-holds="standing" href="../../record/" aria-label="Choir rehearsal, 10:00–11:30, Moving this booking" style="grid-row: 2 / span 2; --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Choir rehearsal</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-16T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-16T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standing" data-kit-state="processing"><span role="status">Moving this booking…</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-holds="standing" href="../../record/" aria-label="Toddler group, 09:30–11:00, This booking will move when you are back online" style="grid-row: 1 / span 2; --kit-calendar-block-offset: calc(var(--kit-hour-height) / 2); --kit-calendar-block-size: calc(var(--kit-hour-height) * 1.5);"><span data-kit-region="name">Toddler group</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-17T09:30+01:00">09:30</time></span><span data-kit-region="line"><time datetime="2025-04-17T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standing" data-kit-state="unsaved"><span role="status">This booking will move when you are back online.</span></span></span></a>
</div>
<div data-kit-region="column">
<a data-kit-region="block" data-kit-holds="standing" data-kit-state="uncovered" href="../../record/" aria-label="Hall handover, 13:00–14:00, Cover needed, This booking was not moved" style="grid-row: 5 / span 1;"><span data-kit-region="name">Hall handover</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-18T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-18T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span data-kit-region="kind"> · Booking</span><span data-kit-region="separator"> · </span><span data-kit-region="standings"><span>Cover needed</span></span><span data-kit-region="standing" data-kit-state="failed"><span role="alert">This booking was not moved: the Main Hall is booked then.</span></span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Spring fair</a></div></div><div data-kit-region="standing" data-kit-state="failed"><p role="alert">The spring fair was not moved: the connection dropped before it saved.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>09:30</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></a></div></div><div data-kit-region="standing" data-kit-state="failed"><p role="alert">This meeting was not moved: the connection dropped before it saved.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Open day</a></div></div><div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel moved the open day to Tuesday while you were moving it to Wednesday.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move it to Wednesday</span></button></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-15T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></a></div></div><div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel moved this booking to 11:00 while you were moving it to 10:00.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move it to 10:00</span></button></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-16">16 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Craft market</a></div></div><div data-kit-region="standing" data-kit-state="processing"><p role="status">Moving the craft market…</p></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-16T10:00+01:00"><span>10:00–</span><wbr><span>11:30</span></time><span>Choir rehearsal<span data-kit-region="supporting">Booking</span></span></a></div></div><div data-kit-region="standing" data-kit-state="processing"><p role="status">Moving this booking…</p></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Thu</strong><br /><time datetime="2025-04-17">17 Apr</time></span></header>
<div data-kit-region="band"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Staff training day</a></div></div><div data-kit-region="standing" data-kit-state="unsaved"><p role="status">The training day will move when you are back online.</p></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></a></div></div><div data-kit-region="standing" data-kit-state="unsaved"><p role="status">This booking will move when you are back online.</p></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Fri</strong><br /><time datetime="2025-04-18">18 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="uncovered"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-18T13:00+01:00"><span>13:00–</span><wbr><span>14:00</span></time><span>Hall handover<span data-kit-region="supporting">Booking · Cover needed</span></span></a></div></div><div data-kit-region="standing" data-kit-state="failed"><p role="alert">This booking was not moved: the Main Hall is booked then.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, kindsOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></span><span>2 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-kinds">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Studio calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button>
<a data-kit-role="icon-action" data-kit-region="previous" href="?day=previous" rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?day=next" rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-kinds-date"><label for="calendar-kinds-date-control" id="calendar-kinds-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-kinds-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-kinds-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-kinds-date-control-resolved" aria-expanded="false" aria-controls="calendar-kinds-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-kinds-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-kinds-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-kinds-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-kinds-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-kinds-scope">Studio</label><div data-kit-region="select"><select id="calendar-kinds-scope"><option value="one">Studio one</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-kinds-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-calendar-kinds-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-kinds-kind">Kind</label><div data-kit-region="select"><select id="calendar-kinds-kind"><option value="all">All kinds</option><option value="class">Classes</option><option value="private-lesson">Private lessons</option><option value="rental">Rentals</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-kinds-view-form-group"><fieldset><legend id="calendar-kinds-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-kinds-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-kinds-view" value="day" checked><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-kinds-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-kinds-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions">
<div id="calendar-kinds-new" data-kit-role="split-action"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">New class</span></button><button aria-controls="calendar-kinds-new-layer" aria-haspopup="menu" aria-label="Other kinds" data-kit-role="icon-action" id="calendar-kinds-new-trigger" type="button">
<svg data-kit-icon="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg>
</button><ul data-kit-role="popover" id="calendar-kinds-new-layer" popover="manual" role="menu" aria-labelledby="calendar-kinds-new-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="calendar-kinds-new-layer/0-0" role="menuitem"><span data-kit-region="name">New private lesson</span></button></li><li role="none"><button type="button" data-kit-region="item" id="calendar-kinds-new-layer/0-1" role="menuitem"><span data-kit-region="name">New rental</span></button></li></ul></li></ul></div>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 1; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(3.5 * var(--kit-hour-height));"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Beginners ballet, 09:00–11:00" style="grid-row: 1 / span 2;"><span data-kit-region="name">Beginners ballet</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Class</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Studio hire, 13:00–15:00" style="grid-row: 5 / span 2;"><span data-kit-region="name">Studio hire</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Rental</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Beginners ballet<span data-kit-region="supporting">Class</span></span></a></div></div></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Studio hire<span data-kit-region="supporting">Rental</span></span></a></div></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
Calendar, kinds-inertOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></span><span>2 items</span></p></div>
<div data-kit-region="actions"><a href="../../layout-calendar/#layout-calendar-kinds-inert">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Studio calendar controls">
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong>
<button type="button" data-kit-role="secondary-action" data-kit-region="today" data-kit-state="inert" disabled id="calendar-kinds-inert-today" aria-describedby="calendar-kinds-inert-today-words"><span data-kit-region="label">Today</span></button><p data-kit-region="words" id="calendar-kinds-inert-today-words">Today is outside this term.</p>
<button type="button" data-kit-role="icon-action" data-kit-region="previous" data-kit-state="inert" disabled rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button>
<button type="button" data-kit-role="icon-action" data-kit-region="next" data-kit-state="inert" disabled rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button>
<div data-kit-region="date"><div data-kit-role="form-group" id="calendar-kinds-inert-date"><label for="calendar-kinds-inert-date-control" id="calendar-kinds-inert-date-label">Go to a date</label><div data-kit-role="date-field" id="calendar-kinds-inert-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="calendar-kinds-inert-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="calendar-kinds-inert-date-control-resolved" aria-expanded="false" aria-controls="calendar-kinds-inert-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="calendar-kinds-inert-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="calendar-kinds-inert-date-control-calendar" aria-label="Calendar" aria-describedby="calendar-kinds-inert-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="calendar-kinds-inert-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div>
</div>
<div data-kit-region="scope">
<div data-kit-role="form-group"><label for="calendar-kinds-inert-scope">Studio</label><div data-kit-region="select"><select id="calendar-kinds-inert-scope"><option value="one">Studio one</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-calendar-kinds-inert-filters" data-kit-state="inert" disabled id="calendar-kinds-inert-filters-control" aria-describedby="calendar-kinds-inert-filters-control-words"><span data-kit-region="label">Filters</span></button><p data-kit-region="words" id="calendar-kinds-inert-filters-control-words">Filters wait until the studios are set.</p>
<div data-kit-region="filters" id="kit-calendar-kinds-inert-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="calendar-kinds-inert-kind">Kind</label><div data-kit-region="select"><select id="calendar-kinds-inert-kind"><option value="all">All kinds</option><option value="class">Classes</option><option value="private-lesson">Private lessons</option><option value="rental">Rentals</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="view">
<div data-kit-role="form-group" id="calendar-kinds-inert-view-form-group"><fieldset><legend id="calendar-kinds-inert-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="calendar-kinds-inert-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="calendar-kinds-inert-view" value="day" checked><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="calendar-kinds-inert-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="calendar-kinds-inert-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div>
</div>
<div data-kit-region="actions" data-kit-holds="words">
<div id="calendar-kinds-inert-new" data-kit-role="split-action"><button aria-describedby="calendar-kinds-inert-new-main-words" data-kit-role="primary-action" data-kit-state="inert" disabled id="calendar-kinds-inert-new-main" type="button"><span data-kit-region="label">New class</span></button><button aria-controls="calendar-kinds-inert-new-layer" aria-describedby="calendar-kinds-inert-new-main-words" aria-haspopup="menu" aria-label="Other kinds" data-kit-role="icon-action" data-kit-state="inert" disabled id="calendar-kinds-inert-new-trigger" type="button">
<svg data-kit-icon="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg>
</button><ul data-kit-role="popover" id="calendar-kinds-inert-new-layer" popover="manual" role="menu" aria-labelledby="calendar-kinds-inert-new-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="calendar-kinds-inert-new-layer/0-0" role="menuitem"><span data-kit-region="name">New private lesson</span></button></li><li role="none"><button type="button" data-kit-region="item" id="calendar-kinds-inert-new-layer/0-1" role="menuitem"><span data-kit-region="name">New rental</span></button></li></ul></li></ul></div>
<p data-kit-region="words" id="calendar-kinds-inert-new-main-words">Adding waits until this term's rooms are set.</p>
</div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 1; --kit-calendar-hours: 6;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
<time datetime="13:00">13:00</time>
<time datetime="14:00">14:00</time>
</div>
</aside>
<div data-kit-region="current-time" style="--kit-calendar-now-offset: calc(3.5 * var(--kit-hour-height));"></div>
<div data-kit-region="column">
<a data-kit-region="block" href="../../record/" aria-label="Beginners ballet, 09:00–11:00" style="grid-row: 1 / span 2;"><span data-kit-region="name">Beginners ballet</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Class</span></span></a>
<a data-kit-region="block" href="../../record/" aria-label="Studio hire, 13:00–15:00" style="grid-row: 5 / span 2;"><span data-kit-region="name">Studio hire</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T13:00+01:00">13:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span data-kit-region="kind"> · Rental</span></span></a>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Beginners ballet<span data-kit-region="supporting">Class</span></span></a></div></div></div><div data-kit-region="actions" data-kit-holds="words"><button type="button" data-kit-role="subtle-action" data-kit-state="inert" disabled id="calendar-kinds-inert-open" aria-describedby="calendar-kinds-inert-open-words"><span data-kit-region="label">Open this class</span></button><p data-kit-region="words" id="calendar-kinds-inert-open-words">Open this class once you are back online.</p></div></div></article></div>
<div data-kit-region="item"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-14T13:00+01:00"><span>13:00–</span><wbr><span>15:00</span></time><span>Studio hire<span data-kit-region="supporting">Rental</span></span></a></div></div><div data-kit-region="standing" data-kit-state="failed"><p role="alert">This rental was not reinstated: the connection dropped before it saved.</p><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="calendar-kinds-inert-try-again" aria-describedby="calendar-kinds-inert-try-again-words"><span data-kit-region="label">Try again</span></button><p data-kit-region="words" id="calendar-kinds-inert-try-again-words">Try again once you are back online.</p></div></div></div></article></div>
</section>
</div>
</div>
</main>
</div>
|