Restricting calendar navigation and available dates

Wappler General Need Help
1

Good morning,
I would welcome some guidance on how to do the following. I read the documentation and could not find how, so any help from this forum would be appreciated:

a. Restrict Calendar Navigation
My calendar uses the “Month” view and the navigation keys let the user move to the previous and to the next months. In my use case, I would like those to keys to allow navigation only within a specific year. So for example, if in my application I am dealing with 2021 events, then the “back arrow” should not allow navigating to December 2020 (the month before January 2021) or to January 2022 (the month after December 2021). Is there any way to do that?

b. Making dates unavailable
I would like to make certain groups of dates not available for user selection. For example, every day between Jan 1 and a specific day. I have a workaround to do that, by configuring the calendar to not allow overlapping events and then creating an event (which I titled “unavailable dates”) on the days I don’t want the user to select. Is there another way to do that, one that would, for example, grey-out the dates and make them “unclickable”?

c. Is there a way to include an icon as part of the title of the event?

Many thanks in advance,

Alex

2

You can do this with a CSS Class Toggle (under Dynamic Attributes within the Calendar configuration). We do this by using a Date and Time variable, set to Days.

Click on App and add Date and Time (use the search box to locate it) and set to days:

dateTime
dateTime792×518 34.6 KB

Add the following (between the dmx-calendar tags), we also called our Date and Time variable varToday so be sure to replace this if you name your variable different to this:

 dmx-class:disable-prev="(currentStart < varToday.datetime)" dmx-class:disable-next="(currentEnd > varToday.datetime.addDays(365))"

You can see we set it not to show the button if its not within 365 days (not greater than), but you can define this as to your specific needs. And the start date is not less than today…

class

1 Like
3

Hi Dave,
thank you for your answer. Unfortunately, I cannot make it work. After adding the statement you indicated, the calendar buttons still let me navigate outside of the boundaries that are set. Am I missing something?

  1. Is it correct to say that the text to be inserted within the <calendar ...> tag shown below:

dmx-class:disable-prev="(currentStart < varToday.datetime)" dmx-class:disable-next="(currentEnd > varToday.datetime.addDays(365))"

should alter the behaviour of the left or right navigation arrow by disabling the when the respective conditions are met?

  1. For my education, from where did you know the information that if I put dmx-class:disable-prev or dmx-class:disable-next would disable the previous and next buttons?

  2. From where did you know the name of the variable currentStart?

Many thanks

4

Question #1 answer, yes within, should have made that clearer, apologies @aschoijett!

<dmx-calendar dmx-class:disable-prev="(currentStart < varToday.datetime)" dmx-class:disable-next="(currentEnd > varToday.datetime.addDays(365))">  </dmx-calendar>

<dmx-calendar-source>
etc etc etc
</dmx-calendar-source>

Would have helped if I included the style (include in the head), in relation to question #2:

<style>
    .disable-prev .fc-prev-button {
        pointer-events: none;
        opacity: 0.65;
    }

    .disable-next .fc-next-button {
        pointer-events: none;
        opacity: 0.65;
    }
</style>

Of course you could lower the opacity even further if you wish, or set a colour or any other styling you wish to display…

And question #3, by default the Date and Time variable will be based on NOW, the moments date and time, of the User. Ie, in my example my Client wants to see forwards 365 days and not back, only events in the future from today.

I do apologise for not including the style addition, was silly of me to forget that, has been one of those days here!

1 Like
5

Hi Dave,
Thank you, this was great.
I added the definitions and everything started working. Minor issue: I wanted to disable the prev button for dates before Jan 1. In the end, I needed to define the currentStart < ‘2022-01-02’ (jan 02) because otherwise it let me go to December 2021 for some reason. I tried <= ‘2022-01-01’ (less or equal) with the same result. Not a big deal-- do you think that this is a bug or is it the expected way?

Also, is there a similar trick to disable dates from being selectable?

Many thanks in advance!

Alex

6

No problem, can't take credit though. as sure it was @brad that devised the idea for this in response to another topic when he was working some calendar styling options out for his Project.

I'm not sure its a bug... What about if you set it to the last day of December? Or...

What you could do is have a column within your database, say for environmental variables for the application/Project, and store things such as the date you wish to assign for the start date of your calendar in a date type, set to 2022-01-02 (and apply this to the class condition), or for that matter any start date you wish to define, thus making the value dynamic, and editable, so for the future you would only have to change this date rather than go back to the calendar and make changes there...

I'm not sure. I've not played with the constraints side, or business hours, but could probably manipulate something there to achieve this..? Or maybe define these dates in your events source and give them a colour and title to show them as unavailable? I think a better option would be to set the 'editable' flag to false within the events data source for the set date, this should work?

Just throwing ideas out there, not sure class based solutions would be optimal for such a task if I am honest.

One or other of the above options should work, more than likely the simplest being specify false in the editable flag would be the best solution..?