When we were looking to Reload Reactor, one of the first cabs off the rank was finding a good JavaScript library to build a new calendar with a modern interface. We weren’t looking long before we stumbled upon the dHTMLx suite of libraries, in particular the Scheduler.
It looks great just out of the(black) box, but as FileMaker developers, we’re all accustomed to the ability to customise the heck of whatever we build. This article demonstrates how to customise a demo BlackBox, to seamlessly integrate it into your FileMaker application.
A BlackBox is basically a web-page, and is typically comprised of the following:
JavaScript library, in this instance dHTMLxScheduler
HTML document, defines the structure of the web-page and how the library communicates with FileMaker
CSS, defines the look and feel of the BlackBox
This article concerns just the CSS document. The first part will examine hard-coding a change to the CSS, and the second part of the article will tip its toes in a bit of dynamic Reactor jazz.
Part 1 - Customise the CSS
The xScheduler calendar has appointments with square corners, but maybe you want them to have rounded corners?
You don’t need to be a CSS pro to do this. So how do you know what you need to change to get it looking the way you want, and what do you change it to? We can do this with a little help from our friends; a web browser, and any web-search engine.
First off, let’s find out how to add rounded corners to CSS objects. A quick web-search tells us to use the border-radius property:
Now we know what we need to change, we just don’t know where to change it. This is where the web browser comes into play.
A useful feature of Reactor is the ability to enter debugging mode. To do this, evaluate the following function in your WebViewer:
Turn on Reactor debugging
Using Reactor debugging
Any Reactor BlackBoxes inside WebViewers will show a small Reactor button in the bottom-right corner. You can use this to debug error messages, or more importantly, open the BlackBox in a web browser.
A quick note, these instructions and screenshots relate to Google Chrome. Other Web Browsers will have slightly different names for these areas, but you should be able to figure out how to get there along similar lines.
We are looking to change the style of the Calendar appointment objects. To do this we need to find out what CSS element we need to change. So right-click on one of these appointment elements, and choose‘Inspect’.
This gives us:
HTML for a single bar
If you look at the HTML you can see it boils down to a <div> object of class:
Part 1 - Customise the CSS