Change CalendarAnything Logo (VF Page + Lightning Application)

CalendarAnything allows Salesforce admins to replace the CalendarAnything logo with a personalized logo.

To replace the CalendarAnything logo with the logo of your choosing, you will need to follow 3 steps:

• Create Lightning Application with CalendarAnything
• Create Static Resource with your logo
• Create a new Visualforce Page including CalendarAnything with your logo

Related articles:

• Change CalendarAnything with General Settings
• Change CalendarAnything LWC Logo with URL Parameter

Create Lightning Application with CalendarAnything

• Navigate to the Developer Console:

• In Developer Console navigate to File > New > Lightning Application

• In New Lightning Bundle window, add Name – ca3app
• Click Submit button.

• Within the App open APPLICATION (Ctrl + Shift +1)
• Add the following code to your app.

  <aura:application extends="ltng:outApp" access="GLOBAL">
       <aura:dependency resource="SLCALWC:cal"/>
  </aura:application>
  

  Here’s what your app should look like:
  

• Save your app (CTRL + S)

Create Static Resource with your logo

• Navigate to Setup – Custom Code – Static Resources
• In Static Resources click New button
  
• Add Name of your Static Resource (example: NewLogo)
• Upload file with your Logo (.png)
• Set Cache Control to Public
• Save

Create a new Visualforce Page including CalendarAnything with your logo

• Navigate to the Setup > Custom Code > Visualforce Pages
• In Visualforce Pages click on New button
• Add Label of your Visualforce Page
• Set Available for Lightning Experience, Experience Builder sites, and the mobile app to TRUE

• In Visualforce Markup add the following code:

<apex:page showChat="false" showHeader="false" sidebar="false">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />
<apex:includeLightning />
</style>
 #lwcLightning{height: 100vh;}

       .CA_LWC.JQ_CA > .CA_h .title{
        background:url(‘{!URLFOR($Resource.NewLogo)}’) no-repeat left center !important;
       background-size: contain !important;
       }
</style>
<div id="lwcLightning"></div>

<script>
console.time(‘full start before view ’);
    $Lightning.use("c:ca3app", function() {
        $Lightning.createComponent(
            "SLCALWC:calLoader",
            {},
            "lwcLightning",
            function(cmp) {
                console.log("LWC component was created");
            }
        );
    });
</script>
</apex:page>

• Click Save

Congratulations!

A new Visualforce page from CalendarAnything with your logo has been successfully created.