1. Home
  2. Add-Ons & Themes
  3. Events Calendar
  4. Customizing the calendar modal (for developers)

Customizing the calendar modal (for developers)

The modal that pops up when clicking an event in the  [novelist-events-calendar] shortcode can be customized by developers.

Create a new folder in your theme

Inside your theme file, create a new folder called novelist_templates. This is where all Novelist templates can be overridden.

Copy the default template to that folder

Inside the novelist-events-calendar plugin folder, there’s a sub-folder called “templates”. Inside there, there’s a file called event-calendar-content.php. This is the template for the modal. Copy it to the novelist_templates folder you created.

Modify the template to suit your needs

The template can then be edited to suit your needs. This particular template is an Underscore.js template, so there are a few things you need to keep in mind:

  1. Do not remove or edit the <script> tag. This needs to stay in place, or else the template may not be recognized by the plugin.
  2. Do not remove or edit the div with the ID `novelist-events-calendar-modal-inner`. This is an important part of the template. This div should wrap around all the content.
  3. I highly recommend you keep the close `X` in the template. This button allows people to click to close the modal. It looks like so:<a id="novelist-events-calendar-close-modal">&times;</a>
  4. There is a list of available variables in the comment block at the top.
  5. These variables are not displayed with PHP. Instead, they’re done using the WordPress Underscore.js template system. So instead of <?php echo $title; ?> you would just enter {{{ data.title }}} . Use the default template as a guide.

How can we help?