All Apps and Add-ons

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

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.

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

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

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

Path Finder

Also , i wrote this

it says , error ..invalida character name

0 Karma

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

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

Engager

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

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!