Custom Button Actions
You can add as many custom buttons to this side panel as you'd like. Your list of buttons will scroll if the number of buttons exceeds the length of the side panel. You can have a single set of buttons that appear on all of your calendars, or you can have a completely unique set of buttons for each of your Google Calendars, Salesforce objects, or FileMaker sources. You can have different buttons, all well as custom app or event actions for shared calendars. These can be distinct from the buttons that appear for logged-in accounts, and will allow you to implement different features for different user groups.
Additionally, buttons can be added to the calendar itself. Calendar buttons allow you to run custom scripts that modify the DayBack interface, open up bookmarks, or modify groups of selected events using your own menu of buttons.
In this article
How to create your own buttons
Creating a new action is pretty easy:
- 1
- Log in to the admin settings and select the source you're interested in modifying.
- 2
- Click on Actions & Buttons tab on the top of the screen, then scroll down to the section entitled Button Actions.
- 3
- Click Add New Button Action and give your action a name.
- 4
- Give your button a name, and then paste the code you'd like to execute where it says "URL or Function". This is obviously the interesting part -- writing the action itself. Don't hesitate to get in touch and ask for help.
- 5
- That's it.
-
Here's an example that marks a Campaign as "Active" from within DayBack Calendar. You can download the action code here:
makeActive.js This video shows you how to apply the code to your custom action button and then modify it as needed:
-
Button action scripts you can start using right away
Here are some examples you can use as the starting point for your own buttons.
Schedule GoToMeeting or Zoom Meetings from within DayBack Calendar
Slack WebHook (Send A Message To Slack)
Harvest Time Tracker Widget
Parse And Open URL In Event
Track UPS Package
This custom function takes advantage of the seedcodeCalendar.get(filterType) function to create a URL that can be shared with DayBack users within your organization. The link will take them right to the same view, with the same filters applied to the calendar, and even open the same event you have open.The link will be copied to your clipboard so that it can be pasted into an email: createInternalURL.js
Open a rich text editor to modify an event
You will need to install two scripts. addTinyMCEPart1.js is a Before Calendar Rendered app action that adds the TinyMCE library to DayBack when you first open the calendar. addTinyMCEPart2.js is the button action that opens a new popover with the rich text editor for you to modify your field.
Buttons to Call Scripts in FileMaker
Styling your action buttons with colors and icons
Tag your button with a class name. When you describe your custom action button in source settings you'll see a place to give the button a class name. Note that you can tag a button with more than one class by separating your class names with a space:
Applying Icons: You can specify icons in CSS by selecting an icon from the FontAwesome icon set and defining the icon code in the .btn::before class. The code is a unicode character definition which looks like "\f0d1" for. To find an icon, visit http://fontawesome.io/cheatsheet/ and select an icon (DayBack has access to *most* of these). You'll see the Unicode for each icon to the right of it like "Unicode: f0d1". To use that icon in CSS, add a leading slash followed by the 4 characters starting with the "f".
Below are two examples. We assign a class name of trackUPSButton and openMapButton to each of our custom button actions. We write our CSS definitions to color the button with three colors: the icons main color, the color when a user hovers over the icon, and the color when the user clicks the icon. Lastly, we define a .btn::before class for each icon, and add our FontAwesome Unicode icon code. Check out the result below:


/* Blue Track UPS Button */ .trackUPSButton .btn { background-color: darkblue; } .trackUPSButton .btn:hover { background-color: #000066; } .trackUPSButton .btn:active { background-color: #000033; } .trackUPSButton .btn::before { content: '\f0d1'; font-family: FontAwesome; padding-right: 5px; } /* Red Open Map Button */ .openMapButton .btn { background-color: darkred; } .openMapButton .btn:hover { background-color: #660000; } .openMapButton .btn:active { background-color: #330000; } .openMapButton .btn::before { content: '\f041'; font-family: FontAwesome; padding-right: 5px; }
More resources for custom actions
Learn more about data tokens, event attributes, and the functions available to your custom actions here: APIs: Resources for Custom and Event Actions. Learn about the JavaScript objects and methods you can take advantage of here: Objects and Methods for Custom Actions.
Actions also make a great sandbox for trying out new code and testing queries. Here's an example of how DayBack's Jason Young uses Custom Actions to console log query results: Testing SOQL Queries in DayBack Calendar