CSS: Editing DayBack's Appearance

Editing the Calendar's Appearance

The look and feel ofDayBack is controlled through a CSS file which you can edit to alter the calendar's appearance and match the colors used in your own Salesforce deployment.

Going Further

Where to make these 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:

Some common CSS customizations

How can I make changes to just the "Dark Mode" theme?

Preface your CSS classes with ".theme-dark" as in this change to the font size of an event and make all the fonts black:

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

How can I increase the font size for events on all views so they are easier to read?

Add the following lines. The first changes all the views except horizon; the second class changes the horizon view:

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

How can I hide the status or resource filters on the sidebar?

Add the following to hide the status filters

.filters-status {
    display: none;
}

or the following to hide the resource filters:

.filters-resource {
    display: none;
}

How can I 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;
}

Can I hide the red line for the current time?

If you don't want to see that red line, you can edit the CSS as described above and then add this:

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

You can also change the color and font size of the current time by modifying the attributes for those CSS elements like this:

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

How can I remove the start time from displaying?

If you don't want to see the event start time until you click on an event, you can add this to your CSS:

.fc-event-time {
    display: none; 
}

To pull this from just the Schedule view, preface it with the view name like this

.fc-view-agendaResourceVert .fc-event-time {
    display: none;
}

How do I 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;  
}

How can I show both the start and end date/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)

First, add this to the beginning of the "Display" value for each of your calendar sources to add the start/end values in the normal event time syle while creating a new "display-time-header" class:

<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>"

Next, let's hide the default time display only when not used in the new "display-time-header" class:

.fc-event-time:not(.display-time-header){
    display: none; 
}

That's it!

If you only want to hide the default time display only for specific sources, take a look at the source-specific instructions here.

Can I prevent the new event popover or plus button from showing?

Yes, add this CSS to hide the new event popover if a user clicks on an empty cell:

div[content=newEvent] { 	
    display: none;  
}

Then, add this to hide the draggable, green plus button for creating events (the second class moves the analytics button down to where the green plus used to be):

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

Can I remove the analytics button?

Yes, add this CSS:

.measure-button-container {
    display: none !important;  
}

Can I remove the delete button from the event's popover?

Yes, add this CSS:

.dbk_editEvent .dbk_button_text_danger {
    display: none;  
}

Can I remove the custom actions button/cog from the event's popover?

Sure; use this ...

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

Can I remove the custom fields drawer from the event's popover?

Yes; you'd address this object using its name...

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

Can I hide the "No events found" modal?

When you view a section of your calendar that has no events a modal will appear with the message "No events found". If you have filters selected and the view of your calendar has no events it will show the same message except it will include a "clear filters" link that, when clicked, will clear the filters applied. This can be helpful for some users, as they want to know if there are no events in the view of the calendar they are in and having no events to appear is most commonly caused by filters being applied and the user not knowing. However, to some it can be unnecessary and cause more confusion so you can hide the modal.

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

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

Can I style individual custom fields?

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

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

Can I change the order of the fields in the popover?

Yes; using the translate property, you can re-sort the fields by moving items up and down in the popover. For example, this would swap the location and calendar fields on the "Events" calendar. Negative numbers move the element up, positive numbers move the element down.

// Replace .Events with the name of the calendar for which this change should take place
// If you want to change the order of fields for all calendars, remove .Events 

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

That little handle for resizing an event makes small events look too crowded; can I get rid of that?

Yes, this CSS will pull the handle but still let you drag the event. Check out this before and after:

.fc .ui-resizable-handle {
	opacity: 0; 
}

Can we change the color/opacity of the new event highlight?

Yes, add this CSS to change the color to yellow and increase opacity/visibility:

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

Note: You can specify a color or enter an rgb attribute if desired. Opacity can be specified between 0 (invisible) and 1 (solid).

Can we rotate the column headers on the Resources / Schedule view?

Yes. This a cool little mod =) Note that you have to set your abbreviations to be the same as your resource names to get the full effect. Here's a screenshot, CSS follows:

.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
}

Can I color alternate rows on the schedule views?

Add this to get alternate-row scheduling that makes 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;
}

Can I hide one of the tabs in the sidebar, like "Filters"?

Yes. I'm not sure you'll want to hide the settings tab as without it there is no button to get to the Account Settings section of the calendar, but 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;
}

What if I want to 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.

This 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;
}

Can I adjust the width of the sidebar?

Yes, but a few other objects will need to be adjusted. Here's an example of how to shrink the sidebar width to 265px:

/* 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;
}

Can I change the order of the buttons on the sidebar?

Yes! You can use CSS to modify the order of the buttons as in the above example. Below is the CSS to re-arrange the buttons just like the above. If you want to rearrange the buttons in a different order, just play around with the pixel amounts.

(TIP: negative number will make the element go left; a positive number will make the element go right)

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

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

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

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

Can we change the color of the lines between days of the month or week?

Yes; you can use CSS to modify the colors as in the following example. Use a color picker to get the #hex color code that you'd like to use:

.fc-widget-content, .fc-widget-content {
	border-color: #49c1e3
}

Can I make the button to show or hide the sidebar more obvious?

Yes; the 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;
	}
}

Can I change the icons used throughout the calendar?

Sure! For example, 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 Hour Glass to a Person icon:

Change the search icon definition inside the sidebar button group as follows:

.btn-group .fa-search::before {
    content: '\f007'
}

Once you find an icon you'd like to use from the FontAwesome reference sheet, follow the form above with any of the icon placeholders to change the corresponding icon. Here are the icon placeholders at use in DayBack:

.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.

Making Changing for Specific Calendars, Resources, or Views:

Can I make customizations to a specific view only?

CSS modifications to the calendar can be formatted to only apply to a specific view. If you'd like your changes only to apply when in the mobile (phone) calendar mode, you can use the following selector:

.mobile-device

The inverse of that, for when viewing the calendar in the full, non-mobile version is:

.not-mobile-device

Adding one of the following selectors to the beginning of your CSS will specify which view to apply the CSS to:

Name of CSS selector -- Corresponding tab in the calendar
.fc-view-agendaDay -- Day view with times down the left side
.fc-view-basicDay -- Simple Day view
.fc-view-agendaWeek -- Week view with times down the left side
.fc-view-basicWeek -- Simple Week view
.fc-view-month -- Month List view
.fc-view-agendaDays -- Month Schedule view
.fc-view-basicHorizon -- Gantt Chart
.fc-view-basicResourceDays -- Resource daily view
.fc-view-agendaResourceVert -- Resource tab with times down left side
.fc-view-agendaResourceHor -- Pivot Schedule (was "Grid" view)
.fc-view-basicResourceVert -- Resource tab, list view
.fc-view-basicResourceHor -- Pivot List

You can see an example of CSS applied specifically to the Horizon view in the following section.

What about changing the popover for just one source/calendar?

You can restrict your CSS mods to just one calendar as well. DayBack uses the calendar name as the class name for the popover (use the case-sensitive calendar name with spaces and the "@" sign removed). For example, this will hide the custom actions cog on just the calendar named "Management Team" and make the popover background color light blue:

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

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

The calendar name is also used as a class. You can use the calendar's class name in this example to give a drop shadow to all events on the Sample Event calendar:

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);
}

Can I create CSS that only applies to shared views?

Yes, if you wrap your CSS in the class ".share-only" then it will only be applied to shared bookmarks when viewed outside of Salesforce or FileMaker.

I'd like to shade weekends in Horizon view so it's easier to see where weeks start and stop?

Great idea. Here's an example:

.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 make the event hub in horizon view opaque */

.fc-view-basicHorizon .nub-content { 
	background: rgba(240,240,240,1);
	border-left-width: 2px;
}

Can I change the color of the "none" resource column?

Yes! Using this technique you can assign a color to any resource column simply by replacing "none" with the name of that resource.

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

Can I style the date numbers in the sidebar's mini-calendar?

Sure thing. The .dbk_dayNumber selector will let you style all day numbers in the mini-calendar. Or, 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;
}

How can we remove the "New Status" button in the filters sidebar?

While you can't pull this for only some users, you can remove it entirely. (Remember that these 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 button outright.

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;
}

I'd like to hide the help icons that link to DayBack's docs

No problem. Just add this to your CSS:

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

Can I change the appearance of the 'breakout' rows in Horizon view?

Sure. Here is the CSS to change the color of the collapsed 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 reduce the white space and font size to make it smaller:

.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 even 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; 
}

Can I change the size of the label column in the Resource Pivot views?

Sure. Adjust the width value in the following CSS to adjust the column size:

.fc-row-label{
	width:100px;
}

Can I change the "Selecting contacts is only available in Salesforce" message?

Yes. Add this 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;
}

Can I make a specific popover field read-only?

While we don't yet have a built-in way of making specific fields read-only, you can prevent users from being able to click on a specific field using the following attribute:

pointer-events: none;

For example, preventing users from clicking into the Title field (and making it darker than other fields) can be done with:

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

Note: Since this only prevents mouse clicks, it works great for picklist items, like Resource, or Status, but users will still be able to use the Tab button to enter a text field.

Can I hide a specific popover field that I don't need users to see?

Yes. Add the following to hide a particular field in the pop-over. This example hides the Title field, Repeating event checkbox, and Location field:

.dbk_editEvent #title {
	display: none;
}
.dbk_editEvent .repeating-checkbox {
    display: none;
}

.dbk_editEvent [name=location] {
    display: none;
}

Can I increase the default heights of text fields in the popover?

Sure thing. The different fields are listed below. The example changes the size of each input box, changes the font size, and decreases the spacing between other event properties so that they all fit within the popover:

/* Title height */
.field-container textarea.title-input { 
    min-height: 44px; /* 34px default */
    font-size: 1.1em; /* 1.3em default */
    font-weight: 700; /* 400 default */
}
/* Description height */
.field-container #description  { 
    min-height: 78px; /* 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 */
}

And for the non-text fields, here's an example of how to pull the resources all inline without hiding the full resource list:

/*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;
}

This example allows the resource field to show up to 3-lines. You can replace "resource" in the two places it appears to one of the following to target those 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.

Increasing the height of the popover fields may cause a scroll bar to appear in the popover for overflow. 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;
}

Can I color the background of specific dates like holidays?

Yes, though you may want to consider creating appointments (or availability appointments) for holidays instead.

Appointments will show up on every calendar view (the CSS below only works on Month and Horizon view) and appointments can be created using DayBack's repeating events engine. But if you do want to style a specific date, here's how:

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

How do I change (or disable) the appearance of the threshold tooltip in analytics?

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

Can I add a colored frame around some events?

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

Can I show an icon wherever a particular resource appears?

Yes, like the gold and red stars in the screenshot below. Details and instructions can be found here: styling resources.

How can I remove things from the popover when an event is in the unscheduled list?

The event popover is wrapped in the unscheduled class so you can have the popover behave differently when and item is unscheduled. Maybe you have a custom button in your popover call "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;
}

Remove 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;
}

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.

Looking for something else?

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