Skip To Content
Get In Touch

Search...

Change CalendarAnything Logo (VF Page + Lightning Application)

If your business has requirements that go beyond our out-of-the-box features, reach out - we offer custom development services for CalendarAnything to meet your unique needs.

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:

Related articles:

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.

 

Ready to see results?

Request a demo