🎉 Black Friday Sale: Up to 30% Off 🎉


How to modify what is shown in Calendar Details ? ( Part 1 of 2 )

Minimum Requirements for this documentation:

  1. Video Conferencing with Zoom API https://wordpress.org/plugins/video-conferencing-with-zoom-api/
  2. Video Conferencing with Zoom API PRO https://www.codemanas.com/downloads/video-conferencing-with-zoom-pro/

Today we are going to be looking at how to

  1. Modify the design
  2. Show more options

in the popup of Zoom Calendar that is generated using the shortcode [vczapi_zoom_calendar]
Firstly this is how the calendar popover will look like when you click it.

So at it’s core – the Calendar will show some of the meeting description / text , the meeting title and the link for the meeting details ( see more link ) as well as a featured image of the meeting.

Modify the Design :

Now on to the first part – let’s say we want to show the image after the meeting title, the first thing we will need to do is copy the template into our child theme – so that future updates to the plugin do not override our customization.

So the template file in question is
we should copy this file and put it into our theme folder like so

Theme File Name for Popover
File – copied to your theme calendar > popover-template.php

Now, lets have a look at the template content in our theme, opening the popover-template.php we can see the default content

Popover Template
popover-template.php in your theme

Now to show title before image we simply have to move {{title}} before {{image_html}}.

Title before Image
Title before Image

I also will add some styling – this will be theme specific so please make adjustments on your own as needed. For my purposes i want to add a bit of space after the image.

Currently after the changes it looks like

Title First Output
Before CSS applied
Popover after CSS changes applied
After CSS changes applied

the CSS i added.

.vczapi-calendar-tooltip img {
margin-bottom: 10px;

Leave a Reply

Your email address will not be published. Required fields are marked *