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.
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
@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.
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?
Also , i wrote this
it says , error ..invalida character name
@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
@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.
@niketnilay I an Not Talking about the Calendar Heatmap but about Calendar Event Custom Visualization.
Thanks anyways!