CSS: Editing DayBack's Appearance

Editing the Calendar's Appearance

The look and feel of DayBack is controlled through a CSS file. This file dictates the calendar's appearance and can be edited to modify calendar features or align colors with your corporate branding.

General CSS Information

Basic information on where to make changes, and how to find class names for custom styles.

CSS Changes by Category

The following categories provide examples you can modify, or simply copy and paste.

Related Articles on Styles and Customizations

Here are some related articles on how to customize DayBack using CSS:

Where to make CSS changes

You can enter your own CSS by logging into Admin Settings and scrolling down to the CSS section in the left-hand sidebar. There you'll find a field into which you can paste your CSS changes:

How can I find the class names in DayBack?

You can use the online version of DayBack to inspect the classes available to you. Here's a cool little video to show you how.


CSS Customizations by Category

Font and Text Adjustments

Increase the Font Size for Events across all Views

In the example below, the first line change all the views except horizon view. The second class changes the horizon view:

.fc-event {
   font-size: 1em;
}
.nub-content {
   font-size: 15px;
}

Event Appearance

Remove the Start Time from the Events' Display

Add this CSS If you don't want to see the event start time until you click on an event:

.fc-event-time {
   display: none; 
}
To remove the start time from just the Schedule View, preface it with the view name. See a list of available view names. 
.fc-view-agendaResourceVert .fc-event-time {
   display: none;
}

Pull the Event Title alongside the Start and End Times

You can simply add this to your CSS:

.fc-event-time { 	
   display: inline;  
} 
.fc-event-title { 	
   display: inline;  
}

Show both the Start and End Date or Time

If you'd like to display both the start and end dates or times, you can get creative with the "Display" field mapping value and CSS. This will automatically display the dates for all-day events, and times for events with times.

FileMaker Note: 

You'll add this to your DBk_EventSummaryCalc field on your event table

Begin by adding the following code to the beginning of the "Display" value for each of your calendar sources. This code will add the start/end values, and style them in DayBack's normal event time style. It will also creating a new .display-time-header class which you can modify using CSS to suit your needs:

Step 1 - Change Display Field Value

<span class="fc-event-time display-time-header"><span>StartDateTime</span> - <span>EndDateTime</span></span>

Here's how it might look for FileMaker:

"<span class=" & Quote("fc-event-time display-time-header") & "><span>" & StartTime & "</span> - <span>" & EndTime & "</span></span>"

Step 2 - Add your Custom CSS

Now we can hide the default time display, but only for events which do not contain .display-time-header class definition:

.fc-event-time:not(.display-time-header) {
   display: none; 
}
If you only want to hide the default time display only for specific calendars, take a look at the source-specific instructions here.

Remove the Event Resizing handle if Events appear crowded

Use the following CSS to remove the visible handle. Note that you can still drag event to expand their date or time range, even with the handle removed. 
.fc .ui-resizable-handle {
   opacity: 0; 
}

Add a colored frame around some events

You'll find instructions and CSS for this here: Color-Coding by Resource.

Remove the Delete Button on Event Popovers

Use this CSS to remove the Delete button: 
.dbk_editEvent .dbk_button_text_danger {
   display: none;  
}

Remove the "Button Actions" drawer, and gear icon from the Event Popover

Use this CSS to remove the Cog icon: 
.dbk_popover .fa-cog {
   display: none;  
}

Remove the "Custom Fields" Drawer from the Event Popover

Use this CSS to remove the Link to Custom Fields Drawer:

div[name="customFields"] {
   display: none;
}

Style individual Custom Fields

Since custom fields aren't classed individually, you'll need to target them by the order they appear using the :nth-of-type  CSS selector. This example will bold the text of the 2nd custom field. 

custom-fields li:nth-of-type(2) {
   font-weight: bold;
}

Change the Order of Fields in the Event Popover

You can re-sort popover fields by moving items up and down using the translate CSS property. For example, the following CSS would swap the location and calendar fields on the "Events" calendar. You can specify other calendar names in a similar way, to only affect the display of certain popovers. Negative numbers move the element up, positive numbers move the element down.

In the example CSS below, you can replace .Events with the name of the calendar for which this change should apply. If you want to apply this change for all calendars, simply remove .Events :

.Events .panel-selector[name=calendar] {
   transform:translateY(29px);
}
.Events .panel-selector[name=location] {
   transform:translateY(-29px);
}

Make Specific Popover Fields Read-Only

You can make most popover fields read-only using field mapping settings, but this only works for certain fields. Currently, there is no built-in way to make every field read-only unless the calendar is set to read-only. To prevent users from clicking on a specific field, you can use the CSS attribute pointer-events: none; .

For example, the following CSS will prevent users from clicking into the "Title" field and will also make the field appear darker than other fields:

 
.dbk_editEvent #title {
   pointer-events: none;
   background: rgb(204, 204, 204);
   color: rgb(51, 51, 51);
   border-color: rgb(60,60,60)
}

Security Note:

This method only prevents mouse clicks, making it suitable for picklist items like Resource or Status fields. However, users can still navigate between text fields using the "Tab" key. Therefore, using CSS for security is ineffective in making a field truly read-only. A more reliable strategy is to:

  1. Use a custom On Field Change Event Action to prevent changes to fields, or
  2. Use a custom Before Event Save App Action, to revert any changes that a user may attempt to save.

Hide Specific Popover Fields

While you can hide most fields using the calendar's field mapping settings, you can also achieve this with CSS. To hide a particular field in the popover, add the following CSS. This example hides the Title field, Repeating event checkbox, and Location field:

Use the following CSS:

.dbk_editEvent #title {
   display: none;
}
.dbk_editEvent .repeating-checkbox {
   display: none;
}
.dbk_editEvent [name=location] {
   display: none;
}

Increase the Default Heights of Popover Text Fields

You can change the default height or style of any field in the Event popover. Popovers can also be customized for only specific calendar sources. The example below changes the size of "Title", "Description", and the "Notes" custom field input box. It also makes the "Title" bold, and decreases the spacing between other event properties so that they all fit within the popover without causing a scroll bar to appear.

Use the following CSS code to implement the above changes: 
/* Change Title field height and font */
.field-container textarea.title-input { 
   max-height: 30px !important; /* 34px default */
   font-size: 1.1em; /* 1.3em default */
   font-weight: 700; /* 400 default */
}

/* Change Description height */
.field-container div[field="description"] { 
   min-height: 90px; /* 28px default */
}

/* Additional Fields height  */
.custom-field-edit textarea {
   height: 88px !important; /* 28px default */
}

/* Spacing between event properties */
.panel-selector { 
   padding: 3px 20px; /* 6px 20px default */
}

Show Multiple Lines of Resources

For non-text fields, the example below shows you how to pull all resource names inline without hiding the full list of resources assigned for an event. This example allows the resource field to show up to 3-lines. You can replace "resource", substituting it for any list fields: list, location, status, contact, project. You can adjust the max-height value to specify the maximum number of lines you'd like to show. Or, you can set it to unset if you don't want to limit the number of rows.

Use the following CSS:

/* Show all resources on up to 3 lines */
.edit [name="resource"] {
   max-height: 3.5em;
}
.edit [name="resource"] .pull-right {
   white-space: unset;
   text-overflow: unset;
}

Increase the Height of the Popover

Increasing the height of individual popover fields may cause a scroll bar to appear in the popover for content that overflows. If you'd like to avoid that popover scroll bar, you can increase the height of the whole popover as well. Be sure to adjust these two values by the same amount (although that amount may not exactly correlate to the adjustments made above).

.edit {
   height: 460px; 
}
.edit .field-container { 
   max-height: 375px;
}

Edit Unscheduled Event Popovers

You can remove, or change elements within a the popover when an event is in the unscheduled list. The event popover is wrapped in the .unscheduled class, allowing you to customize the popover independently from scheduled events.

For example, you may have a custom button in your popover called "Ship Order" and you want to remove that button when an item is in the unscheduled list. Give the button a class named .shipOrderButton and then use this code to remove it from the popover when the item is unscheduled:

.unscheduled .shipOrderButton {
   display: none;
}

You can remove individual fields from the popover the same way. Maybe the date and time fields don't make sense for an unscheduled event. You can hide them like this:

.unscheduled .dateTime {
   display: none;
}

For further information read our article on Styling Unscheduled Events

Main Calendar Grid

Hide the Red Line indicating Current Time

Add the following CSS if you don't want to see the red line across your calendar grid:

#timelineTime, #timelineTimeVertContainer, #timelineContainer, #timelineContainerVert {
   display: none !important;
}

You can also change the color and font size of the current time by modifying following attributes. The following CSS increases the current time font size, and changes the color of the font, and line to green:

#timelineTime {
   color: green !important;
   font-size: 1.2em !important;
   top: -14px !important;
}
#timelineContainer {
   border-top-color: green !important;
}

Prevent the New Event Popover or Plus Button from Showing

By default, DayBack will open a "New Event" popover when a user clicks on an empty cell. You can prevent empty cells from triggering a "New Event" popover, by adding the following CSS: 
div[content=newEvent] { 	
   display: none;  
}

You can hide the draggable "Green Plus button" for creating events and move the analytics button down to its place, using the following CSS:

.add-event-container {
   display: none;
}
.measure-button-container {      
   bottom: 30px !important;
}

You can also do this one for specific users, by adding User Specific CSS rules.

Remove the Analytics Button

You can remove the "Analytics" button using the following CSS: 
.measure-button-container {
   display: none !important;  
}

Change the Color or Opacity of the New Event highlight

When you drag the "Green Plus Icon" to a cell to create an event, DayBack colors the drop destination in light blue. You can change the opacity and color of the drop destination using CSS. The following CSS will change this color to light yellow. You can specify a hex color code, or enter an rgb attribute. The color's opacity can be specified as number between 0 (invisible) and 1 (solid).

.fc-cell-overlay {
   background-color: yellow;
   opacity: .5;
}

Rotate the Column Headers on Resources / Schedule View

The following cool modification rotates your column headers, allowing you to view a longer text description of your resources, as in the screenshot below:

You will have to edit your resource settings to ensure that your "Short Name" fields are set to the same value as your Resource "Name" fields in order to get the full effect. Here's the CSS: 
.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header span {
   -webkit-transform: rotate(-70deg);
   -moz-transform: rotate(-70deg);
   -o-transform: rotate(-70deg);
   width: 100px;
   margin-top: -50px;
   top: 190px;
   position: fixed;
   margin-left: -1.2%;
}
.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header {
   text-align: left;
}
.fc-view-agendaResourceVert .fc-date-header span {
   position: fixed;
   margin-top: -90px;
}
.fc-view-agendaResourceVert {
   top: 90px;
}
.fc-view-agendaResourceVert .dbk_columnHeader .fc-last span[style^="width"] {
   margin-left: -1%;
   position: fixed;
   width: 100px !important
}

Color Alternate Rows on the Schedule Views

The following CSS adds an alternating row color to the scheduling view, making the calendar look more like a spreadsheet:

.fc-agenda-slots tr:nth-child(even){
   background-color: rgba(173, 216, 230, 0.19);
}
.fc-agenda-slots tr.fc-minor td {
   border-color: #9f9f9f transparent transparent;
}

Change the Color of the Grid Lines between Days of the Month or Week

You can modify the grid colors as in the example above. You can use a color picker to get your desired #hex color code, or specify the color as an rgb value: 
.fc-widget-content, .fc-widget-content {
   border-color: #49c1e3;
}

Change the Color of the "None" Resource Column

Using the following technique you can assign a color to any resource column simply by replacing "none" with the name of a specific resource.

.dbk_calendarContent td[data-resource="none"] {
   background-color: #DFECF5 !important;	
}

Change the Size of the Label Column in the Resource Pivot view

You can adjust the column size, by adjusting the width property, as follows: 
.fc-row-label{
   width: 100px;
}

Color the Background of Specific Dates like Holidays

While you can use CSS to color specific days, we recommend creating availability appointments for holidays instead. Availability appointments appear on all view types and can be created using DayBack's repeating events engine, eliminating the need to adjust your CSS annually. Additionally, CSS changes will only affect Month and Horizon views, making appointments a more flexible choice.

If you prefer to style specific dates, you can do so using the following CSS. This example changes a single day's background color to light blue:

[data-date="2022-03-14"] {
   background-color: #EEFFEE; 
}

Hide the Status or Resource Filters on the Sidebar

Add the following to hide the status filers

.filters-status {
   display: none;
}

Or the following to hide the resource filters:

.filters-resource {
   display: none;
}

Compress the Height of Status and Resource Filters to see more at once

Add the following to change the height of the filters so that you can see more filter options without scrolling: 
/* Compress the height of the filters in the sidebar */
.sidebar-filters .list-selector, .sidebar-filters .list-selector.selected, .sidebar-filters .list-selector-icon, .sidebar-filters .sidebar-drag-item{
   line-height: 20px;
   height: 20px;
   min-height: 20px;
}
.sidebar-filters .list-selector .calendarColor {
   height: 17px;
   margin-top: 2px;
}
.sidebar-filters .list-selector .fa-cog{
   font-size: 15px;
}

/* Adjust filters header block */
.sidebar-filters .header-block {
   width: 100%;
   height: 30px;
   line-height: 30px;
}
.sidebar-filters .header-block button {
   padding-top: 2px;
}

/* Adjust text filter container */
.sidebar-filters .search-wrapper {
   line-height: 20px;
   min-height: 25px;
}
.sidebar-filters .search-wrapper textarea{
   height: 17px !important;
   margin-top: 5px;
   margin-bottom: 0px;
}
.sidebar-filters .search-wrapper .fa-search, .sidebar-filters .search-wrapper .fa-times{
   margin-top: 1px;
}

/* Adjust selected folder indicator */
.list-selector.is-filtered:before {
   bottom: 0px;
   height: 2px;
}

Hide Tabs in the Sidebar, such as the Filters Tab

You may hide specific tabs using the example below. However, you'll likely want to avoid hiding the settings tab as without it there is no button to get to the Account Settings section of the calendar. If you'd already entered your license, and you remember how to undo what follows, maybe that's ok.

Hiding the tabs is easy. Here's the code to hide StatusFilters and Calendars, resizing Settings. 

.dbk_sidebar .filters-status, 
.dbk_sidebar .settings {
   display: none !important;
}
.tabButtonContainer button.settings {
   width: 258px;
}

Hide Elements in the Mobile Sidebar

All of the elements in the mobile sidebar are in the same div, so there are no tabs to manage. You can just hide the individual elements in the sidebar.

The following CSS hides all of the elements in the mobile sidebar except the text filter:

.mobile-device .sidebar .calendars, .mobile-device .sidebar .mini-calendars, .mobile-device .sidebar .settings, .mobile-device .sidebar statuses-filter, .mobile-device .sidebar resources-filter, .mobile-device .sidebar-views, .mobile-device .sidebar-calendars, .mobile-device .sidebar-settings {
    display: none !important;
}

Adjust the width of the resource header column in Mobile view

Some users may find the resource column header in Mobile view is a little too wide.

The following CSS shrinks the width of this column to 100px in mobile views only:

.mobile-device .fc-row-label, .mobile-device .fc-row-label span {
    max-width: 100px;
}

Adjust the Width of the Sidebar

The following CSS shows you how to shrink the sidebar width to 265px . It includes additional CSS changes for several related objects:

/* Set sidebar width to 265px */
#sidebar {
   width: 265px;
}

#header, .message-dialog, .calendar, .sidebar-toggle-container{
   left: 265px;
}

.calendar-info .calendar-footer, .calendar-footer-settings{
   left: -48px !important;
}

/* Fix search bar in filters menu */
.search-wrapper .fa-search {
   margin-left: 5px;
}
.search-wrapper textarea {
   width: 150px;
}

/* Changes the width of the Sidebar tab buttons */
.sidebar .tabButtonContainer .calendars {
   width: 110px !important;
}

.sidebar .tabButtonContainer .filters, .sidebar .tabButtonContainer .mini-calendars, .sidebar .tabButtonContainer .settings {
   width: 55px !important;
}

Change the Order of the Buttons in the Sidebar

You can modify the order of the Sidebar buttons as in the example below. If you want to rearrange the buttons in a different order, you will need to adjust the pixel amount accordingly. Negative numbers will make the element shift to the left, while a positive number will make the element shift to the right.

.tabButtonContainer .calendars {
   transform:translateX(66px);
} 

.tabButtonContainer .filters {
   transform:translateX(66px);
} 

.tabButtonContainer .mini-calendars {
   transform:translateX(-188px);
} 

.tabButtonContainer .settings { 
   transform:translateX(5px);
}

Change the Order of the Filters in the Sidebar

Use the following CSS to change the order of the sidebar filters. For example, the code below will place the Status filters below the Resources filters by making the filters container into a flex container and using the order property to change the order in which the filters appear.

.filters-popover-container {
   display: flex;
   flex-direction: column;
}
statuses-filter {
   order: 3;
}

Make the Show/Hide Sidebar Button more obvious

The CSS code below will move this button to the right of the date header and will make it larger. The last two sections swap out the icon. You can use almost any of the font awesome icons shown here. 
@media only screen
and (min-device-width : 1025px)
and (max-device-width : 3224px) {
   .sidebar-toggle {
      position: fixed;
      right: 33px;
   }
   .sidebar-toggle-container {
      margin-left: 7px;
      margin-top: -6px;
   }
   .sidebar-toggle-container .fa-chevron-left, 
   .sidebar-toggle-container .fa-chevron-right {
      font-size: 35px ;
      color: rgb(66, 139, 202);
   }
   .sidebar-toggle {
      overflow: visible ;
   } 
   .sidebar-toggle-label {
      font-size: 13px;
   }
   .sidebar-toggle-container .fa-chevron-left:before { 
      content: "\f190" !important;
   }
   .sidebar-toggle-container .fa-chevron-right:before { 
      content: "\f18e" !important;
   }
   .headerTop, .headerBottom { 
      margin-left: 0px;
      margin-right: 30px;
   }
   .dbk_header div > div > div.pad {
      padding-left: 25px !important;
   }   
   .dbk_show_hide_sidebar .fa-bars { 
      padding-left: 6px;
      padding-top: 7px;
   }
}

Change any of the Icons used throughout the Calendar

You can change any icon by referencing its name and replacing its icon code from the FontAwesome reference sheet. In this example, we change the "Resource Filter" search icon from an Magnifying Glass to a Person icon:

The font awesome icon code must be specified according to the format below, using the :before pseudo class selector: 
.btn-group .fa-search:before {
    content: '\f007';
}
Changing Other Icons:

The following CSS classes represent DayBack's icon placeholders. Once you find an icon you'd like to use from the FontAwesome reference sheet, follow the format above to change the corresponding icon. Remember to add the :before pseudo class selector to the definition you'd like to change, and then specifying the icon code as in the example above.

.dbk_icon_home {}

.dbk_icon_angle_left {}

.dbk_icon_angle_right {}

.dbk_icon_cog {}

.dbk_icon_check {}

.dbk_icon_arrow_left {}

.dbk_icon_arrow_right {}

.dbk_icon_chevron_circle_right {}

.dbk_icon_chevron_circle_left {}

.dbk_icon_help {}

.dbk_icon_add {}

.dbk_icon_cog {}

Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. Copy/paste these "quotes" if your keyboard just doesn't want to type them in.  

Use the .dbk_dayNumber CSS selector to style all day numbers in the mini-calendar. Alternatively, you can target just the current day or selected day (date in focus). For example, you might want to make the fonts larger, and give more space between numbers: 

.dbk_dayNumber {
   line-height: 2.3rem;
   font-size: 1.4rem;
   font-weight: bold;
}
.dbk_dayNumber span {
   padding-left: 3px;
}

Remove the "New Status" button in the filters sidebar

While you can't remove this for only some users, you can remove it entirely. However, remember that the buttons to add statuses and resources only show for DayBack administrators, and you can decide who those are.

Here is the CSS for removing the buttons. You can also remove the "cog" icon for adjusting status names and colors:

.list-selector.list-event-button {
   display: none;
}
.list-selector .fa-cog {
   display: none !important;
}

Hide the "Administrator Settings" and "Account Settings" buttons from the sidebar

Here is the CSS for removing these buttons:

[ng-click="adminSettings()"]{
  display: none;
}

Hide the Help Icons that Link to DayBack's Documentation

Simply add this to your CSS:

button.btn.btn-link.btn-help {
   display: none;
}

Changing Specific Calendars, Resources or Views

Apply customizations to only specific Views

CSS modifications can target specific views. To apply changes only in mobile (phone) calendar mode, use the .mobile-device selector. For the full, non-mobile version, use the .not-mobile-device selector. Add one of the following selectors at the beginning of your CSS to specify the view:

View Name: View CSS Class Name:
Day Schedule .fc-view-agendaDay
Day List .fc-view-basicDay
Week Schedule .fc-view-agendaWeek
Week List .fc-view-basicWeek
Month List .fc-view-month
Month Schedule .fc-view-agendaDays
Horizon List .fc-view-basicHorizon
Resource Daily .fc-view-basicResourceDays
Resource Schedule .fc-view-agendaResourceVert
Resource Pivot Schedule .fc-view-agendaResourceHor
Resource List .fc-view-basicResourceVert
Resource Pivot List .fc-view-basicResourceHor

To apply styles to all views, except a certain view, you can use the :not notation as follows:

.fc-view:not(.fc-view-agendaResourceHor) {
   color: red !important;
}

Change the Event Popover for just one Source or Calendar

You can limit your CSS modifications to a specific calendar. DayBack uses the calendar name as the class name for the popover (remove spaces and the "@ " sign, and use case-sensitive names).

For example the class name for a calendar named "Management Team" must be written as .ManagementTeam . The example below hides the Custom Actions "cog" icon and changes the popover background color to light blue only for the "Management Team" calendar:

.ManagementTeam .dbk_popover {
   background-color: #DFEFFF;
}

.ManagementTeam .dbk_popover .fa-cog {
   display: none;
}

The calendar's class name can also be used to address specific events on the calendar grid. The following example using the calendar's class name to give a drop shadow to all events on the "Sample Events" calendar using the .SampleEvents class name:

.fc-event.SampleEvents {
   border-color: rgba(0, 0, 0, .3);
   border-width: 1px;
   -webkit-box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
}

Shade Weekends in Horizon View to make them stand out

You can change the shading of weekends using the example CSS below. By using an rgba value, you can specify the degree of a color's translucence or opacity, as a number for 0 (translucent) to 1 (solid). 

.fc-view-basicHorizon .dbk_day_sat .fc-day-content, 
.fc-view-basicHorizon .dbk_day_sun .fc-day-content {
   background-color: rgba(200, 201, 204, 0.14) !important;
}
Optionally you can also make the event's gray containers a solid color, rather than slightly translucent default color by using the .nub-content class: 
.fc-view-basicHorizon .nub-content { 
   background: rgba(240,240,240,1);
   border-left-width: 2px;
}

Change the Appearance of the "Breakout" Rows in Horizon View

The following CSS allows you to change the color of the collapsed Horizon view rows to gray as in the screenshot below: 

.breakout-title-collapsed td {
   color: rgb(183, 184, 190);
   background-color: rgb(250, 250, 250);
}

You can also reduce the white space and font size to make the rows smaller, as in the screenshot below:

.horizon-breakout-title td { 
   padding: 3px 10px; 
   font-size: 1.2em; 
}
.horizon-breakout-title td .fa-caret-down { 
   width: 13px;
}
.horizon-breakout-title td .fa-caret-right { 
   padding-left: 2px; width: 11px; 
}

If you'd like it smaller still, you can reduce the spacing, font size and make the resource name bold:

.horizon-breakout-title td { 
   padding: 1px 5px 2px 5px;
   font-size: 1em;
   font-weight: bold; 
}
.horizon-breakout-title td .fa-caret-down { 
   width: 10px;
}
.horizon-breakout-title td .fa-caret-right { 
   padding-left: 2px; width: 8px; 
}

Show an Icon wherever a particular Resource appears

For example, to show gold stars next to the resource name, follow the instructions: styling resources.

Themes, Shares and Miscellaneous

Modify the "Dark Mode" Theme

You can modify any DayBack element for only the Dark Mode theme, by prefacing your CSS classes with .theme-dark before other class definitions. The example below adjusts the font size of events and makes all fonts black, but only for the Dark Mode theme.

.theme-dark .fc-event {
    font-size: 1em;
    color: black !important;
}

Hide the "No Events Found" modal

When viewing a section of your calendar with no events, a modal appears with the message "No events found." If filters are selected and no events are shown, the message includes a "clear filters" link. While this can be helpful for users to understand why no events are displayed, it may cause confusion for others. To hide this modal, use the following CSS:

Use the following CSS to hide this modal from appearing when you have no events on the calendar: 

.modal-dialog.no-events-modal {
  display: none;
}

Remove the "Undo" Button from DayBack's "Changes Saved" Banner

The following CSS will remove the button and disable the banner-wide click that reverts your changes.

.message-dialog .message-content .fa-undo {
    display: none;    
}
.message-dialog .message-content:has(.fa-undo) .message-separator  {
    display: none;
}
.message-dialog .message-content:has(.fa-undo) .message-text span:nth-child(4) {
    display: none;
}
.message-dialog:has(.fa-undo) {
    cursor: none;
    pointer-events: none;
}

Customize CSS for Public Shares

Wrap your CSS in the class .share-only then it will only be applied to shared bookmarks when viewed outside of Salesforce or FileMaker.

Salesforce-specific - Change the "Selecting contacts is only available in Salesforce" message

Add the following to remove the default message and add your own:

contact-selector div:first-child:before {
	content: "Selecting contacts coming soon.";
}
contact-selector .pad div:first-child {
	display: none;
}
project-selector div:first-child:before {
	content: "Selecting projects coming soon.";
}
project-selector .pad div:first-child {
	display: none;
}

Analytics CSS - Change (or disable) the appearance of the threshold tooltip

The tooltip is wrapped in a class named .threshold-tooltip-container , so setting that to display: none will disable the tooltip. To change its appearance you can use any of the following classes.
  • .threshold-tooltip-container handles the horizontal placement of everything
  • .threshold-tooltip handles the vertical placement of the tooltip
  • .tooltip-inner is the actual tooltip with border and background
  • .threshold-title-label is the word "Threshold"
  • .threshold-display is the actual value. This may contain spans with additional data matching what is in other areas of analytics for example if there is a string after the value it would be in a class of "label-after-value"
  • .threshold-tooltip-arrow is the triangle at the bottom of the tooltip
  • .threshold-tooltip-line is, well, the line

Related Articles