Print Your Calendar at a Custom Size

If you need to print or save an image of your calendar, you can take screenshots and print them right now. But most of the time you will want to print more events than will fit on your screen at once. 

To overcome your monitor’s size limitation, we’ve created a new Custom App Action which allows you to take a screenshot of the calendar in any number of custom sizes. If you need to print a high-quality version of the calendar for display in your field office, this Custom App Action will add a button to the calendar allowing you to do that. (If you like the idea of scripting your own custom buttons, check out this blog on adding your own custom buttons to the calendar.)

Here’s what this looks like in action:

Options

Because not everyone needs screenshot printing capability, you can show the button only for specific users, and specific views. Other customizations include:

1. Automatically take a screenshot of the calendar based on a preconfigured set size as soon as you click the button
2. Prompt the user to select from a pre-configured list of custom sizes, or
3. Prompt the users to specify their own custom size right from the screenshot dialogue box.

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. 

Installation Instructions

The custom app action is made of three parts. Click here to download the code for this app action. 

• TakeCalendarScreenshot_Part1.js
  1. Install as a Before Calendar Rendered app action
  2. Modify to configure custom sizes and set up permissions
• TakeCalendarScreenshot_Part2.js
  1. Install as an After Calendar Rendered app action
  2. Leave as is, or modify to hide specific buttons on certain views
• TakeCalendarSreenshot.css
  1. Append to your Custom CSS
  2. Leave as is
• PrintToFileMaker.fmp12 – FileMaker Only
  1. Open the file and follow the instructions to copy the required field and script to your file

Configuring the Action’s Screenshot Settings

• Screenshot Default Size:
  • You can select the default screenshot width and height in pixels. 
  • If you don’t specify any other settings, the button will automatically generate a screenshot of this size
• Screenshot Time Delay in Seconds:
  • We load the custom size of the screenshot in a hidden window, which requires that DayBack reload all the events that will fit on the specified canvas size. If you are using very large screenshot sizes and you have a lot of events you need to load, you may need to increase the default 10-second timeout
• Screenshot Size Options
  • You can specify a predefined list of custom size options. When the button is clicked, the user will be asked to select from the available options. Here’s an example of three options:
    • Standard = 1900 x 1200
    • Landscape = 3000 x 1000
    • Portrait = 1200 x 3000
• Allow Custom Sizes
  • Enable this option if you are comfortable letting the user specify their own custom screenshot size in pixels. 
  • This is often the best way to start when determining what screenshot size options will be optimal for your workflow. Once you narrow down what works for you, you can set these sizes up as standard options for quick selection in the future
• Hide Elements in the Screenshot
  • If you are printing a screenshot, you likely don’t need certain on-screen elements to be displayed. The default configuration will hide the top menu bar and navigation, so all you see is the calendar view. If you need to add or modify the screen print to remove additional elements, you can specify the list of CSS class names that this app action should hide.
• FileMaker – Rename save screenshot script
  • If you change the name of the FileMaker script for saving the screenshot, specify the new script name under inputs.fileMakerSaveImageScript on line 120.

Setting Up the Buttons

Here’s the full list of settings you can configure for your button. Settings marked with a * are required:

• 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

// Select default screenshot width and height in pixels

inputs.screenshotSizeDefault = {
    width: 1900,
    height: 1200
};

// Screenshot will be taken automatically after a 10 second
// delay. We load the larger Canvas in a hidden window which 
// requires that DayBack reload all the events for that 
// Canvas size. If you are using very large screen shot sizes
// and you ahve a lot of events, you may need to increase
// this timeout for your organization

options.screenshotTimeDelayInSeconds = 10;

// Ask User for Custom Sizes
// -------------------------
//
// If you do not wish to allow the user to select a screenshot 
// size, please omit this setting, or define it to null
//
//    inputs.screenshotSizeOptions = null;
//
// Otherwise, define multiple custom sizes as follows:

inputs.screenshotSizeOptions = {
    Standard:  { width: 1900, height: 1200 },
    Landscape: { width: 3000, height: 1000 },
    Portrait:  { width: 1200, height: 3000 }
};

// If you would like the user to be prompted to provide
// a custom size in Pixels, please turn this setting to 
// true.

inputs.screenshotAllowCustomSize = true;       

// Optionally, you may wish to hide certain display elements 
// in screen shots. This default list will hide the screen shot 
// button and top navigation portion of the page

inputs.hideElementsInScreenshot = [ 'calendar-button-container', 'navigation', 'btn-toolbar' ];

Conclusion

Adding custom buttons like this one can be an easy way to quickly add powerful new features. If you’ve found this app action useful, or have questions about customizing it for your workflow, please get in touch. We’d love to hear from you.