DayBackForFileMaker

Editing the Calendar's Appearance

DayBackForFileMaker.CSS History

Hide minor edits - Show changes to markup

May 17, 2023, at 11:03 PM by 192.88.134.15 -
Changed lines 7-8 from:

https://www.seedcode.com/rootimages/stikipad/dayback/css.png

to:

https://archive.seedcode.com/rootimages/stikipad/dayback/css.png

Changed lines 27-29 from:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

to:

https://archive.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

Changed lines 175-176 from:

https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png

to:

https://archive.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png

Changed lines 363-365 from:

https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png

to:

https://archive.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png

Changed line 446 from:

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

to:

https://archive.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

Changed line 499 from:
Yes, though you may want to consider creating 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.
to:
Yes, though you may want to consider creating appointments for holidays instead: appointments will show up on every calendar view (the CSS below works with Month, Horizon, and Resource Pivot List views) and appointments can be created using DayBack's repeating events engine. But if you do want to style a specific date, here's how.
November 24, 2020, at 09:11 PM by KC Embrey - Added #FontSize
Added line 80:

December 19, 2019, at 07:34 PM by 192.88.134.15 -
Changed line 34 from:
."add-event-container {
to:
.add-event-container {
December 04, 2019, at 03:31 PM by KC Embrey - Added #HideStatus and #HideResource
Added lines 419-434:

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;
}
October 21, 2019, at 06:23 PM by 192.88.134.15 -
Changed line 34 from:
.add-event-container {
to:
."add-event-container {
Changed lines 39-40 from:
}
to:
}"
Changed line 45 from:
div[content=newEvent]{
to:
"div[content=newEvent]{
Changed lines 47-48 from:
}
to:
}"
Added lines 129-131:
.measure-button-container {
bottom: 30px !important;
}"
October 21, 2019, at 06:21 PM by 192.88.134.15 -
Changed line 34 from:
".add-event-container {
to:
.add-event-container {
Changed lines 36-37 from:
}"
".measure-button-container {
to:
}
.measure-button-container {
Changed lines 39-40 from:
}"
to:
}
Changed line 45 from:
"div[content=newEvent]{
to:
div[content=newEvent]{
Changed line 47 from:
}"
to:
}
October 21, 2019, at 06:20 PM by 192.88.134.15 -
Changed lines 32-33 from:
// Hide the plus button for new events
to:
// Hide the plus button for new events (and move he analytics button down to where plus used to be)
Changed line 35 from:
display: none !important;
to:
display: none !important;
Changed lines 37-40 from:
to:
".measure-button-container {
bottom: 30px !important;
}"
Changed line 46 from:
display: none !important;
to:
display: none !important;
October 09, 2019, at 10:25 PM by KC Embrey - Added #BreakoutSize
Added lines 424-433:

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

The following CSS will reduce the font-size of the text and remove padding on the top and bottom of the 'breakout' rows, effectively making them take less space on the calendar:
.horizon-breakout-title td{
font-size:14px !important;
padding: 0px 20px;
}
August 02, 2019, at 08:50 PM by KC Embrey - fixed fontawesome links
Changed lines 246-247 from:
Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown here.
to:
Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown here.
Changed line 282 from:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, copy the icon's code, such as "&#xf015". Then, follow the form above, replacing the "&#x" with "\", changing any of the icon placeholders or adding new lines for icons not listed.
to:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, copy the icon's code, such as "&#xf015". Then, follow the form above, replacing the "&#x" with "\", changing any of the icon placeholders or adding new lines for icons not listed.
July 30, 2019, at 04:26 PM by KC Embrey - Added #Holidays
Added line 463:

July 29, 2019, at 11:06 PM by KC Embrey - Updated #HideSidebar section to adjust for new sidebar style
Changed lines 217-219 from:
Hiding the tabs is easy. Here's the code to hide Filters and Calendars, resizing Settings. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"
to:
Hiding the tabs is easy. Here's the code to hide Filters and Calendars, resizing the Settings and Mini-Calendar tabs to fill the width. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"
Changed lines 223-224 from:
.tabButtonContainer button.settings {
width: 258px;
to:
.tabButtonContainer button.settings, .tabButtonContainer button.mini-calendars {
width: 50%;
July 16, 2019, at 12:02 AM by 192.88.134.15 -
Changed line 27 from:

https://www.seedcode.com/rootimages/stikipad/dayback/NotfictaionsSM.png

to:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

July 15, 2019, at 11:23 PM by 192.88.134.15 -
Changed line 27 from:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

to:

https://www.seedcode.com/rootimages/stikipad/dayback/NotfictaionsSM.png

March 18, 2019, at 05:31 PM by KC Embrey - Added #ReadOnly
Added lines 487-504:

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.

February 05, 2019, at 12:50 AM by Ana Petrechenko - Added #SavedMessage
Changed lines 469-486 from:
}
to:
}

How can I remove the word "Saved" from the message bar after making changes to the event?

Some users have expressed confusion with the word "Saved" appearing on the message bar when the entire bar acts to undo changes to an event.
If you don't want to see the word "Saved" when this message appears, you will first need to change the following line in your translation file:
'saved: "Saved",
to
'saved': " ",
To delete the check sign and the separator on the message popover, you can add this to your CSS:
.message-content .fa-check, .message-content .message-separator {
display: none;
}
January 17, 2019, at 08:02 PM by Ana Petrechenko - Added changing highlight for the current day
Added lines 233-241:
}

Can we change the color of the highlight for the current day?

Yes; you can set the highlight color for the current day like this:
.fc-today {
background-color: rgba(47,79,79, .4);
December 18, 2018, at 04:54 AM by 192.88.134.15 -
Changed line 367 from:
.dbk_calendarContent td[data-resource="none"], .fc-view-agendaResourceVert .fc-col0 {
to:
.dbk_calendarContent td[data-resource="none"] {
December 18, 2018, at 04:53 AM by 192.88.134.15 -
Changed line 367 from:
.fc-day[data-resource="none"], .fc-view-agendaResourceVert .fc-col0 {
to:
.dbk_calendarContent td[data-resource="none"], .fc-view-agendaResourceVert .fc-col0 {
November 19, 2018, at 05:26 PM by KC Embrey - Removed duplicate non-working method for removing add event buttons
Deleted lines 224-231:
}

How do I remove the green plus button and the ability to make new events?

There is a just a bit of CSS to add to remove the green plus button in the lower right of the calendar and the "new event" button that shows when you click in an empty calendar cell:
.add-event-button, .dbk_newEvent .btn-success, .add-event-cancel {
display: none;
Changed line 50 from:

Don't forget to include the regular CSS at the end in the last two line which reference the CalendarInterface::ExportGlob. You'll find examples of some common CSS changes below.

to:

Don't forget to include the regular CSS at the end, in the last two lines which reference the CalendarInterface::ExportGlob. You'll find examples of some common CSS changes below.

Deleted lines 16-17:

Deleted lines 20-21:

Deleted lines 50-51:

Changed line 31 from:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

to:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

Changed lines 31-32 from:

IMAGE

to:

https://www.seedcode.com/rootimages/stikipad/dayback/scriptforUserCSSsm.png

Changed lines 29-31 from:

Edit the script "Export Theme ({Preview})" and in the Else branch, replace the single ExportFieldContents line with lines 22 through 31 in the attached screenshot. You'll see just a single branch here for the user "Bob", but change that to "=" and you can create a separate branch for each user who needs special CSS. (Click on the image for a larger version.)

to:

Edit the script "Export Theme ({Preview})" and in the Else branch, replace the single ExportFieldContents line with lines 22 through 31 in the screenshot below. You'll see just a single branch here for the user "Bob", but change that to "=" and you can create a separate branch for each user who needs special CSS. (Click on the image for a larger version.)

IMAGE

Line 25, which you can't really read in the screenshot, is where you actually add new CSS. Here is the second part of the SetField dialog and the example here just turns off the green plus button:

// Hide the plus button for new events
".add-event-container {
display: none !important;
}"
& ¶ &
// Hide the "new event" popover button
"div[content=newEvent]{
display: none !important;
}"
& ¶ &
CalendarInterface::ExportGlob

Don't forget to include the regular CSS at the end in the last two line which reference the CalendarInterface::ExportGlob. You'll find examples of some common CSS changes below.

Deleted lines 10-13:

Important Note on Smart Quotes:

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").

Added lines 13-18:

Important Note on Smart Quotes:

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").


Added lines 23-34:

Can I Load Different CSS for Each User?

Yes. By modifying just one script you can add CSS specific to certain users. This only runs at startup, so if you are having users log in and out of your solution after startup, you'll want to run DayBack's "Upon Opening" script after each login change.

Edit the script "Export Theme ({Preview})" and in the Else branch, replace the single ExportFieldContents line with lines 22 through 31 in the attached screenshot. You'll see just a single branch here for the user "Bob", but change that to "=" and you can create a separate branch for each user who needs special CSS. (Click on the image for a larger version.)


Changed line 451 from:
}
to:
}
September 04, 2018, at 07:19 PM by KC Embrey - Added note on smart quotes
Added lines 10-15:

Important Note on Smart Quotes:

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").


July 25, 2018, at 08:14 PM by 192.88.134.15 -
Changed lines 423-431 from:

}
to:

}

Can I color the background of specific dates like holidays?

Yes, though you may want to consider creating 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="2018-07-23"] {
background-color:red;
}
Changed line 51 from:
  1. Time
to:

May 17, 2018, at 09:53 PM by KC Embrey - Added #Time
Added line 51:
  1. Time
April 25, 2018, at 08:29 PM by 192.88.134.15 -
Changed lines 209-228 from:
.sidebar-toggle-container {
margin-left: 400px;
margin-top: 15px;
}
.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
font-size: 40px ;
color: rgb(66, 139, 202);
}
.sidebar-toggle {
overflow: visible ;
background-color: #FFFFFF ;
}
.sidebar-toggle-label {
font-size: 13px;
}
.sidebar-toggle-container .fa-caret-left:before {
content: "\f190" !important;
}
.sidebar-toggle-container .fa-caret-right:before {
content: "\f18e" !important;
to:
@media only screen
and (min-device-width : 1025px)
and (max-device-width : 3224px) {
.sidebar-toggle-container {
margin-left: 400px;
margin-top: 15px;
}
.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
font-size: 40px ;
color: rgb(66, 139, 202);
}
.sidebar-toggle {
overflow: visible ;
background-color: #FFFFFF ;
}
.sidebar-toggle-label {
font-size: 13px;
}
.sidebar-toggle-container .fa-caret-left:before {
content: "\f190" !important;
}
.sidebar-toggle-container .fa-caret-right:before {
content: "\f18e" !important;
}
April 06, 2018, at 09:37 PM by KC Embrey - specified .fc-view-agendaResourceVert for the date header line in rotating resources
Changed line 157 from:
.date-column-header{
to:
.fc-view-agendaResourceVert .date-column-header{
April 06, 2018, at 09:33 PM by KC Embrey - Added date-column-header requirement for rotating resource names
Added lines 156-159:
}
.date-column-header{
position: fixed;
top:90px;
April 05, 2018, at 09:24 PM by KC Embrey - Added #RotateResources
Added line 125:

March 30, 2018, at 06:27 PM by 192.88.134.15 - Increasing popover text field height.
Changed lines 384-413 from:
}
to:
}

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

Sure thing. The different fields are listed below with their default heights.
/*Title height*/
textarea.title-input { 

min-height: 34px; 

}
/*Description height*/
textarea#description { 

min-height: 78px; 

}
/*Additional Fields height -- affects all text "edit" additional fields*/
.utility-panel textarea {

min-height: 28px; 

}
Increasing the height of title and/or description 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;

}
March 29, 2018, at 11:40 PM by KC Embrey - Added #CurrentTimeLine
Added line 19:

March 12, 2018, at 04:48 PM by KC Embrey - Added #SourceSpecific
Added line 270:

March 05, 2018, at 09:48 PM by KC Embrey - Added #ShadeTimeRanges
Added lines 308-309:

February 07, 2018, at 10:43 PM by KC Embrey - Added mobile-device
Changed lines 245-247 from:
CSS modifications to the calendar can be formatted to only apply to a specific view. 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
to:
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
February 07, 2018, at 08:59 PM by KC Embrey - fixed typo
Changed line 257 from:
.fc-view-basicResourceVertz -- Resource tab, list view
to:
.fc-view-basicResourceVert -- Resource tab, list view
January 17, 2018, at 02:11 AM by 192.88.134.15 -
Added lines 181-188:
}

How do I remove the green plus button and the ability to make new events?

There is a just a bit of CSS to add to remove the green plus button in the lower right of the calendar and the "new event" button that shows when you click in an empty calendar cell:
.add-event-button, .dbk_newEvent .btn-success, .add-event-cancel {
display: none;
January 15, 2018, at 05:43 PM by 192.88.134.15 -
Changed lines 300-302 from:

Notice how all the rows I want to change are separated by commas. The actual row numbers you'll use will depend on what your "earliest time" setting is, and what your "time scale" is set to. The shaded area will move to other times if users change these "earliest time" and "time scale" settings.

to:
Notice how all the rows I want to change are separated by commas. The actual row numbers you'll use will depend on what your "earliest time" setting is, and what your "time scale" is set to. So add the code above and then see where you are, moving the row numbers up and down to find the rows that work for your settings.
The shaded area will move to other times if users change these "earliest time" and "time scale" settings in DayBack's left hand sidebar.
January 15, 2018, at 05:41 PM by 192.88.134.15 -
Added lines 291-300:

Can I shade a particular time ranges, like from noon to 2pm when we're closed for lunch?

Yes; each row on the timed views has a number and you can set the background of those like this:
.fc-slot32, .fc-slot33, .fc-slot34, .fc-slot35, .fc-slot36, .fc-slot37, .fc-slot38, .fc-slot39 {
background-color: rgba(128, 128, 128, 0.16);
}

Notice how all the rows I want to change are separated by commas. The actual row numbers you'll use will depend on what your "earliest time" setting is, and what your "time scale" is set to. The shaded area will move to other times if users change these "earliest time" and "time scale" settings.

December 14, 2017, at 06:46 PM by 192.88.134.15 -
Added lines 10-13:

Styling the Text of an Event

Most of the mods which follow are about styling the calendar's interface and how events are rendered. If you're interested in calculating the style of event content (like making a customer's name bold, or adding a caution icon if the meeting is about errors) check out Event Styles.

November 13, 2017, at 08:19 PM by 192.88.134.15 -
Changed line 258 from:
The calendar name is also used as a class in this way when drawing an event the calendar (such as how the event appears on the month view before you click on it). For example, this will give events for the Sample Events source a drop shadow:
to:
The calendar name is also used as a class in this way when drawing an event to the calendar (such as how the event appears on the month view before you click on it). For example, this will give events for the Sample Events source a drop shadow:
October 19, 2017, at 07:17 PM by 192.88.134.15 -
Added lines 151-162:

Can I color alternate rows on the schedule views?

Yes. 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;
}
September 07, 2017, at 06:40 PM by KC Embrey - Added Resource daily view to view specific class list
Added line 230:
.fc-view-basicResourceDays -- Resource daily view
July 31, 2017, at 08:49 PM by 192.88.134.15 -
Changed lines 19-20 from:
#timelineTime {
display: none;
to:
#timelineTime, #timelineTimeVertContainer, #timelineContainer, #timelineContainerVert {
display: none !important;
Changed lines 22-24 from:
#timelineContainer {
display: none !important;
}
to:
July 13, 2017, at 02:33 PM by 192.88.134.15 -
Changed lines 239-245 from:

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

Great idea:
.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.11) !important;
to:

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 "Sample Events":
.SampleEvents .dbk_popover .fa-cog {
display: none;
Added lines 247-265:
The calendar name is also used as a class in this way when drawing an event the calendar (such as how the event appears on the month view before you click on it). For example, this will give events for the Sample Events source a drop shadow:
.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);
}

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

Great idea:
.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.11) !important;
}
Changed line 337 from:
}
to:
}
July 12, 2017, at 10:14 PM by KC Embrey - Added instructions on disabling the custom actions button
Added lines 91-99:
display: none;
}

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

Yes, add this CSS somewhere after the first few declarations:
.dbk_popover .fa-cog {
June 22, 2017, at 05:22 PM by KC Embrey - Added required !important to hiding sidebar buttons
Changed line 154 from:
display: none;
to:
display: none !important;
June 07, 2017, at 07:26 PM by KC Embrey - Added Resource Pivot view column adjustment #ResourcePivotViewColumn
Changed lines 301-310 from:

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

to:

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

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;
}
April 07, 2017, at 03:17 PM by 192.88.134.15 -
April 07, 2017, at 03:17 PM by 192.88.134.15 -
Added lines 36-46:

Can I increase the font size for events so they are easier to read?

Yes. 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;
}
April 03, 2017, at 03:58 AM by KC Embrey - Added color/opacity of new event highlight
Changed lines 85-86 from:
Yes, add this CSS somewhere after the first few declarations will pull the handle but still let you drag the event:
to:
Yes, adding this CSS somewhere after the first few declarations will pull the handle but still let you drag the event:
Added lines 90-100:

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

Yes, add this CSS somewhere after the first few declarations 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).
Added line 101:
-ms-transform: rotate(-70deg);
March 18, 2017, at 07:58 PM by 192.88.134.15 -
Changed lines 145-150 from:

Can I change the icons used throughout the calendar?

Sure! For example, you can change the calendar icon in DayBack's sidebar to a home icon. Scroll to the bottom of the CSS text, where you'll find placeholders for some of the different icons used in DayBack. Add a new line for the calendar icon placeholder, changing it to the home icon, like this:
.fa-calendar:before {
content: "\f015";
to:

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

Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown here.
.sidebar-toggle-container {
margin-left: 400px;
margin-top: 15px;
Changed lines 153-178 from:
to:
.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
font-size: 40px ;
color: rgb(66, 139, 202);
}
.sidebar-toggle {
overflow: visible ;
background-color: #FFFFFF ;
}
.sidebar-toggle-label {
font-size: 13px;
}
.sidebar-toggle-container .fa-caret-left:before {
content: "\f190" !important;
}
.sidebar-toggle-container .fa-caret-right:before {
content: "\f18e" !important;
}

Can I change the icons used throughout the calendar?

Sure! For example, you can change the calendar icon in DayBack's sidebar to a home icon. Scroll to the bottom of the CSS text, where you'll find placeholders for some of the different icons used in DayBack. Add a new line for the calendar icon placeholder, changing it to the home icon, like this:
.fa-calendar:before {
content: "\f015";
}
Changed line 278 from:

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

to:

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

February 17, 2017, at 06:49 PM by KC Embrey - added #HideSidebar
Added line 122:

February 04, 2017, at 12:52 AM by KC Embrey - added periods to view specific CSS selectors
Changed lines 167-176 from:
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 view
fc-view-basicHorizon -- Gantt Chart
fc-view-agendaResourceVert -- Resource tab with times down left side
fc-view-agendaResourceHor -- Pivot Schedule (was "Grid" view)
fc-view-basicResourceVertz -- Resource tab, list view
fc-view-basicResourceHor -- Pivot List
to:
.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 view
.fc-view-basicHorizon -- Gantt Chart
.fc-view-agendaResourceVert -- Resource tab with times down left side
.fc-view-agendaResourceHor -- Pivot Schedule (was "Grid" view)
.fc-view-basicResourceVertz -- Resource tab, list view
.fc-view-basicResourceHor -- Pivot List
February 04, 2017, at 12:47 AM by KC Embrey - Added view specific CSS section
Added lines 160-178:

Can I make customizations to a specific view only?

CSS modifications to the calendar can be formatted to only apply to a specific view. 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 view
fc-view-basicHorizon -- Gantt Chart
fc-view-agendaResourceVert -- Resource tab with times down left side
fc-view-agendaResourceHor -- Pivot Schedule (was "Grid" view)
fc-view-basicResourceVertz -- 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.
January 11, 2017, at 07:04 PM by 192.88.134.15 -
Changed lines 225-226 from:
Sure thing...
to:
Sure. Here is the CSS for the screenshot below:
Changed lines 230-232 from:
}
to:
}

https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png

January 11, 2017, at 07:02 PM by 192.88.134.15 -
Changed lines 221-230 from:
}
to:
}

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

Sure thing...
.breakout-title-collapsed td {
color: rgb(183, 184, 190);
background-color: rgb(250, 250, 250);
}
December 22, 2016, at 07:28 PM by KC Embrey - added #AddEvent anchor
Added line 60:

December 14, 2016, at 07:04 PM by KC Embrey - Added #Status label
Added line 196:

December 10, 2016, at 10:18 PM by 192.88.134.15 -
Added lines 25-35:
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;
}
Added line 201:

November 08, 2016, at 05:16 PM by 192.88.135.15 -
Added lines 15-25:

My users don't want to see the red line for the current time

If you don't want to see the red time line, just edit the CSS as described above and then add this:
#timelineTime {
display: none;
}
#timelineContainer {
display: none !important;
}
Changed line 28 from:
If you don't want to see the event start time until you click on an event, you can edit the CSS as described above and then add this:
to:
If you don't want to see the event start time until you click on an event, you can add this to your CSS:
October 25, 2016, at 05:24 PM by Dan Wheelon - Help doc buttons
Changed lines 188-196 from:
}
to:
}

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

No problem. But note that these buttons first call a FileMaker script, so if you'd like, you can repurpose the "Calendar Help From WebViewer" script to perform another action like open your own help layout. To hide them altogether, just add this to your CSS theme:
button.btn.btn-link.btn-help {
display: none;
}
Added lines 130-134:
Icons not already listed in the CSS theme file:
.fa-calendar
.fa-cog
October 06, 2016, at 06:10 PM by Dan Wheelon - Updated Icons link
Changed lines 123-126 from:
Sure! For example, you can change the house icon in DayBack's sidebar to a calendar icon. Scroll to the bottom of the CSS text, where you'll find placeholders for the different icons. Change the home icon placeholder, ".dbk_icon_home {}", to this:
.dbk_icon_home::before {
content: "\f073";
to:
Sure! For example, you can change the calendar icon in DayBack's sidebar to a home icon. Scroll to the bottom of the CSS text, where you'll find placeholders for some of the different icons used in DayBack. Add a new line for the calendar icon placeholder, changing it to the home icon, like this:
.fa-calendar:before {
content: "\f015";
Changed line 129 from:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.
to:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, copy the icon's code, such as "&#xf015". Then, follow the form above, replacing the "&#x" with "\", changing any of the icon placeholders or adding new lines for icons not listed.
August 19, 2016, at 03:45 PM by Dan Wheelon - Hide green plus button
Changed lines 38-41 from:

Can I prevent the new event popover from showing?

Yes, add this CSS somewhere after the first few declarations:
to:

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

Yes, add this CSS somewhere after the first few declarations to hide the new event popover:
Added lines 45-50:
And add this to hide the draggable, green plus button for creating events:
.add-event-container {
display: none;
}
August 04, 2016, at 02:11 PM by 192.88.134.15 -
Changed line 176 from:
display: none;
to:
display: none !important;
August 03, 2016, at 02:48 PM by 192.88.134.15 -
Added lines 171-176:
}
If you want to pull the "cog" icon for adjusting status names and colors you can use this:
.list-selector .fa-cog {
display: none;
August 03, 2016, at 02:45 PM by 192.88.134.15 -
Added lines 161-170:
}

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 statuses are records in FileMaker's CalendarColors table, so you can apply access privilege rules to that table if you only want some users to be able to add statuses).
Here is the CSS for removing the button outright:
.list-selector.list-event-button {
display: none;
May 24, 2016, at 10:01 PM by Dan Wheelon - Mini-calendar dates
Added lines 153-160:
}

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 current day and the selected day bold:
.dbk_dayNumber.dbk_today, .dbk_dayNumber.dbk_selected {
font-weight: bold;
May 02, 2016, at 03:52 PM by 192.88.134.15 -
Added lines 20-25:
display: none;
}
To pull this from just the Schedule view, preface it with the view name like this:
.fc-view-agendaResourceVert .fc-event-time {
April 12, 2016, at 08:14 PM by 192.88.134.15 -
Changed lines 145-147 from:
.fc-day[data-resource="none"] {
background-color: #DFECF5 !important;
}
to:
.fc-day[data-resource="none"], .fc-view-agendaResourceVert .fc-col0 {
background-color: #DFECF5 !important;
}
December 29, 2015, at 06:27 PM by 192.88.134.15 -
December 29, 2015, at 06:26 PM by 192.88.134.15 -
Added lines 140-147:

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.
.fc-day[data-resource="none"] {
background-color: #DFECF5 !important;
}
December 16, 2015, at 02:33 PM by 192.88.134.15 -
Changed line 121 from:

<a name="horizonlines"></a>

to:

December 16, 2015, at 02:30 PM by 192.88.134.15 -
December 16, 2015, at 02:29 PM by 192.88.134.15 -
Added line 121:

<a name="horizonlines"></a>

Changed lines 135-139 from:
}
to:
}
Here is a before and after of what these two mods look like; it's subtle but I think it makes the horizon view easier to scan at a glance:

https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png

December 12, 2015, at 04:49 PM by 192.88.134.15 -
Added lines 127-133:
}
You might also like this mod, which adds a vertical line to the beginning of your week. Works great with the mod above. In your CSS, replace "mon" with your start day.
.fc-view-basicHorizon .fc-mon {
border-color: rgba(10, 189, 237, 0.22) !important;
border-left-width: 2px;
December 12, 2015, at 04:24 PM by 192.88.134.15 -
Changed lines 125-127 from:
.dbk_day_sat, .dbk_day_sun {
background-color: rgba(200, 201, 204, 0.11) !important;
}
to:
.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.11) !important;
}
December 10, 2015, at 04:36 PM by 192.88.134.15 -
Changed lines 119-127 from:
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. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)
to:
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. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)

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

Great idea:
.dbk_day_sat, .dbk_day_sun {
background-color: rgba(200, 201, 204, 0.11) !important;
}
December 08, 2015, at 11:43 PM by 192.88.134.15 -
Added lines 30-37:
}

Can I prevent the new event popover from showing?

Yes, add this CSS somewhere after the first few declarations:
div[content=newEvent]{
display: none !important;
November 30, 2015, at 07:23 PM by 192.88.134.15 -
Changed line 93 from:

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

to:

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

November 30, 2015, at 07:22 PM by 192.88.134.15 -
Added lines 93-99:

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

Yes; you can change the grid lines like this:
.fc-widget-content, .fc-widget-content {
border-color: #a94442;
}
October 26, 2015, at 02:17 PM by 142.4.217.188 -
Added lines 22-30:
If you'd like to pull the event title along side the start and end times on the schedule views, try this:
.fc-event-time {
display: inline;
}
.fc-event-title {
display: inline;
}
October 20, 2015, at 03:52 AM by 142.4.217.187 -
Changed line 93 from:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.
to:
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.
October 20, 2015, at 12:51 AM by Dan - Added section for changing icons
Changed lines 82-95 from:
}
to:
}

Can I change the icons used throughout the calendar?

Sure! For example, you can change the house icon in DayBack's sidebar to a calendar icon. Scroll to the bottom of the CSS text, where you'll find placeholders for the different icons. Change the home icon placeholder, ".dbk_icon_home {}", to this:
.dbk_icon_home::before {
content: "\f073";
}
At this link, you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.
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. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)
Added lines 68-81:
}

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 way 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 Filters and Calendars, resizing Settings. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"
.dbk_sidebar .filters, .dbk_sidebar .calendars {
display: none;
}
.tabButtonContainer button.settings {
width: 258px;
Added lines 8-9:

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.

Changed line 3 from:

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

to:

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

Added lines 36-66:

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:

https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png

.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;
}
.fc-view-agendaResourceVert {
top: 90px;
}
.fc-view-agendaResourceVert .dbk_columnHeader .fc-last span[style^="width"] {
margin-left: -1%;
position: fixed;
width: 100px !important
}
Added lines 10-11:

Add the CSS below into the body of your CSS file in DayBack. One tip: add the css somewhere in the middle of the existing CSS, not as the first line.

July 04, 2015, at 10:12 PM by 142.4.217.187 -
Added lines 25-32:
}

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

Yes, add this CSS somewhere after the first few declarations will pull the handle but still let you drag the event:
.fc .ui-resizable-handle {
opacity: 0;
July 04, 2015, at 09:54 PM by 142.4.217.187 -
Changed line 19 from:

Can I remove the delete button from the even't popover?

to:

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

July 04, 2015, at 09:54 PM by 142.4.217.187 -
Changed lines 9-16 from:

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 edit the CSS as described above and then add this:

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

Some Common CSS Requests

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 edit the CSS as described above and then add this:
.fc-event-time {
display: none;
}

Can I remove the delete button from the even't popover?

Yes, add this CSS somewhere after the first few declarations:
.dbk_editEvent .dbk_button_text_danger {
display: none;
}
June 08, 2015, at 05:32 PM by 142.4.217.187 -
Changed lines 13-15 from:
.fc-event-time {
-> display: none;
-> } \\
to:
.fc-event-time {
display: none;
}
June 08, 2015, at 05:31 PM by 142.4.217.187 -
Changed lines 7-16 from:

https://www.seedcode.com/rootimages/stikipad/dayback/css.png

to:

https://www.seedcode.com/rootimages/stikipad/dayback/css.png

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 edit the CSS as described above and then add this:

.fc-event-time {
-> display: none;
-> }
January 27, 2015, at 10:22 PM by 142.4.217.187 -
Changed line 3 from:

The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendars appearance and match the colors used in your own file.

to:

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

January 27, 2015, at 10:21 PM by 142.4.217.187 -
Changed line 1 from:

(:title Editing the Calendar's CSS:)

to:

(:title Editing the Calendar's Appearance:)

January 27, 2015, at 10:21 PM by 142.4.217.187 -
Changed line 5 from:

Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: Editing Themes.

to:

Each CSS file is a unique theme for the calendar. You'll find tips for editing themes and a nice walkthrough video here: Editing Themes.

Changed lines 3-5 from:

The look and feel of DayBack is controlled through a CSS file which you can edit to give the calendar your own skin. Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: Editing Themes.

to:

The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendars appearance and match the colors used in your own file.

Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: Editing Themes.

Changed line 1 from:

(:title Editing the Calendar's CSS;)

to:

(:title Editing the Calendar's CSS:)

Added lines 1-5:

(:title Editing the Calendar's CSS;)

The look and feel of DayBack is controlled through a CSS file which you can edit to give the calendar your own skin. Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: Editing Themes.

https://www.seedcode.com/rootimages/stikipad/dayback/css.png

(855) SEEDCODE
[email protected]
Follow us: