...
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.
https://dhtmlx.com/docs/products/dhtmlxScheduler/
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.
...
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:
https://www.w3schools.com/css/css3_borders.asp
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 debuggingAny 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.
...
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 barIf you look at the HTML you can see it boils down to a <div> object of class:
...
First off, let’s test adding the CSS to round the corners, by adding the following CSS line right here (you’ll need to ensure you're on the Styles tab in the second row of tabs):
...
Changing the style of an HTML element ad-hocborder-radius:20px;
And look at the bar to see if it’s changed:
...
Freshly rounded appointment!Great! Now we know we’ve found the right CSS class, and the correct CSS property! However, we haven’t changed anything yet, we’ve only changed the CSS properties of that single bar. As soon as we refresh the page, it’ll be back to normal. Now we need to make the change to the CSS document.
Continuing in the browser, click across to the Sources tab, and find the CSS file.
...
Getting to the CSS document in a web browserNow we need to find the CSS class, and change the CSS. Any changes you make will be applied immediately. So we apply the change:
...
Add to the CSS for an appointment barAnd check the bars to see if our change has taken:
...
Nothing seems to have changed…No sale. That’s ok, sometimes this happens. CSS is cascading, meaning what we just tried isn’t compatible with a CSS property set further up the chain. We just need to add !important to the property value, this means it will override any inherited properties:
...
Making sure our new attribute has a say
And check the bars:
...
We now have rounded appointments!Success!
The lesson here, if a CSS property doesn’t seem to be taking, try the !important directive.
...
Then find the the dhx_cal_event_line class and change/add the border-radius property like so:
| Code Block |
|---|
.dhx_cal_event_line{ |
...
padding-left:10px; |
...
cursor:pointer; |
...
overflow:hidden; |
...
border-radius: <?Reactor $event_bar_curve Reactor?> !important; |
...
} |
The <?Reactor Reactor?> tags just tell Reactor to interpret everything within, which in this instance is simply a parameter name. This line will grab the event_bar-curve parameter, and by the time it makes it to the web-viewer, will take the place of the Reactor tags.
...