Starting the calendar on a particular month

Wappler General Need Help
1

Hi,

I'm trying to have the calendar display a monthly view, opened on the first date of a particular dynamic calendar source.
I see that there is a place to put a "Date" which I believe is the starting date here:

image
image371×553 13.1 KB

But the problem is that the date is static. When I click on that field, a calendar opens and forces me to select a date.

In code view, this appears thus:

image
image865×75 6.79 KB

The calendar does open in March, which is OK, but it is now hardcoded, which is not what I need.

Is there any way to make this date dynamic, i.e., bound to the value of a variable?

Many thanks in advance,

Alex

2

Hi Alex,
I believe you can do this using the Calendar Dynamic Attributes 'Date' selector:

Screenshot from 2024-05-24 16-55-33
Screenshot from 2024-05-24 16-55-33533×627 61.6 KB

At the same time you may also wish to add the 'Date and Time' Component as well, then you can use this to specify the start date (month etc) dynamically:

Screenshot from 2024-05-24 17-00-38
Screenshot from 2024-05-24 17-00-381211×713 58.6 KB

1 Like
3

Works like a charm.
Thank you so much!!!

Would you happen to know how to control the previous and next buttons in the calendar, so the calendar does not move beyond certain months?
For example, if I'm showing January, I want to disable the previous month button so I cannot go to December of the previous year, and if I'm showing December, I want to disable the next month button, so I cannot go to January of the next year.

Thx again,

Alex

4

In this case I'd just use a little CSS and hide the buttons themselves.

<style>
    .fc-prev-button {
        visibility: hidden;
    }

    .fc-next-button {
        visibility: hidden;
    }

    .fc-today-button {
        visibility: hidden;
    }
</style>

You are very welcome Alex! :slight_smile:

5

Hi,
I am not sure I understand two things:

  1. Does that code go in the page? If so, where?
  2. How does the portion that hides the .fc-prev-button get activated when the calendar is showing January but not when it is showing other months?
  3. Where did you find this info? In other words, how do you know about the .fc-prev-button, etc.

Many thanks!!

6

Just place it in the page itself or in to your style.css file (removing the style tags in this case).

That bit will figure out for you, but using the same Date and Time Component you could probably implement it using Dynamic Classes/Styling on the calendar DIV itself. I'm just about to go out to grab some food so will have to run through that a little later unless one of the other fine Community members gets there first.

We use custom styles across all of our calendars and it is very well documented on the official Fullcalender website and is standard for those wishing to style their respective implementations.

7

Hmmmm appears this is a little more complicated than I initially thought, certainly a brain scrambler... Have tried numerous ways but no success yet. Any other bright sparks out there have an idea how to help this man out?

:slight_smile:

8

Hi!
I'm not sure if this helps at all:

Unfortunately, I am not a programmer, and so I don't know how to use what is in here and integrate it into a web page created with Wappler.

Any pointers will be appreciated!

Thank you all in advance,

Alex

PS: I changed the title of this thread to reflect the evolution of the conversation.