1. Home
  2. Docs
  3. How to
  4. How to Show Salesforce Event Calendar and Link to Detail Page on WordPress (with Example)

How to Show Salesforce Event Calendar and Link to Detail Page on WordPress (with Example)

This article explains how you can show a list of Events saved in Salesforce on your WordPress website. The information is pulled real-time from Salesforce using the Sawfish plugin.

The Calendar pulls the events live from Salesforce – so any event added on Salesforce shows up immediately on WordPress.

Your users would be able to view the events on a Calendar on the page, click on an event and view more info in a new page. Here you can add more field with event description, registration links, forms and more.

calendar clickable
detail page

Here’s the steps we’ll follow:

  1. Set up a Calendar Page on WordPress with events from Salesforce
  2. Create a Detail page to show more information about the event
  3. Create a Formula field in Salesforce to generate links
  4. Link Calendar to Detail Page

In this example we display events from a Custom object named Sessions in Salesforce. These steps work for standard objects as well. The object you select should have a Date or DateTime field with the event info to set the dates on the calendar.

select salesforce custom object to show on WordPress

Creating the Salesforce Calendar on WordPress

The first step is to select the object that has the Calendar events. From your WordPress dashboard, select Add New Layout from the Sawfish plugin options.

select salesforce object to display on wordpress

Select the Session object (or your event object) and Select the fields that have the name of the event and the Event date.

Set the view type Salesforce to show in WordPress

Set the Show Records as to Calendar

You would only need Event Name and Event Date field to build the calendar.

However, you can show additional fields either on the the Popup or the detail page in while.

Additional Salesforce fields in Popup

You can also add filters to show selected events. Most of the time you would want to pull only events happening this month and the coming one. Set the filter to :

Session_Date__c = TODAY OR Session_Date__c = NEXT_N_DAYS:90

Add filter to view

This would show events in the next 90 days (and include today).

Make sure the Event Name is set as the first field and Event Date as the second.

Rearrange the fields

The calendar is ready to test!

Copy the salesforce shortcode

Copy the shortcode and open the Add New Page option from the WordPress dashboard.

Copy paste the salesforce shortcode

Now, paste the shortcode on the page editor. If you’re using the new editor, include the code by using the Shortcode Module.

Shortcode in Editor

For Elementor users, select the Shortcode widget or text widget.

Preview how the page looks. The Calendar would look similar to the example below. You can also change the type of view to see events in Week, Day and List view.

Salesforce Calendar on WordPress

Optionally, if you set the Category: option you can view and filter events with a drop down option.
The events would be in color coded based on the value. In this case, the Calendar would look like this.

Category Calendar filter by Salesforce

We will have to add the function to click on each events and show more info on a detail page. But before we get there, let’s create the detail page it would link to.

Create a Detail page to dynamically show more Event information

This page will show dynamically show information for any event based on the Id of the record. We will send this information to the page by using a url parameter eId.


This tells the page to get info of the specific event with Id : 0030M00002ZE21uQAD.

Let’s set up this query using the Sawfish plugin.

Open the WordPress dashboard in a new tab and click on Add New Layout.

Add new Layout Section

Select the Session object and select the ID field.

In the filter section enter:
Id = {!eId}

This tells the plugin query the event to use the Record ID sent in the link through the eId value

filter by dynamic id salesforce

Set the Show Records as option to Section. This lets us build custom layouts combining text and Salesforce fields.

Copy the shortcode. Now, let’s Create a New Page on WordPress for the event detail. Click Add New page and paste the shortcode.

Event Detail page for Salesforce

You’ll notice the {!Id} field in the shortcode. You can add content with any field here (between the [sectionforce] and [/sectionforce] shortcode) and combine HTML elements using the {!FieldName} format, similar to the syntax used in Email Templates. For a full list of fields and labels, check out the Fields and Relationships page from Salesforce Object Manager.

Let’s add some basic event info:

[sectionsforce o="Session__c" filter="Id = {!eId}" by="Id" n="1" ]
Event Name: {!Name}
Language: {!Languages__c} <br>
Date: {!Session_Date__c}

You could also add HTML elements to format it better. The shortcode supports HTML, CSS and JavaScript.

[sectionsforce o="Session__c" filter="Id = {!eId}" by="Id" n="1" ]
<h2> Event Name: {!Name} </h2>
Language: {!Languages__c} <br>
Date: {!Session_Date__c} <br>

All set! We are ready to view the page.

We would need a sample event Id to see the field values. Open any event record detail page on Salesforce and copy the Id from the address shown in your web browser.

record Id in link

We’ll modify this link to pull information of a specific event, to the end of the link add ?eId= and the Id copied from Salesforce.

The link would be :




if you’re in preview mode.

Here’s how the page would look like!

sample detail event page salesforce

Try it out with another event record Id, it will replace the field values.

another detail page for salesforce on wordpress

As next steps we need to :

  1. Create the links dynamically for each event
  2. Retrieve these links onto the Calendar

Since the links are based on the record Id we can create a formula field generate them for each event.

On Salesforce, open Fields and Relationships page from Object Manager. Select the Session object or the object that has the events.

edit object setup

You can also select Edit Object from your Event object detail view to quickly go to it’s Object Manager setting.

From Fields & Relationships, click New.

click new formula field

Select Formula.

formula field for salesforce

You could set the Field Label as ‘Event Detail Link’.

return type and label for formula

Set the Return type as text. In the formula editor enter the link within quotes.

"https://example.com/detail-page?eId="& Id

replace your website’s event detail page link here.

formula for detail page salesforce

Click Next, review the options you’d like then Save.

Now, open the detail page of an Event record and check out the new Field. The field shows the specific detail link for each event.

sample detail page formula on layout

Now, we can include this in the calendar to make it click and navigate to this page.

Select Add New Layout from the WordPress dashboard to create the Calendar with the new Link. Select the Object and fields again along with the filter as we did in the first step.

Event Detail link on calendar

Select the Event Link field and set it to the New Formula field we created.

Copy the shortcode and paste it the Calendar page. Make sure to replace the Calendar shortcode we had before.

All done!

Now we have a clickable Event Calendar that links to an Event Detail page. When the user clicks on the event from the view it will automatically open the detail page to show more information.

Need help setting it up? Just send us a quick email and we’ll set up this feature for you site in minutes! No extra charges. 🙂

Was this article helpful to you? Yes No