Fullcalendar as part of a Drupal trade order

Question

I am building an electronic store in Drupal 7 using a set of Commerce modules. The store offers daily logistics services.

One part of the verification process is to show the user the availability calendar for this service. The days when the service is available should be displayed, and the user should be able to select the day as part of the checkout process and go to the next verification screen.

I would like to use the Fullcalendar script to display daily availability for the user:

http://arshaw.com/fullcalendar/

Drupal has a corresponding plugin:

https://drupal.org/project/fullcalendar

I can display a regular full calendar page on my site. The part I'm really stuck with is to create the fullcalendar panel as part of the validation process and keep the user's selection in order.

I tried the Commerce Extra Scale module to add a calendar:

https://drupal.org/project/commerce_extra_panes

However, I did not succeed. I cannot determine how to display the fullcalendar block as a panel.

I read the documentation for trading Drupal, the fullcalendar module and the additional panels module for commerce, but I still can’t figure out how to display fullcalendar as a panel. I also tried creating a custom module, but I cannot figure out how to programmatically output fullcalendar.

Has anyone done this before? Is there a way to add this functionality to the verification process through these modules, or should I write it all myself from scratch?

Answer 1

I sat down and looked at it again, and found a way to implement this.

At first I tried to use the fullcalendar Drupal plugin, but it turned out to be unnecessarily complicated for this particular function, plus it was not entirely clear how to add the fullcalendar plugin output to the panel. In addition, additional trading opportunities were not useful in this case either.

So here is what I did:

1) I created a module in which I set up a user panel. Here is the part of the module that configured the trade verification panel:

function custom_checkout_commerce_checkout_pane_info() { $panes = array( 'custom_checkout_date' => array( 'title' => t('Select a date'), 'base' => 'custom_checkout_date_pane', 'page' => 'route_date', // default checkout page 'weight' => -5, 'file' => 'includes/pane_route_date.inc' // Form functions ) ); return $panes; } 

Here, what is included in the panel:

 function custom_checkout_route_date_pane_checkout_form($form, &$form_state, $checkout_pane, $order) { $pane_form['route_calendar'] = array( '#type' => 'container', '#id' => 'route_calendar' ); $pane_form['selected_date'] = array( '#type' => 'hidden', '#id' => 'selected_date' ); return $pane_form; } 

The hidden field "selected_date" stores the result of the calendar, which is then added to the order.

Then I added fullcalendar to the Drupal library folder and added it to the page where the fullcalendar panel is located using drupal_add_js .

Then I created an AJAX callback page, which is used to return the available dates that match the parameters specified in the order by the customer.

Then I added a click handler for each event, overriding the Fullcalendar eventClick callback . Thus, when a user clicks on an event, he sets the date of the event in a hidden field and sends the current trading verification area, moving to the next one.

So I finally figured out what to do, but it took a lot of work to do, and many of the parts I did were not well documented or had any good examples:

In any case, the problem in this matter is now resolved, I hope this helps anyone who is trying to solve the same (or similar) problems with the Drupal checkout part.