// functions used by the calendar
js/itwebexperts_payperrentals/datepick/calendarFunctions.js

// global require js file used for loading js files 
js/itwebexperts_payperrentals/utils/frontendApp.js

// require js file used on frontend calendar
js/itwebexperts_payperrentals/utils/app.js

// loads the calendar
app/design/frontend/base/default/template/payperrentals/calendar/global_calendar.phtml

1. Requirejs and settings are loaded in the app/design/frontend/base/default/template/payperrentals/html/header.phtml file which is loaded on every page. The file for settings is js/itwebexperts_payperrentals/utils/frontendApp.js

2.  Extra templates are added to the product page using the layout xml file app/design/frontend/base/default/layout/payperrentals.xml note the line <block type=”payperrentals/catalog_product_view_rental” name=”product.info.payperrentals” as=”product-rental” template=”payperrentals/catalog/product/view_rental.phtml”> and <block type=”payperrentals/catalog_product_view_price” name=”product.info.payperrentals.price” as=”product-price” template=”catalog/product/price.phtml”/> this adds the calendar and pricing templates.

3. app/design/frontend/base/default/template/payperrentals/catalog/product/view_rental.phtml this file loads the price, and loads the calendar:

<?php echo $this->getCalendar(); ?>

this in turn loads a block and template file app/design/frontend/base/default/template/payperrentals/calendar/global_calendar.phtml this template file loads a ton of variables using the app/code/community/ITwebexperts/Payperrentals/Helper/Config.php helper.

4. app/design/frontend/base/default/template/payperrentals/calendar/global_calendar.phtml further down in this file, you’ll see it loads some more JS using require.js:

<script type="text/javascript" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS) .'itwebexperts_payperrentals/utils/app.js'; ?>"></script>

5. Disabled dates use AJAX to update the calendar. This is done with the function updateBookedDates in /js/itwebexperts_payperrentals/datepick/calendarFunctionsFrontend.js

    $(currentCalendar).find('#qty').change(function () {
        updateBookedDates();
        updateInputVals();
    });

    // trigger quantity change on initial page load so that intial
    // booked dates and inputvals are set
    $('#qty').trigger('change');

The updatebookeddates() function is in js/itwebexperts_payperrentals/datepick/admin/calendarFunctions.js this function calls our ajax controller here: app/code/community/ITwebexperts/Payperrentals/controllers/AjaxController.php and passes in an array of product ids and quantities. This ajax controller returns an html array of booked dates using our main function getBookedQtyForProducts in app/code/community/ITwebexperts/Payperrentals/Helper/Inventory.php to get booked dates array.

6. How is the calendar attached? js/itwebexperts_payperrentals/datepick/calendarFunctions.js note the line:

$('.readStartDate,  .readEndDate').mousedown(function (event) {

and further down in that listener, the createcalendar function is run:

createCalendar();

7. Dates are added to cart using Magento custom options. app/code/community/ITwebexperts/Payperrentals/Helper/Rendercart.php the prepareForCartAdvanced function.

8. After order is placed an observer is called sales_order_place_after (defined in the app/code/community/ITwebexperts/Payperrentals/etc/config.xml file) which calls the observer’s reserveInventory function. This in turn references the helper function which reserves inventory.