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. We recently upgraded this action to offer new behavior. As before, you can configure buttons directly by editing the inputs.buttonList array in the AddCustomButton_Part1.js file below.

If you’d rather add or remove buttons from your own actions—at runtime, instead of only at startup—you can now do that too, using the button tray’s register() and unregister() functions (more on this below). Either way, you can customize…

1. Colors & icons
2. Text labels
3. Any custom JavaScript function:
   1. Switch to Bookmark
   2. Trigger a Custom Filemaker Script
   3. Open a custom popover, external page, or service
4. Show or hide buttons for a particular group of users
5. Show or hide buttons on specific views, or based on any other condition in the calendar
6. Toggle a button between two states (like an on/off switch) with its own icon, label, and color for each state
7. Add or remove buttons on the fly — from a workflow, a bookmark, or any other action — instead of only defining them up front

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:

• AddCustomButton_Part1.js
  1. Install as an On Startup app action
  2. Modify to configure the buttons, display settings, permissions and button actions using the inputs.buttonList array.
  3. This file is also the button tray library: it sets up the button registry and all of the logic for building, showing, and hiding buttons, so any buttons you register() dynamically from other actions work the same way as the ones listed here (see Button Settings below).
• AddCustomButton_Part2.js
  1. Install as a Before Calendar Rendered app action
  2. Leave as is. This script tells the library to build the button tray.
• AddCustomButton_Part3.js
  1. Install as an After Events Rendered app action
  2. Leave as is. This script re-checks button visibility (for example, showing/hiding a button on certain views) every time events render.
• AddCustomButton.css
  1. Append to your Custom CSS
  2. Leave as is

If Part 1 (On Startup) isn’t installed for some reason, Parts 2 and 3 detect that and simply let the calendar load normally, without buttons and without errors.

Button Settings

There are now two ways to add a button, and you can mix and match both in the same calendar:

• Static configuration — List your buttons as objects in the inputs.buttonList array in AddCustomButton_Part1.js. This is the easiest option if you know all of your buttons up front and don’t need to add or remove them later.
• Dynamic registration — Call tray.register({…}) from any of your own actions, where tray is the button tray object DayBack creates for you (seedcodeCalendar.get('customButtonTray')). You can call register() as many times as you like, from as many actions as you like, and remove a button later with tray.unregister(uniqueId). This is useful when a button should only appear while a workflow is in progress, or when the button’s configuration depends on something that isn’t known until after the calendar has started up.

Whichever path you use, each button is described with the same set of properties. Here are the settings you can configure for each button. Settings marked with a * are required:

• Unique Id *
  • Every button now requires a Unique Id. This is the registry key DayBack uses to add, update, or remove the button, and it’s also the id of the button’s element in the DOM.
• Icon *
  • Set this to 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., #FFFFFF, 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 sample functions provided in the file as a basis for writing your own.
• Restrict
  • Buttons are shown to all user accounts by default. If you want to restrict who sees a button, you can specify a JavaScript function that returns true if a button is allowed for a user, and false if it should be excluded entirely.
• Visible When
  • New setting. Where Restrict is a one-time permissions check, Visible When is re-checked every time events render, so you can show or hide a button based on the current view, filters, or anything else in the calendar—without removing the button from the registry.
• Order
  • An optional number used to control where a button sits in the stack, relative to your other buttons. If not specified, the buttons will display in the order they are added to the button list.
• Toggle
  • A button can also be set up as a toggle, with a different icon, label, and color for its “on” and “off” states, plus a callback that runs whenever the state changes. This is useful for switches like “Show/Hide Weekends.”

There are also two settings that control the button tray as a whole:

• 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 set showContainerAsOpen = true; to load DayBack with the button drawer open. The user can then decide to hide the buttons if they need to later.

This is only a summary of the most common settings. The full list of configuration options and the button tray’s complete API (adding and removing buttons on the fly, toggle buttons, inspecting what’s currently registered, and controlling the drawer programmatically) is documented in the README in the repo.

Example Configuration

Below is a 3-button configuration example, plus a toggle button, 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
• Service Workflow
  • Add a Yellow button with Wrench icon that opens a specific Bookmark. Button is available to all users on all views
• Show/Hide Weekends
  • A toggle button with its own icon, label, and color for the on and off states. Clicking it switches the calendar’s weekends setting on or off.

Configuration as written in the inputs.buttonList array in AddCustomButton_Part1.js:

inputs.buttonList = [
    {
        uniqueId: 'contactUs',
        label: 'Contact Us',
        icon: 'fa-comment',
        color: '#72009c',
        action: function () {
            customButtonAction_goToUrl('https://dayback.com/contact/');
        },
    },
    {
        uniqueId: 'salesWorkflow',
        label: 'Sales Workflow',
        icon: 'fa-dollar',
        color: '#3164d2',
        action: function () {
            customButtonAction_goToBookmark('1629418383414e4573855796');
        },
        restrict: function () {
            return restrictButtonAccess('Sales Workflow');
        },
    },
    {
        uniqueId: 'serviceWorkflow',
        label: 'Service Workflow',
        icon: 'fa-wrench',
        color: '#ffc107',
        action: function () {
            customButtonAction_goToBookmark('REPLACE_WITH_YOUR_BOOKMARK_ID');
        },
    },
    {
        uniqueId: 'weekendToggle',
        toggle: {
            defaultState: 'off',
            off: {
                icon: 'fa-eye-slash',
                label: 'Show Weekends',
                color: '#999',
            },
            on: {
                icon: 'fa-eye',
                label: 'Hide Weekends',
                color: '#4CAF50',
            },
            onToggleOn: function () {
                let config = seedcodeCalendar.get('config');
                config.weekends = true;
                seedcodeCalendar.init('config', config);
                dbk.changeConfigSetting('weekends');
            },
            onToggleOff: function () {
                let config = seedcodeCalendar.get('config');
                config.weekends = false;
                seedcodeCalendar.init('config', config);
                dbk.changeConfigSetting('weekends');
            },
        },
    },
]; 

If you’d rather add a button dynamically instead of listing it in inputs.buttonList, call register() on the button tray from any other action (for example, a Before Calendar Rendered action, or one that only runs for certain users):

// From a separate action, after Part 1 has run:
const tray = seedcodeCalendar.get('customButtonTray');

if (tray) {
    tray.register({
        uniqueId: 'screenshot',
        label: 'Screenshot',
        icon: 'fa-camera',
        color: '#333',
        action: function () {
            // Screenshot logic here
        },
    });
}

// And later, if the button should go away:
// tray.unregister('screenshot');

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.