src/render.js
function(eventData) {

    utils.doCallback('showBookingPage', eventData);

    var template = require('./templates/booking-page.html');

    var dateFormat = getConfig().ui.booking_date_format || moment.localeData().longDateFormat('LL');
    var timeFormat = getConfig().ui.booking_time_format || moment.localeData().longDateFormat('LT');
    var allocatedResource = eventData.resources ? eventData.resources[0].name : false;

    bookingPageTarget = $(template.render({
      chosenDate:               formatTimestamp(eventData.start, dateFormat),
      chosenTime:               formatTimestamp(eventData.start, timeFormat) + ' - ' + formatTimestamp(eventData.end, timeFormat),
      allocatedResourcePrefix:  getConfig().ui.localization.allocated_resource_prefix,
      allocatedResource:        allocatedResource,
      closeIcon:                require('!svg-inline!./assets/close-icon.svg'),
      checkmarkIcon:            require('!svg-inline!./assets/checkmark-icon.svg'),
      loadingIcon:              require('!svg-inline!./assets/loading-spinner.svg'),
      errorIcon:                require('!svg-inline!./assets/error-icon.svg'),
      submitText:               getConfig().ui.localization.submit_button,
      successMessage:           interpolate.sprintf(getConfig().ui.localization.success_message, '<span class="booked-email"></span>')
    }));

    var formFields = bookingPageTarget.find('.bookingjs-form-fields');
    $(formFields).append(renderCustomerFields());
    
    var form = bookingPageTarget.children('.bookingjs-form');

    bookingPageTarget.children('.bookingjs-bookpage-close').click(function(e) {
      e.preventDefault();
      var bookingHasBeenCreated = $(form).hasClass('success');
      if (bookingHasBeenCreated) getAvailability();
      hideBookingPage();
    });

    if (eventData.resources) {
      utils.logDebug(['Available resources for chosen timeslot:', eventData.resources]);
    }

    form.find('.bookingjs-form-input').on('input', function() {
      var field = $(this).closest('.bookingjs-form-field');
      if (this.value) field.addClass('bookingjs-form-field--dirty');
      else field.removeClass('bookingjs-form-field--dirty');
    });

    form.submit(function(e) {
      submitBookingForm(this, e, eventData);
    });

    $(rootTarget).on('customer-timezone-changed', function () {
      if (!bookingPageTarget) return
      $('.bookingjs-bookpage-date').text(formatTimestamp(eventData.start, dateFormat));
      $('.bookingjs-bookpage-time').text(formatTimestamp(eventData.start, timeFormat) + ' - ' + formatTimestamp(eventData.end, timeFormat));
    });

    $(document).on('keyup', function(e) {
      // escape key maps to keycode `27`
      if (e.keyCode === 27) { hideBookingPage(); }
    });

    rootTarget.append(bookingPageTarget);

    setTimeout(function(){
      bookingPageTarget.addClass('show');
    }, 100);

  }
function(eventData) {

    utils.doCallback('showBookingPage', eventData);

    var template = require('./templates/booking-page.html');

    var dateFormat = getConfig().ui.booking_date_format || moment.localeData().longDateFormat('LL');
    var timeFormat = getConfig().ui.booking_time_format || moment.localeData().longDateFormat('LT');
    var allocatedResource = eventData.resources ? eventData.resources[0].name : false;

    bookingPageTarget = $(template.render({
      chosenDate:               formatTimestamp(eventData.start, dateFormat),
      chosenTime:               formatTimestamp(eventData.start, timeFormat) + ' - ' + formatTimestamp(eventData.end, timeFormat),
      allocatedResourcePrefix:  getConfig().ui.localization.allocated_resource_prefix,
      allocatedResource:        allocatedResource,
      closeIcon:                require('!svg-inline!./assets/close-icon.svg'),
      checkmarkIcon:            require('!svg-inline!./assets/checkmark-icon.svg'),
      loadingIcon:              require('!svg-inline!./assets/loading-spinner.svg'),
      errorIcon:                require('!svg-inline!./assets/error-icon.svg'),
      submitText:               getConfig().ui.localization.submit_button,
      successMessage:           interpolate.sprintf(getConfig().ui.localization.success_message, '<span class="booked-email"></span>')
    }));

    var formFields = bookingPageTarget.find('.bookingjs-form-fields');
    $(formFields).append(renderCustomerFields());
    
    var form = bookingPageTarget.children('.bookingjs-form');

    bookingPageTarget.children('.bookingjs-bookpage-close').click(function(e) {
      e.preventDefault();
      var bookingHasBeenCreated = $(form).hasClass('success');
      if (bookingHasBeenCreated) getAvailability();
      hideBookingPage();
    });

    if (eventData.resources) {
      utils.logDebug(['Available resources for chosen timeslot:', eventData.resources]);
    }

    form.find('.bookingjs-form-input').on('input', function() {
      var field = $(this).closest('.bookingjs-form-field');
      if (this.value) field.addClass('bookingjs-form-field--dirty');
      else field.removeClass('bookingjs-form-field--dirty');
    });

    form.submit(function(e) {
      submitBookingForm(this, e, eventData);
    });

    $(rootTarget).on('customer-timezone-changed', function () {
      if (!bookingPageTarget) return
      $('.bookingjs-bookpage-date').text(formatTimestamp(eventData.start, dateFormat));
      $('.bookingjs-bookpage-time').text(formatTimestamp(eventData.start, timeFormat) + ' - ' + formatTimestamp(eventData.end, timeFormat));
    });

    $(document).on('keyup', function(e) {
      // escape key maps to keycode `27`
      if (e.keyCode === 27) { hideBookingPage(); }
    });

    rootTarget.append(bookingPageTarget);

    setTimeout(function(){
      bookingPageTarget.addClass('show');
    }, 100);

  }
function ( eventData ) { utils . doCallback ( 'showBookingPage' , eventData ) ; var template = require ( './templates/booking-page.html' ) ; var dateFormat = getConfig ( ) . ui . booking_date_format || moment . localeData ( ) . longDateFormat ( 'LL' ) ; var timeFormat = getConfig ( ) . ui . booking_time_format || moment . localeData ( ) . longDateFormat ( 'LT' ) ; var allocatedResource = eventData . resources ? eventData . resources [ 0 ] . name : false ; bookingPageTarget = $ ( template . render ( { chosenDate : formatTimestamp ( eventData . start , dateFormat ) , chosenTime : formatTimestamp ( eventData . start , timeFormat ) + ' - ' + formatTimestamp ( eventData . end , timeFormat ) , allocatedResourcePrefix : getConfig ( ) . ui . localization . allocated_resource_prefix , allocatedResource : allocatedResource , closeIcon : require ( '!svg-inline!./assets/close-icon.svg' ) , checkmarkIcon : require ( '!svg-inline!./assets/checkmark-icon.svg' ) , loadingIcon : require ( '!svg-inline!./assets/loading-spinner.svg' ) , errorIcon : require ( '!svg-inline!./assets/error-icon.svg' ) , submitText : getConfig ( ) . ui . localization . submit_button , successMessage : interpolate . sprintf ( getConfig ( ) . ui . localization . success_message , '<span class="booked-email"></span>' ) } ) ) ; var formFields = bookingPageTarget . find ( '.bookingjs-form-fields' ) ; $ ( formFields ) . append ( renderCustomerFields ( ) ) ; var form = bookingPageTarget . children ( '.bookingjs-form' ) ; bookingPageTarget . children ( '.bookingjs-bookpage-close' ) . click ( function ( e ) { e . preventDefault ( ) ; var bookingHasBeenCreated = $ ( form ) . hasClass ( 'success' ) ; if ( bookingHasBeenCreated ) getAvailability ( ) ; hideBookingPage ( ) ; } ) ; if ( eventData . resources ) { utils . logDebug ( [ 'Available resources for chosen timeslot:' , eventData . resources ] ) ; } form . find ( '.bookingjs-form-input' ) . on ( 'input' , function ( ) { var field = $ ( this ) . closest ( '.bookingjs-form-field' ) ; if ( this . value ) field . addClass ( 'bookingjs-form-field--dirty' ) ; else field . removeClass ( 'bookingjs-form-field--dirty' ) ; } ) ; form . submit ( function ( e ) { submitBookingForm ( this , e , eventData ) ; } ) ; $ ( rootTarget ) . on ( 'customer-timezone-changed' , function ( ) { if ( ! bookingPageTarget ) return $ ( '.bookingjs-bookpage-date' ) . text ( formatTimestamp ( eventData . start , dateFormat ) ) ; $ ( '.bookingjs-bookpage-time' ) . text ( formatTimestamp ( eventData . start , timeFormat ) + ' - ' + formatTimestamp ( eventData . end , timeFormat ) ) ; } ) ; $ ( document ) . on ( 'keyup' , function ( e ) { // escape key maps to keycode `27` if ( e . keyCode === 27 ) { hideBookingPage ( ) ; } } ) ; rootTarget . append ( bookingPageTarget ) ; setTimeout ( function ( ) { bookingPageTarget . addClass ( 'show' ) ; } , 100 ) ; }
Event handler when a timeslot is clicked in FullCalendar
Event handler when a timeslot is clicked in FullCalendar