All Apps and Add-ons

Calendar - Custom Visualization: Is there a way to change the colors of fields shown?

T21729
Engager

I have three fields that are shown daily in the calendar and I need them to have the colors green red and yellow not a random color. Is there any way to customize that in Splunk without digging into the javascript code of the Calendar - Custom Visualization app and trying to change something there.

niketn
Legend

Updated to include CSS file path and reference in Splunk view


For month view you can try the following CSS override provided you have three series to be plotted. First Green, Second Yellow and Third Red. In other words make sure only three rows are present and each series defaults to 0 and not null.

/* Override Month View Calendar Colors */
div.fc-content-skeleton > table > tbody > tr:nth-child(1) > td.fc-event-container > a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end {
    background-color:#008000 !important;
    border-color:#008000 !important;
}
div.fc-content-skeleton > table > tbody > tr:nth-child(2) > td.fc-event-container > a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end {
    background-color:#B2B200 !important;
    border-color:#B2B200 !important;
}
div.fc-content-skeleton > table > tbody > tr:nth-child(3) > td.fc-event-container > a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end {
    background-color:#FF0000 !important;
    border-color:#FF0000 !important;
}

You need to place the CSS file (lets say you name it calendar_custom_override.css)under your Splunk app's appserver\static folder which is typically

$SPLUNK_HOME$\etc\app\<YourAppName>\appserver\static

You would need to refer the same from your dashboard or form using stylesheet attribute in the root node.

<dashboard stylesheet="calendar_custom_override.css">

Or

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@T21729... Can you please confirm whether you were able to try out above Simple XML CSS extension?
I have updated my answer to include path to place CSS and refer the same in your dashboard or form.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Mohsin123
Path Finder

Hi Niket,
I am using this calender functionalty . Could you please help me where exactly i will write this..
i placed it in sh deployer's path :
/opt/SP/apps/splunk/etc/shcluster/apps/analytics/default
as calendar_custom_override.css

and pushed the app .

is this enough ?
would you mind sharing your number?

0 Karma

Mohsin123
Path Finder

Also , i wrote this

it says , error ..invalida character name

0 Karma

niketn
Legend

@shraddhamuduli I would request you to use the code button here on Splunk Answers i.e. button with 101010 or Ctrl+K Shortcut key to ensure that special characters in your code do not escape.

Just FYI, the static files like image file, javascript, css and html etc need to be placed under your app's appserver/static folder... i.e.

$SPLUNK_HOME$/etc/app/analytics/appserver/static

If the appserver/static path does not exist you would need to create the same. Since this is a static file change you might also be required to restart/refresh or bump your Splunk instance and also clear browser history for the changes to reflect.

You can refer to similar path under your default search app to get the complete path for appserver/static folder. Change search app to your own i.e. analytics to get the required path for static file.

Refer to the Splunk Documentation for details: https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/UseCSS

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@T21729, Do you specifically need Yellow? Since Calendar Visualization offers only Min Color and Max Color you can choose them as Red and Green as per your use case and then change the Number of Bins to 3. The third color defaults to light brownish.

If you specifically want yellow it would have to be through JavaScript/CSS.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

T21729
Engager

@niketnilay I an Not Talking about the Calendar Heatmap but about Calendar Event Custom Visualization.
Thanks anyways!

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...