訪問者の予約手続き時に進捗度を予約カレンダーに表示する方法を紹介します。

このページはナビゲーションを表示するためのJavaScriptとCSSをサンプルコードを記載していますが、デザイン性などは考慮していませんのでご了承ください。また、JavaScript及びCSSのサポートは行っていませんので自己責任でご利用ください。また、下記のサンプルコードはBooking Package > 一般設定内のJavaScriptタブとCSSタブ以外では動作しませんのでご注意ください。

JavaScriptのサンプルコード

/*globals bookingPackageUserFunction */
window.addEventListener('load', function(){
    
    var navigationsPanel = document.createElement('div');
    navigationsPanel.id = 'booking_navigations_panel';
    var navigations = {calendar: '日付の選択', services: 'サービスの選択', schedules: '時間の選択', form: '個人情報の入力', confirm: '入力内容の確認', complete: '予約完了'};
    for (var key in navigations) {
        
        var navigation = document.createElement('span');
        navigation.id = 'navigation_' + key;
        navigation.classList.add('navigation');
        navigation.textContent = navigations[key];
        navigationsPanel.appendChild(navigation);
        
    }
    
    var rootPanel = document.getElementById('booking-package-locale-ja');
    rootPanel.insertAdjacentElement('beforebegin', navigationsPanel);
    
});

window.addEventListener('bookingPackageUserFunction', function() {
    
    bookingPackageUserFunction.notification(function(eventName, yourCalendarID, uniqueID) {
        
        console.log(eventName);
        changeBookingNavigation(eventName);
        
    });
    
});

function changeBookingNavigation(eventName) {
    
    var navigationsPanel = document.getElementById('booking_navigations_panel');
    if (navigationsPanel != null) {
        
        var navigations = navigationsPanel.getElementsByClassName('navigation');
        for (var i = 0; i < navigations.length; i++) {
            
            navigations[i].classList.remove('focus');
            
        }
        
        if (eventName == 'displayed_calendar') {
            
            document.getElementById('navigation_calendar').classList.add('focus');
            
        } else if (eventName == 'displayed_services') {
            
            document.getElementById('navigation_services').classList.add('focus');
            
        } else if (eventName == 'displayed_schedules') {
            
            document.getElementById('navigation_schedules').classList.add('focus');
            
        } else if (eventName == 'displayed_booking_form') {
            
            document.getElementById('navigation_form').classList.add('focus');
            
        } else if (eventName == 'displayed_booking_confirmation') {
            
            document.getElementById('navigation_confirm').classList.add('focus');
            
        } else if (eventName == 'displayed_booking_complete') {
            
            document.getElementById('navigation_complete').classList.add('focus');
            
        }
        
    }
    
};

CSSのサンプルコード

#booking_navigations_panel .focus {
    
    color: #FFF;
    background: #e91e63;
    border-radius: 3px;
    border: none;
    font-size: 16px;
    font-weight: normal;
    
}

#booking_navigations_panel .navigation {
    
    padding: 0.5em;
    
}