Content
Calendar
Show a calendar of dates or events.
Live demo
See it in action
October 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="calendar cal-572d5f8f fw-cal fw-cal--design-classic design-classic" data-events="[{"title":"Team standup","start":"2026-09-04","end":"2026-09-04","time":"9:00 AM","allDay":false,"url":"","color":"blue"},{"title":"Product launch","start":"2026-09-12","end":"2026-09-12","time":"2:00 PM","allDay":false,"url":"#","color":"green"},{"title":"Conference","start":"2026-09-14","end":"2026-09-16","time":"","allDay":true,"url":"","color":"purple"},{"title":"Design review","start":"2026-09-19","end":"2026-09-19","time":"11:00 AM","allDay":false,"url":"","color":"amber"},{"title":"Release 2.0","start":"2026-09-26","end":"2026-09-26","time":"","allDay":true,"url":"","color":"red"},{"title":"Webinar","start":"2026-09-26","end":"2026-09-26","time":"4:00 PM","allDay":false,"url":"#","color":"teal"}]" data-first-week="mon" data-year="2026" data-month="9" data-today="2026-09-10" data-wd="["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]" data-mo="["January","February","March","April","May","June","July","August","September","October","November","December"]" data-more="more" data-event-label="Event">
<div class="fw-cal__head">
<h3 class="fw-cal__title" data-cal-title>September 2026</h3>
<div class="fw-cal__nav">
<button type="button" class="fw-cal__btn" data-cal-nav="prev" aria-label="Previous month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button type="button" class="fw-cal__btn fw-cal__btn--today" data-cal-nav="today">Today</button>
<button type="button" class="fw-cal__btn" data-cal-nav="next" aria-label="Next month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</div>
</div>
<div class="fw-cal__month" data-cal-month>
<div class="fw-cal__weekdays">
<div class="fw-cal__wd">
Mon
</div>
<div class="fw-cal__wd">
Tue
</div>
<div class="fw-cal__wd">
Wed
</div>
<div class="fw-cal__wd">
Thu
</div>
<div class="fw-cal__wd">
Fri
</div>
<div class="fw-cal__wd">
Sat
</div>
<div class="fw-cal__wd">
Sun
</div>
</div>
<div class="fw-cal__grid">
<div class="fw-cal__cell is-out" data-date="2026-08-31">
<span class="fw-cal__num">31</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-01">
<span class="fw-cal__num">1</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-02">
<span class="fw-cal__num">2</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-03">
<span class="fw-cal__num">3</span>
</div>
<div class="fw-cal__cell has-events" data-date="2026-09-04">
<span class="fw-cal__num">4</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--blue" title="9:00 AM · Team standup"><span class="fw-cal__ev-time">9:00 AM</span><span class="fw-cal__ev-title">Team standup</span></span>
</div>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-09-05">
<span class="fw-cal__num">5</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-09-06">
<span class="fw-cal__num">6</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-07">
<span class="fw-cal__num">7</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-08">
<span class="fw-cal__num">8</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-09">
<span class="fw-cal__num">9</span>
</div>
<div class="fw-cal__cell is-today" data-date="2026-09-10">
<span class="fw-cal__num">10</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-11">
<span class="fw-cal__num">11</span>
</div>
<div class="fw-cal__cell is-weekend has-events" data-date="2026-09-12">
<span class="fw-cal__num">12</span>
<div class="fw-cal__events">
<a href="#" class="fw-cal__ev fw-cal__ev--green" title="2:00 PM · Product launch"><span class="fw-cal__ev-time">2:00 PM</span><span class="fw-cal__ev-title">Product launch</span></a>
</div>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-09-13">
<span class="fw-cal__num">13</span>
</div>
<div class="fw-cal__cell has-events" data-date="2026-09-14">
<span class="fw-cal__num">14</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--purple" title="Conference"><span class="fw-cal__ev-title">Conference</span></span>
</div>
</div>
<div class="fw-cal__cell has-events" data-date="2026-09-15">
<span class="fw-cal__num">15</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--purple" title="Conference"><span class="fw-cal__ev-title">Conference</span></span>
</div>
</div>
<div class="fw-cal__cell has-events" data-date="2026-09-16">
<span class="fw-cal__num">16</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--purple" title="Conference"><span class="fw-cal__ev-title">Conference</span></span>
</div>
</div>
<div class="fw-cal__cell" data-date="2026-09-17">
<span class="fw-cal__num">17</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-18">
<span class="fw-cal__num">18</span>
</div>
<div class="fw-cal__cell is-weekend has-events" data-date="2026-09-19">
<span class="fw-cal__num">19</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--amber" title="11:00 AM · Design review"><span class="fw-cal__ev-time">11:00 AM</span><span class="fw-cal__ev-title">Design review</span></span>
</div>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-09-20">
<span class="fw-cal__num">20</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-21">
<span class="fw-cal__num">21</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-22">
<span class="fw-cal__num">22</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-23">
<span class="fw-cal__num">23</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-24">
<span class="fw-cal__num">24</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-25">
<span class="fw-cal__num">25</span>
</div>
<div class="fw-cal__cell is-weekend has-events" data-date="2026-09-26">
<span class="fw-cal__num">26</span>
<div class="fw-cal__events">
<span class="fw-cal__ev fw-cal__ev--red" title="Release 2.0"><span class="fw-cal__ev-title">Release 2.0</span></span>
<a href="#" class="fw-cal__ev fw-cal__ev--teal" title="4:00 PM · Webinar"><span class="fw-cal__ev-time">4:00 PM</span><span class="fw-cal__ev-title">Webinar</span></a>
</div>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-09-27">
<span class="fw-cal__num">27</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-28">
<span class="fw-cal__num">28</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-29">
<span class="fw-cal__num">29</span>
</div>
<div class="fw-cal__cell" data-date="2026-09-30">
<span class="fw-cal__num">30</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-01">
<span class="fw-cal__num">1</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-02">
<span class="fw-cal__num">2</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-10-03">
<span class="fw-cal__num">3</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-10-04">
<span class="fw-cal__num">4</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-05">
<span class="fw-cal__num">5</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-06">
<span class="fw-cal__num">6</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-07">
<span class="fw-cal__num">7</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-08">
<span class="fw-cal__num">8</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-10-09">
<span class="fw-cal__num">9</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-10-10">
<span class="fw-cal__num">10</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-10-11">
<span class="fw-cal__num">11</span>
</div>
</div>
</div>
<div class="fw-cal__list">
<h4 class="fw-cal__list-title">Upcoming</h4>
<ul>
<li class="fw-cal__li fw-cal__li--green"><span class="fw-cal__li-date"><span class="fw-cal__li-d">12</span><span class="fw-cal__li-m">Sep</span></span><span class="fw-cal__li-body"><a href="#" class="fw-cal__li-title">Product launch</a><span class="fw-cal__li-time">2:00 PM</span></span></li>
<li class="fw-cal__li fw-cal__li--purple"><span class="fw-cal__li-date"><span class="fw-cal__li-d">14</span><span class="fw-cal__li-m">Sep</span></span><span class="fw-cal__li-body"><span class="fw-cal__li-title">Conference</span></span></li>
<li class="fw-cal__li fw-cal__li--amber"><span class="fw-cal__li-date"><span class="fw-cal__li-d">19</span><span class="fw-cal__li-m">Sep</span></span><span class="fw-cal__li-body"><span class="fw-cal__li-title">Design review</span><span class="fw-cal__li-time">11:00 AM</span></span></li>
<li class="fw-cal__li fw-cal__li--red"><span class="fw-cal__li-date"><span class="fw-cal__li-d">26</span><span class="fw-cal__li-m">Sep</span></span><span class="fw-cal__li-body"><span class="fw-cal__li-title">Release 2.0</span></span></li>
<li class="fw-cal__li fw-cal__li--teal"><span class="fw-cal__li-date"><span class="fw-cal__li-d">26</span><span class="fw-cal__li-m">Sep</span></span><span class="fw-cal__li-body"><a href="#" class="fw-cal__li-title">Webinar</a><span class="fw-cal__li-time">4:00 PM</span></span></li>
</ul>
</div>
</div>
</section>To learn more about the Calendar shortcode, please check out the online manual here.