Customize Your Calendar with Buttons

Add a Button Launcher to DayBack

Run flows and custom actions from your own menu in the calendar

We love hearing about all the cool ways our customers are integrating DayBack into their existing applications. And we’ve frequently had requests to add custom buttons that triggering specific workflows or toggle between views. Today we’d love to share some new code with you and introduce a powerful Custom Button feature that can deploy one or several buttons inside your calendar.

Check out this video to learn more:

These new buttons join three kinds of buttons/actions already in DayBack.

You’ve always been able to add buttons to events in DayBack: those operate on a specific event.
DayBack’s custom actions operate when you take action on an event, like dragging it or deleteing it.
And app actions run your own code when the calendar starts up, when you change views, or when you select resources.

Three Display Options for Buttons

Buttons can be configured as a Single Button, as Multiple Buttons, or as a Collapsing Multi-Button Menu.

More Customization Options

In addition to how the buttons are arranged, you can also customize almost every element of your buttons by modifying lines in the AddCustomButton_Part1.js file below. You can customize…

Colors & icons
Text labels
Any custom JavaScript function:
1. Switch to Bookmark
2. Trigger a Custom Filemaker Script
3. Open a custom popover, external page, or service
Show or hide buttons for a particular group of users
Show or hide buttons on specific views

Add This to Your DayBack – Installation Instructions

Getting Started with Custom App Actions:

If you’re new to customizing DayBack using app actions, check out our docs on custom app actions for a library of custom actions and installation instructions.

The Files

The custom app action is made of three elements–please download these here: AddCustomButtons.

AddCustomButton_Part1.js
1. Install as a Before Calendar Rendered app action
2. Modify to configure the buttons, display settings, permissions and button actions
AddCustomButton_Part2.js
1. Install as an After Calendar Rendered app action
2. Leave as is, or modify to hide specific buttons on certain views
AddCustomButton.css
1. Append to your Custom CSS
2. Leave as is

Button Settings

Here are all the settings you can configure for your button. Settings marked with a * are required:

Show Container Setting*
- Always show one or more buttons:
  - showContainer = false;
- Collapse one or more buttons into a Button Drawer:
  - showContainer = true;

Show Container as Open Setting*
- If you are displaying multiple buttons in a collapsed button drawer, you can load DayBack with the button draw open. The user can then decide to hide the buttons if they need later.

Icon *
- Set this specify the icon you want shown for a given button
- Find the icon’s code name on the Font Awesome cheat sheet
- Specify the icon using ‘fa-‘ followed by the icon name:
  - For example: check mark should be specified as fa-check
Label
- Labels are optional, and can be used to describe a button’s action. Labels will show when you hover over a button or open the button drawer if using this feature
Color
- Specify a button’s color in CSS notation (e.g., #FFFFF, or white, or rgb(256,256,256))
- The color is optional. If you omit color, the default blue color will be used
Action *
- Defines the JavaScript function the button should run when clicked. You will need to define each function individually and may use the two sample functions we provided as a basis of writing your own:
  - customButtonAction_goToBookmark()
    - Opens a specific Bookmark ID
  - customButtonAction_goToUrl()
    - Opens a specified URL in a new browser window
Restrict
- Buttons are shown to all user accounts by default, but are not displayed in Shares. If you want to restrict who sees this button, you can specify a JavaScript function that returns true if a button is allowed for a user, and false if it should be hidden
Unique Id
- This field is optional under most circumstances. If you need to show/hide buttons on certain calendar views or custom scenarios, you will need to set up a Unique ID for this button to use in your custom app actions
- The Unique ID is the element by which you will be able to access a button in the DOM
- To specify which buttons show on which view pages, you can modify AddCustomButton_Part2.js to set up custom behavior which changes based on the calendar view shown

Example Configuration

Bellow is a 3-button configuration example. Buttons are listed in the Button List in the order they should be displayed, from bottom to top:

Example Buttons:

Contact Us
- Add a Purple button with Chat icon that opens a specific Url in a new window. Button is available to all users on all views
Sales Workflow
- Add a Blue button with Dollar icon that opens a specific Bookmark. Button shows only for specific users who belong to the Sales team, and shows only on Resource-specific views (custom show/hide configuration in AddCustomButton_Part2.js)
Service Workflow
- Add a Yellow button with Wrench icon that opens a specific Bookmark. Button is available to all users on all views

Configuration as written in AddCustomButton_Part1.js:

inputs.buttonList = [        
    {
        'label': 'Contact Us',                    
        'icon': 'fa-comment',
        'color': '#72009c',
        'action': function() { customButtonAction_goToUrl('https://dayback.com/contact/'); },
    },
    {
        'label': 'Sales Workflow',
        'icon': 'fa-dollar',
        'color': '#3164d2',
        'action': function() { customButtonAction_goToBookmark('1629418383414e4573855796'); },
        'restrict': function() { return restrictButtonAccess('Sales Workflow'); },
        'uniqueId': 'customButton_sales'                
    },
    {
        'id': 'customButton_service',
        'label': 'Service Workflow',
        'color': '#ffaa00',
        'icon': 'fa-wrench',    
        'action': function() { customButtonAction_goToBookmark('1629418219611u2501683899'); },
    },
 ];

Conclusion

Adding custom buttons can be an easy way to quickly add shortcuts to your schedule. If you’ve found this app action useful, or you’d like it customized for your workflow, please get in touch. We’d love to hear from you.