Develop

Styles

The calendar view should use button semantics for days, with grid semantics for keyboard navigation and announcements.

<div class="tng-calendar">
  <div class="tng-calendar-header">
    <button class="tng-icon-button is-ghost">
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <h2 class="tng-text-body">March 2026</h2>
    <button class="tng-icon-button is-ghost">
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
  <div class="tng-calendar-weekdays">
    <div>Mon</div>
    <div>Tue</div>
    <div>Wed</div>
    <div>Thu</div>
    <div>Fri</div>
    <div>Sat</div>
    <div>Sun</div>
  </div>
  <div class="tng-calendar-week">
    <button disabled>23</button>
    <button disabled>24</button>
    <button disabled>25</button>
    <button disabled>26</button>
    <button disabled>27</button>
    <button disabled>28</button>
    <button>1</button>
  </div>
  <div class="tng-calendar-week">
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
  </div>
  <div class="tng-calendar-week">
    <button>9</button>
    <button>10</button>
    <button class="is-selected">11</button>
    <button>12</button>
    <button>13</button>
    <button>14</button>
    <button>15</button>
  </div>
  <div class="tng-calendar-week">
    <button>16</button>
    <button>17</button>
    <button>18</button>
    <button>19</button>
    <button>20</button>
    <button>21</button>
    <button>22</button>
  </div>
  <div class="tng-calendar-week">
    <button>23</button>
    <button>24</button>
    <button>25</button>
    <button class="is-today">26</button>
    <button>27</button>
    <button>28</button>
    <button>29</button>
  </div>
  <div class="tng-calendar-week">
    <button>30</button>
    <button>31</button>
    <button disabled>1</button>
    <button disabled>2</button>
    <button disabled>3</button>
    <button disabled>4</button>
    <button disabled>5</button>
  </div>
</div>

March 2026

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Recipe

Choose a date

DD/MM/YYYY

source code