Restructuring Calendar Heading

[wezetel]

If buttons are selected as the navigation style in the presentation settings on small devices horizontal scrolling is necessary.
So my idea was to move the middle part of the header (date) on top of the navigation elements. So I wrote my first JS-function ever :

/* move title */
FabFC.moveTitle = function () {
let x = document.getElementsByClassName("fc-toolbar-chunk");

x[0].id="left";
x[1].id="middle";
x[2].id="right";

document.getElementsByClassName("fc-header-toolbar")[0].style.display = "block";
let navis = document.createElement("div");
navis.id="navis";
navis.style.display="flex";
x[0].appendChild(navis);
navis.appendChild(x[0]);
/* as previous statement already move "left" away from fc-header-toolbar, "right" is now called with [1] */
navis.appendChild(x[1]);
}

But I don't have any clue, how this function can be called and in consequence, I don't know, if it is working.
Any help?

 

[achartier]

@wezetel you should connect with @elmarra as he is doing a lot of work with the css and such for fullcalendar.

 

[elmarra]

To get a view suitable for even the smallest screens when buttons.
We can do it like this:

@media (max-width: 764px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

The result is this:

And I think it's the best solution.
Why moving the title up.
we will see like this:


I prefer the first

Obviously trying to center the text and buttons in order to have a more elegant and tidy view

 

[wezetel]

My idea was breaking up the flex-group in order to have the date on top and the navigation buttons (date selectors and view selectors) on one line.
But for sure your proposed solution is also an option.
I would prefer to have the view selectors on top and the date selectors underneath the date. So a css code like this (for sure there is some more room for improvement):

@media (max-width: 764px) {
.fc .fc-toolbar {
flex-direction: column-reverse;
align-items: center;
justify-content: center;
}

 

[achartier]

Based on the above screen grabs, can I assume that the language strings are not being applied to the weekdays and months? I didn't test this.

 

[elmarra]

Based on the above screen grabs, can I assume that the language strings are not being applied to the weekdays and months? I didn't test this.

Yes, but it's a problem with my template (helix ultimate)

 

[wezetel]

You are correct. This is how it looks in German:

Regarding the help text: there is just no translation available in the German Language file.

But what bothers me more is the time presentation in the simple modal which is different than the details view:




I'm using Cassiopeia on this test site

 

[elmarra]

well of course mine was just an example, and a quick "solution".
it's obvious that things can be refined and improved

 

[elmarra]

My idea was breaking up the flex-group in order to have the date on top and the navigation buttons (date selectors and view selectors) on one line.
But for sure your proposed solution is also an option.
I would prefer to have the view selectors on top and the date selectors underneath the date. So a css code like this (for sure there is some more room for improvement):

@achartier I was wrong, I thought it was the helix problem, (there is a fix for them on git), applying it to J calendars! are translated.
FC but no, they remain in English.
So it is not due to the template, but to FC

 

[achartier]

The FC does load language specific translations, but I did not test it. I will do so.

 

[troester]

Time presentation:
Details is Fabrik details view = element settings
Simple popup is FC settings.

But it should be the same time even if the format may be different.
There are timezone issues resp. issues with setting the date default.

But better open a new thread about the time setting issues.