Full Calendar Initialisation size issues

psweb · October 27, 2021, 8:49am

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.

psweb · October 27, 2021, 9:05am

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

bpj · October 27, 2021, 9:05am

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

psweb · October 27, 2021, 9:09am

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.

Dave · October 27, 2021, 9:11am

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.

psweb · October 27, 2021, 9:15am

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.

psweb · October 27, 2021, 9:18am

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.

Dave · October 27, 2021, 9:23am

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!

psweb · October 27, 2021, 9:47am

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.

Dave · October 27, 2021, 10:12am

@psweb thanks for sharing, that’s perfect.

psweb · October 27, 2021, 10:15am

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.

psweb · October 27, 2021, 11:00am

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>

Dave · October 27, 2021, 11:20am

Cheers Paul!

psweb · October 27, 2021, 12:42pm

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.

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.