How to Display a Full Calendar on Your Web Page.

🔹 Introduction #

Displaying a full calendar on your website enhances appointment visibility and scheduling efficiency. Whether you’re building an employee dashboard or a client-facing booking system, this setup lets you show upcoming events, appointments, and availability in a customizable format.

This guide walks you through how to display a full-featured calendar that supports:

• Custom views (Month, Week, Day, List)

• Filtered appointments per logged-in employee

• Color-coded events based on service types.

• Status tracking (Pending, Confirmed, Cancelled, etc.)

⚙️ Optional Settings You Can Customize. #

Setting	Description

location

predefined location, value {id number of location}, default value null

service

ID of predefined service. Default: null

worker

Use logged to show events only for the logged-in user. Default: null

views

Available views: month, basicWeek, basicDay, list

default_view

Default view when calendar loads. E.g., month

default_date

Initial date shown. Format: YYYY-MM-DD. Default: today

show_remaining_slots

Set "1" to show available slots. Default: "0"

show_week

Show week numbers. "0" = No, "1" = Yes. Default: "0"

day_names

Days of the week (e.g., Sunday to Saturday)

month_names

Full month names. E.g., January to December

button_labels

Labels: today,month,week,day,list

time_format

E.g., "h(:mm)t" (12hr) or "H:mm" (24hr)

color

Set "service" to color events by service type

display_event_end

Show end time beside start time: "0" = No, "1" = Yes. Default: "0"

You can add FullCalendar using various methods, as shown below:

• Using Shortcodes (Recommended method – works with all editors)

• On Gutenberg

Using Shortcodes #

• Kindly download the plugin from the link https://wordpress.org/plugins/easy-appointments/ and install Zip file on your end.

• Go to the post or page where you want to add the Fullview Calendar.

• Add the shortcode

Output

Using Gutenberg Block #

• Once installed the EA plugin , Go to the post or page where you want to add the Fullview Calendar and click on the blocks. Type their ‘Easy appointment’ and it will appear.

• You can Drag and Drop on the place inside post/page.

• You can make changes according to your choice.

Output

This way you can add FullView Calendar on your end.

✅ Best Practices for Displaying the FullView Calendar. #

Implementing a calendar on your website is not just about adding functionality, it’s about enhancing user experience, ensuring accuracy, and maintaining performance. Below are the best practices you should follow to get the most out of your Full Calendar integration:

🔐 Restrict Views Based on User Role

• Use the setting worker: "logged" to ensure each employee sees only their own appointments.

• For admin-level users (those with the manage_options capability), enable access to view all appointments.

• This ensures privacy, avoids confusion, and keeps the interface clean for each user.

🎨 Use Color Coding for Better Visual Clarity

• Set color: "service" so that each service type appears in a different color.

• This helps employees or clients instantly identify the type of appointment without needing to click.

📅 Keep Views Simple & Relevant

• Limit views to month, week, and optionally list to prevent interface overload.

• Avoid cluttering the calendar with rarely-used views unless absolutely necessary.

📆 Use Today’s Date as Default

• Set default_date to auto-load the current date each time the calendar is opened.

• This improves relevance and ensures the user always sees the most up-to-date schedule at a glance.

🧩 Optimize Calendar Loading

• Only load events relevant to the logged-in user to reduce backend load and speed up rendering.

• Use AJAX or lazy loading if there are too many events.

🌐 Match Calendar Format to Locale

• Customize time (time_format) and date (month_header_format, etc.) formats according to your target audience’s regional preferences (e.g., Indian or European formats).

Frequently Asked Questions. #

• Can employees see each other’s appointments?
  • No. If you use worker: "logged", each employee sees only their events. Only admins (with manage_options) can see everything.

• Can I use my own data API?
  • Yes. Replace /api/events in the calendar script with your backend endpoint returning JSON data.

• How do I show remaining time slots?
  • Set show_remaining_slots: "1" and ensure your backend supports remaining slot calculations.

• Can the calendar show appointment status?
  • Yes. If your event data includes a status field (e.g., pending, confirmed, etc.), use it to display labels or color variations.

• Can the calendar use Indian date format?
  • Yes. You can format headers and times using month_header_format, time_format, etc., based on your locale.

That’s it for this tutorial, if you need any further assistance please contact us directly.