Hi,

I've used this great module for a few months and it used to work fine.

For some reason however, I am no longer able to select any dates in the viewport. When I select a state, then hover over some dates with the mouse, the cursor doesn't change and I'm not able to click on anything. The calendar basically just shows text now.

I'm guessing this is linked to jquery somehow, but I've tried changing the jquery version and this makes no difference. I'm not getting any error messages in Firebug or in my site's error log.

Do you have any suggestions?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

fietserwin’s picture

Despite the fact that you are not seeing messages in firebug, I think it is some javascript problem after all. Clear the js cache, try it without aggregation. See if the appropriate js files from this module get loaded and if they run as expected.

bluesman2014’s picture

Hi fietserwin, thanks for your reply. I removed the aggregation (both for js and css) and cleared the cache several times.

Now I can see the js files are loaded (availability_calendar.edit.js, .js, .view.js. and .viewport.js) but I still can't make any selections in the calendar. Any idea why they wouldn't be running as expected?

(By the way, the previous and next months buttons work as expected though - the months scroll)

fietserwin’s picture

Apparently the js works, at least partially.

Other possibilities:
- it works but it is a styling problem only: colors and mouse appearance are defined ib css, not js. Please check if you have defined the custom styles file via administration - content authoring - availability calendars - styling (admin/config/content/availability-calendar/styling), that it has been created (public://availability_calendar/availability_calendar.css and its rtl version), and that it does get loaded.
- js works only partially: can you set some breakpoints on the code in ...edit.js, e.g. Drupal.availabilityCalendar.Editor::init() and Drupal.availabilityCalendar.Command::start() and addDate() and see if they get executed correctly.

bluesman2014’s picture

Thanks again for the suggestions.

-The availability_calendar.css is definitely loading fine and it's showing a couple of colours I changed in the UI (for example, the class ".cal-av, .cal-av > div" is coming through with the background-color I selected in admin/config/content/availability-calendar/styling).
Looking at the file availability_calendar.base.css which is loading too, there are no elements on my page which match the class ".cal-selectable". Presumably the dates should have that class though, right? When I move the mouse over dates, I get the text-selection cursor.

-I set some breakpoints at the points you mentioned but I can't tell if they're executing correctly, as I'm not entirely sure what I should be looking for. Here's what I see in the 'Breakpoints' section of Firebug:

js

These functions all worked fine until quite recently, so has something changed in a recent update?

fietserwin’s picture

Then try to find out why the cal-selectable class is not assigned. It should be set, in js, to all current and future days table cells. Set a breakpoint at the code where it is assigned, where it is called, etc higher up, just until you find out where and why that code is not executed.

And no, the js has not recently been changed and it is still working for me and many others as this is key to this module and nobody else is complaining.

bluesman2014’s picture

Hi again, I've been going through the code for hours and my apologies for my lack of experience in this area.

To be clear, I'm looking at the edit side of the calendar, where you can select the state and assign it to certain dates. I've included an availabilty calendar field in a profile2 so that the user can specify their availability.

Unless I'm mistaken, it's the function initSelectable (on lines 112-132 of availability_calendar.view.js) which determines whether a day becomes selectable by the user. The if statement on lines 119-121 always returns false because the select mode is "available" and "calendar.isAvailable(day)" returns false. Therefore the "cal-selectable" state doesn't get added.

          if (viewSettings.selectMode === "all" ||
              (viewSettings.selectMode === "available" && calendar.isAvailable(day)) ||
              (viewSettings.selectMode === "not-available" && !calendar.isAvailable(day))) {
            that.addExtraState(null, day, "cal-selectable");
            isPreviousSelectable = true;
          }

The only line of code I could find with .addClass("cal-selectable") (on lines 136, 152 and 179) relate to the whole month, not individual dates.

I suspect I'm missing something and again I apologise for not being anything close to a js expert.

fietserwin’s picture

In edit mode (widget of a field), the selectMode should be "all". Tracing this back in PHP code I see the following trace:

- availability_calendar_add_calendar_view_js(...) $settings contains the key 'selectable'
- availability_calendar_add_viewport_js($variables) $variables contains the key 'settings', which contains the key 'selectable'
- theme_availability_calendar_viewport($variables) $variables contains the key 'settings'
- theme availability_calendar_viewport is (indirectly) called from availability_calendar_field_widget_month_form() that initializes the settings as $settings = $instance['widget']['settings'] + $instance['settings'] + $field['settings'];

However, none of these settings does have a key 'selectable' as that only appears in the formatter settings of the field ('selectable' not set means that selectMode will be set to "all").

Apparently, in your case, 'selectable' is set at that point. Can you please check and save all settings for you field (instance settings, formatter settings and widget settings). If that does not help, have a look at the database (table field_config_instance, column data) and see if this key 'selectable' appears somewhere.

osman’s picture

I am experiencing a similar issue here.

I have one set of fields of Availability Calendar and Availability Calendar Booking formlet defined in a custom bean type.

When I view the page, I noticed 's ID is availability-calendar-booking-formlet-form-2 as there was another availability-calendar-booking-formlet form on the page.

Real strange thing is with Drupal.settings JavaScript object. Try this on browser's console:
Drupal.settings.availabilityCalendar.bookingFormlets

When logged in as user #1, I get 2 settings obj.

screen shot

But when I try the console again, while logged in as a simple authenticated user, I get only one settings obj for availability-calendar-booking-formlet-form-1

screen shot

But the
ID actually is availability-calendar-booking-formlet-form-2. So, lack of correct JavaScript settings make the calendar unusable. Even though table cells are selectable class="cal-av cal-selectable", they are not really selectable.

At one point I had a calendar field, I deleted the field and started from scratch. So my current calendar ID is 2 (cid). But I don't understand why the form would use a different ID, and JavaScript settings objects do not match for user # 1 and an authenticated user. Remind you, calendar is available to all authenticated users.

fietserwin’s picture

Well, the booking formlet and the calendar are different objects, so can have different IDs. Decoupling these allows to have multiple calendars and multiple booking formlets on a page. Which formlets are linked to which calendars (i.e: should react to its events ) is defined by the cids array property.

This way we can e.g. have:
- A View that displays calendars with 1 booking formlet per item
- An entity with multiple calendars (1 accommodation with multiple rooms) with 1 booking formlet
- Or even a listing (Drupal home page) of the former situation.

However, this does not explain the difference between logged in and not logged in users. BTW: doesn't it work for both types of users or is it only 1 type of users who cannot select dates?

osman’s picture

Well, user #1 can select dates, since Drupal.settings.availabilityCalendar.bookingFormlets object has settings for both form-1 and form-2.

But the users in authenticated users role cannot select dates; bookingFormlets object has only settings for form-1, but the rendered form has the ID of form-2.

osman’s picture

I used XDebug to understand what was going on.

I place breakpoints inside availability_calendar_booking_formlet_form_inc() and availability_calendar_booking_formlet_form()

I realized the form was called twice. That's why I was getting <form id="availability-calendar-booking-formlet-form-2" />

Now, I don't think this is the intention of the module.

I set up the fields in a Bean block type, so the calendar and the form are displayed in a block. I wonder if this is happening because the form is rendered inside a block rather a node page.

If anyone interested, or having similar set up and experiencing the same issue, here is my ugly solution, until it is fixed properly. I had to hardcode the settings:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'availability_calendar_booking_formlet_form':
      drupal_add_js(array(
        'availabilityCalendar' => array(
          'bookingFormlets' => array(
            'availability-calendar-booking-formlet-form-2' => array(
              'formId' => "#availability-calendar-booking-formlet-form-2",
              'cids' => array(0 => '1'),
              'bookedState' => '4',
              'singleDay' => TRUE,
              'displayDuration' => '',
        )))), array('type' => 'setting'));
      break;
  }
}
fietserwin’s picture

Can you determine why it is called twice, or at least via which stack traces. It might help if you can publish them here.

fietserwin’s picture

Status: Active » Closed (cannot reproduce)

I am currently going through the issue queue and am closing old issues that have not had any response since long. Please feel free to reopen if you are still experiencing the problems, providing as much of the requested details as possible.