/* Fancy Calendar */

[Calendar]

Show events, classes, or availability on a clean month or week calendar inside Avada, without a separate events plugin.

  • yoursite.com/whats-on

November 2026

MonTueWedThuFriSatSun
26
27
28
29
30
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

Examples

A gym, a music venue, and a phone screen.

The view, colors, and popup behavior below all come from the element's own options.

  • yoursite.com/timetable

5 to 11 October

Week of October 5, 2026 to October 11, 2026

MonTueWedThuFriSatSun
6
7
9
11

Example 01

Studio timetable in week view

Seven day columns, with every class saved as its own entry. The visitor’s browser works out which column is today and highlights it.

  • thefoundry.com/listings

October 2026

MonTueWedThuFriSatSun
28
29
30
1
2
3
4
6
7
9
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

Example 02

Venue listings with a darker style

Dark header, blue event marks, and square arrows with their own hover color. A visitor clicked the 20th, so its popup stays pinned open. A fixed start date makes the calendar open in November.

9:41 yoursite.com

November 2026

MonTueWedThuFriSatSun
26
27
28
29
30
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

Example 03

Month view on a phone

Cells shrink to a date and a row of dots. Tapping a day pins its details below the grid, so nothing relies on hover.

[ Popup: click to pin ] [ Range: 1 year ]

See it working on a real Avada site.

What you can build

Calendars people check before they show up.

Week of October 5, 2026 to October 11, 2026

MonTueWedThuFriSatSun
6
7
9
11

Class schedules

Post the weekly timetable for a gym, dance studio, or school so members know what runs when. Each entry can carry the instructor, room, or level in its details.

October 2026

MonTueWedThuFriSatSun
28
29
30
1
2
3
4
6
7
9
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

Venue and community listings

Mark gigs, markets, and meetups on a month grid visitors can scan in seconds. Hovering a marked day shows what is on without opening another page.

October 2026

MonTueWedThuFriSatSun
28
29
30
1
2
3
4
6
7
9
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

Webinar and launch dates

Give a product launch or a webinar series its own calendar on a landing page. A fixed start date opens the grid on the launch month instead of the current one.

Features

What the calendar does.

Month and week views

Show a full month grid or a seven-day week, whichever suits the schedule.

Individual entries

Each event is its own entry with a date, a title, and details.

Marked event days

Days with entries are marked on the grid so busy dates stand out.

Popups with click to pin

Details open on hover, and a click can pin the popup open for touch screens.

Today, set by the browser

The current day is worked out on the visitor’s device, so cached pages stay correct.

Navigation range limit

Cap previous and next browsing at 1 to 5 years so nobody lands in empty months.

Fixed start date

Open the calendar on a month you choose instead of the current one.

Cells, headers, and popups

Style day cells, weekday headers, and popups separately, each with its own typography.

Styled arrows

Give the previous and next arrows their own colors, including a hover color.

Works the Avada way

Set up in the builder you already use.

Entries live inside the element itself, and its styling follows your theme settings.

[ ]

Avada Builder

Find it under Fancy Elements and drop it into any column.

[ ]

Global colors and typography

Day cells, headers, and popups can draw on your Avada global palette and fonts.

[ ]

Avada Live

Add entries and adjust the grid while looking at the actual page.

[ ]

Live option updates

Each change to an option appears in the builder preview straight away.

FAQ

Calendar questions

Do I need a separate events plugin?

No. You add each event inside the element as its own entry with a date, title, and details. There is no extra plugin or post type to manage.

Yes. Turn on click to pin, and visitors tap a marked day to open its popup and keep it open while they read.

No. The current date is calculated in the visitor’s browser, so a cached copy of the page still highlights the right day.

Yes. Set a navigation range from 1 up to 5 years, and the previous and next arrows stop at that limit.

Yes. Color options can use your Avada global colors, and day cells, weekday headers, and popups each have their own typography settings.

Related elements

Fancy Timeline

Dated steps in a clear sequence

Lay out a company history or project plan vertically or horizontally, with icons, images, or dots.

View element →

Fancy Location Lister

Branch cards with opening hours

Give each location a card with its hours, an Open or Closed badge, and a WhatsApp link.

View element →

Fancy Notice Flasher

Small notices in the corner

Rotate your announcements, real store purchases, or reviews in a toast at the edge of the page.

View element →