Content
Calendar
Show a calendar of dates or events.
Live demo
See it in action
September 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
31
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
1
2
3
4
5
6
7
8
9
10
11
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>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="calendar cal-ed9ab43c fw-cal fw-cal--design-classic design-classic" data-events="[{"title":"Team standup","start":"2026-06-04","end":"2026-06-04","time":"9:00 AM","allDay":false,"url":"","color":"blue"},{"title":"Product launch","start":"2026-06-12","end":"2026-06-12","time":"2:00 PM","allDay":false,"url":"#","color":"green"},{"title":"Conference","start":"2026-06-14","end":"2026-06-16","time":"","allDay":true,"url":"","color":"purple"},{"title":"Design review","start":"2026-06-19","end":"2026-06-19","time":"11:00 AM","allDay":false,"url":"","color":"amber"},{"title":"Release 2.0","start":"2026-06-26","end":"2026-06-26","time":"","allDay":true,"url":"","color":"red"},{"title":"Webinar","start":"2026-06-26","end":"2026-06-26","time":"4:00 PM","allDay":false,"url":"#","color":"teal"}]" data-first-week="mon" data-year="2026" data-month="8" data-today="2026-08-01" 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>August 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-07-27">
<span class="fw-cal__num">27</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-07-28">
<span class="fw-cal__num">28</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-07-29">
<span class="fw-cal__num">29</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-07-30">
<span class="fw-cal__num">30</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-07-31">
<span class="fw-cal__num">31</span>
</div>
<div class="fw-cal__cell is-today is-weekend" data-date="2026-08-01">
<span class="fw-cal__num">1</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-02">
<span class="fw-cal__num">2</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-03">
<span class="fw-cal__num">3</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-04">
<span class="fw-cal__num">4</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-05">
<span class="fw-cal__num">5</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-06">
<span class="fw-cal__num">6</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-07">
<span class="fw-cal__num">7</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-08">
<span class="fw-cal__num">8</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-09">
<span class="fw-cal__num">9</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-10">
<span class="fw-cal__num">10</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-11">
<span class="fw-cal__num">11</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-12">
<span class="fw-cal__num">12</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-13">
<span class="fw-cal__num">13</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-14">
<span class="fw-cal__num">14</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-15">
<span class="fw-cal__num">15</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-16">
<span class="fw-cal__num">16</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-17">
<span class="fw-cal__num">17</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-18">
<span class="fw-cal__num">18</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-19">
<span class="fw-cal__num">19</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-20">
<span class="fw-cal__num">20</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-21">
<span class="fw-cal__num">21</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-22">
<span class="fw-cal__num">22</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-23">
<span class="fw-cal__num">23</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-24">
<span class="fw-cal__num">24</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-25">
<span class="fw-cal__num">25</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-26">
<span class="fw-cal__num">26</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-27">
<span class="fw-cal__num">27</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-28">
<span class="fw-cal__num">28</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-29">
<span class="fw-cal__num">29</span>
</div>
<div class="fw-cal__cell is-weekend" data-date="2026-08-30">
<span class="fw-cal__num">30</span>
</div>
<div class="fw-cal__cell" data-date="2026-08-31">
<span class="fw-cal__num">31</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-09-01">
<span class="fw-cal__num">1</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-09-02">
<span class="fw-cal__num">2</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-09-03">
<span class="fw-cal__num">3</span>
</div>
<div class="fw-cal__cell is-out" data-date="2026-09-04">
<span class="fw-cal__num">4</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-09-05">
<span class="fw-cal__num">5</span>
</div>
<div class="fw-cal__cell is-out is-weekend" data-date="2026-09-06">
<span class="fw-cal__num">6</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Calendar shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.