availabilityView setting ignored, only showing day

[chuckhacker]

Upon load, the view being shown is not correct, it looks like it is showing "day" instead of week" despite setting to availabilityView to 'agendaWeek' as shown.

Here is my config:

        window.timekitBookingConfig = { 
          widgetId: 'BLAH',
          availabilityView: 'agendaWeek',
          callbacks: {
            submitBookingForm: function(values) {
              console.log("submitBookingForm");
              analytics.track("ScheduleClass", {});
            } 
          }
        }

For my use case, we need to show the week because our classes we are hosting are scheduled on a weekly basis.

Screenshot showing problem:
https://i.imgur.com/UGLKPXg.png

Sometimes, we noticed, that much later on after the page loads (> 30 seconds), the view "switches" to the correct week view. Not sure what is happening there?

I'm using the latest booking.js file from the dist folder on GitHub. Any ideas how we can show the weekly view instead of the daily view as intended?

[chuckhacker]

If it helps, here is our site, which has the issue:

https://block.school/

Note that oddly enough, our other pages work (show the current "week" view instead of "day" view):

https://block.school/pricing
https://block.school/parent-demo

Thank you so much for looking into this for me!

[curlywurlycraig]

Hi @chuckhacker I know this is late but I think I might know why this is. The correct view will show on resize. It's likely that when your calendar first initialises it has a width less than 480 (https://github.com/timekit-io/booking-js/blob/master/src/main.js#L382), so it is being set to the day view. I had this problem and it was because I was only displaying the calendar when a button was clicked (thereby having an initial width of 0).

[curlywurlycraig]

You can fix it by setting the width of your targetEl (default #bookingjs) to be more than 480 within your css. Or alternatively as I did, you can set the width of the element to an arbitrary value above or equal to 480 before you load the timekit widget. A good time to do this would be when you configure the timekit widget.

E.g.

// manually set the width of the container element so that it isn't 0 when it initialises
// https://github.com/timekit-io/booking-js/issues/148
const bookingContainer = document.querySelector('#bookingjs');
bookingContainer.style.width = "800px";

window.timekitBookingConfig = {
  app:      'your-app-name,
  ...
};

[laander]

@curlywurlycraig (Cc @chuckhacker )
You are correct, good catch. Unfortunately it's a restriction of the FullCalendar library that were using, i.e. it's out of our hands. The best approach is, as you describe, to force the parent to a larger width than 480 before initialization OR simpy make sure to only init booking.js when the parent is visually visible (and therefore has a width larger than 0)