Page tree
Skip to end of metadata
Go to start of metadata

This is kind of a crazy one. A user once asked, "I don't like the arrows on the left and right side of my calendar. Is there any way I can have them next to each other?"

We thought about it for a bit, and realized, "Yeah! You can do that!". This customization relies on the ability to put custom HTML on your calendar, and the CSS hooks that localendar exposes. Here are the details:

Step 1: Arrows? What Arrows?

From the Custom Calendar CSS page, we know that the Month-view left and right arrows are assigned the .mal-usr and .mar-usr classes, respectively.

Let's say we want to move the right arrow (.mar-usr) next to the left one (.mal-usr).

Step 2: A little jQuery magic...

localendar uses the jQuery library internally, and you can access it in your custom HTML, too.
Here's the jQuery code to identify the right arrow by its CSS class, and move it over to the right a fixed number of pixels:

<script>$(document).ready(function() {$('.mar-usr').css('position','absolute').css('left','100px');});</script>

That's a little complicated, so let's look at what's going on...
The first thing is the "$(document).ready" bit. This tells jQuery not to execute the rest of the JavaScript until the entire page is loaded. We need this because otherwise we might be trying to move the arrows before the page has been completely parsed.

The next bit of HTML changes the CSS of the .mar-usr class to force the image to appear exactly 100 pixels in from the left margin.

Step 3: Paste the code

We paste the jQuery script into the calendar's Title field field. When the month view is loaded, the right arrow will be in its new location.

Before:

After:

You might have to adjust the exact pixel value to use based on how you are publishing the calendar on your site.

  • No labels