Full Calendar Initialisation size issues

Wappler General
#1

I have a multi step type form
It starts off with a radio button page, depending on what the user clicks it then shows my event calendar

<dmx-value id="var_which_page" dmx-bind:value="0"></dmx-value>

<div class="row mb-5" dmx-show="var_which_page.value == 0">
    <div class="col-12 p-5 text-center rounded">
        <h3 class="text-white mb-5">Do you want to book now?</h3>
        <div class="row">
            <div class="col-6">
                <div class="bg-white rounded py-3">
                    <input class="form-check-input m-0 p-0 border-3" type="radio" value="Book" id="radioBook" name="radioBook" dmx-on:click="var_which_page.setValue(2);radioDone.select(false)">
                    <label class="form-control m-0 border-0" for="radioBook">Book Now</label>
                </div>
            </div>
            <div class="col-6">
                <div class="bg-white rounded py-3">
                    <input class="form-check-input m-0 p-0 border-3" type="radio" value="Done" id="radioDone" name="radioDone" dmx-on:click="var_which_page.setValue(1);radioBook.select(false)">
                    <label class="form-control m-0 border-0" for="radioDone">Book Later</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-5" dmx-show="var_which_page.value == 2">
    <div class="col-12 p-5 text-end rounded">
        <dmx-value id="varEventClicked"></dmx-value>
        <dmx-calendar id="phCal" timezone="UTC" view="timeGridWeek" hide-non-current-dates="true" no-fixed-week-count="true" dmx-on:eventclick="sc_how_many_already_booked.load({event_start_selected: $event.event.start});" event-order="start,-duration,title">
            <dmx-calendar-source id="calSrc" dmx-bind:events="sc_calendar_events.data.query_events" event-start="adt_StartDateTime" event-end="adt_EndDateTime" event-title="" event-id="adt_id" color="#000"></dmx-calendar-source>
        </dmx-calendar>
    </div>
</div>

When the user clicks book now and the calendar shows the size is wrong like it has not initialised.
If i make the calendar shown all the time then its perfect, it just does not seem to like showing a calendar that was previously hidden.

Anyone got any ideas.

Calendar rendering problem
#2

Small Update, in my console if I do this then it looks great again
dmx.parse('content.phCal.updateSize()')

#3

When toggling Calendar visibility, you have to initiate an updateSize. I use a simple JS function that I call on click of the button that toggles the visibility. Also useful if the calendar is on a modal that isn’t shown when the calendar is rendered.

function resizecalendar(el) {
    dmx.parse(el + '.updateSize()');
}

You could use the onUpdated dynamic event for the variable to trigger it sending the ID of the calendar element as a parameter

1 Like
Issue with Calendar component display
#4

Wonderful, thank you, that worked like a charm.

I wish there was a dmx-on:shown="" event like there are for modals, but adding it to the dmx-on:updated="" did the trick.

#5

This can be done via a Dynamic Event. Maybe add the Dynamic Event on click to Update Size (available in the data picker under calendar). Few other options there too.

:wink:

1 Like
#6

I did it with the built in Dynamic Event, I did find it there after adding the on updated, I also had to add phCal.today() to update my events or they all looks like massive blocks.

1 Like
#7

I know I am taking my own topic, off topic, but while I am at it, anyone know how to disable the previous button when less than today, and the next button when greater than today + 2 weeks.

#8

Tried to do this recently and spent too much time on it so skipped past it for now, something to go back to, so interested to hear of any work-around…

Being able to set a minimum date would be great, as with a date picker. Couldn’t figure it out though!

:slight_smile:

1 Like
#9

Ok figured this out @Dave, be warned it’s a Paul workaround, so certainly can be improved upon, lol.

<dmx-datetime id="varToday" interval="days" utc="true"></dmx-datetime>
<style>
    .disable-prev .fc-prev-button {
        pointer-events: none;
        opacity: 0.65;
    }

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

<dmx-calendar id="phCal" timezone="UTC" view="timeGridWeek" hide-non-current-dates="true" no-fixed-week-count="true" dmx-on:eventclick="sc_how_many_already_booked.load({event_start_selected: $event.event.start});" event-order="start,-duration,title" dmx-class:disable-prev="(currentStart < varToday.datetime)" dmx-class:disable-next="(currentEnd > varToday.datetime.addDays(14))">
    <dmx-calendar-source id="calSrc" dmx-bind:events="sc_calendar_events.data.query_events" event-start="adt_StartDateTime" event-end="adt_EndDateTime" event-title="" event-id="adt_id" color="#000"></dmx-calendar-source>
</dmx-calendar>

Now the Previous button simulates disabled and the next button disables after 2 weeks.

2 Likes
#10

@psweb thanks for sharing, that’s perfect.

1 Like
#11

Glad it worked for you, now my last trick on this calendar is to distinguish which event was clicked by changing its colour when its selected.
If I figure it out I will post, but if anyone else already knows how, please share.

1 Like
#12

Ok, figured this one out too if anyone wants to alter colour of the event that was clicked

<dmx-value id="varEventClickedId" dmx-on:updated="phCal.calSrc.refetch()"></dmx-value>

<dmx-calendar id="phCal" timezone="UTC" view="timeGridWeek" hide-non-current-dates="true" no-fixed-week-count="true" dmx-on:eventclick="varEventClickedId.setValue($event.event.id)" event-order="start,-duration,title" dmx-class:disable-prev="(currentStart < varToday.datetime)" dmx-class:disable-next="(currentEnd > varToday.datetime.addDays(14))">
    <dmx-calendar-source id="calSrc" dmx-bind:events="sc_calendar_events.data.query_events" event-start="adt_StartDateTime" event-end="adt_EndDateTime" event-id="adt_id" event-color="(adt_id == varEventClickedId.value) ? '#000' : '#375fa7'"></dmx-calendar-source>
</dmx-calendar>
1 Like
#13

Cheers Paul!

fc_2021-10-27_12-09-49
fc_2021-10-27_12-09-491933×1014 83.4 KB

1 Like
#14

This should be my last question on this poor single thread.

I only have events starting at 9am and ending at 10pm, so to show all the additional times makes the page very long for no good reason.
I have done this to remove all the unwanted times in my css file

[data-time^="00"] > td,
[data-time^="01"] > td,
[data-time^="02"] > td,
[data-time^="03"] > td,
[data-time^="04"] > td,
[data-time^="05"] > td,
[data-time^="06"] > td,
[data-time^="07"] > td,
[data-time^="08"] > td,
[data-time^="23"] > td,
.fc-day-grid {
  height: 0 !important;
  border: 0 !important;
}

[data-time^="00"] > td *,
[data-time^="01"] > td *,
[data-time^="02"] > td *,
[data-time^="03"] > td *,
[data-time^="04"] > td *,
[data-time^="05"] > td *,
[data-time^="06"] > td *,
[data-time^="07"] > td *,
[data-time^="08"] > td *,
[data-time^="23"] > td *,
.fc-day-grid {
  display: none !important;
}

.fc-scroller.fc-time-grid-container {
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
}

Which does what I want.

2021-10-27_14-38-09
2021-10-27_14-38-09828×823 250 KB

Question is can anyone think of a way to get the same result but more dynamically, as with this current solution if an event suddenly starts at 8am for some reason, or ends past 10pm it will break, so any way to do this dynamically based upon what event source earliest start date and latest end date.