@timum/timum-booking

How to use

Here are some examples that you can integrate into your page. Just copy the code from one of the js-fiddles. Before any appointments can be displayed you have to reference the resource whose appointments you want displayed.

To show you how it looks all fiddles load data from a test resource. But those are obviously not your appointments. It's enough to play around with though.

How to get a resource reference

You can get a resource reference directly in timum like so:

• Enter your timum calendar. Then open the edit dialog of the desired resource.

  

• Then, enter a unique identifier (one that you haven't used in any other resource in this calendar) at the bottom of the dialog. Save afterwards.

  

• Refresh the page. Then open the edit dialog again. The refresh triggers the reload of the resource data. The new reference should now be displayed. Copy to your clipboard by pressing the copy button as is shown in the screenshot below.

  

• Now you are ready to open one of the fiddles and have your own appointments displayed. After you have opened one, paste the previously copied reference into the field shown below.

  Timum().init({
      resourceId: "<put your resource reference here>", // <- here
  //       other code
  });

Some examples with different configurations

1. timum appointments in a list

   https://jsfiddle.net/timum/5omuys06/

   

2. timum appointments in a regular calendar.

   https://jsfiddle.net/timum/age105qw/

   In this example we also altered several values in the css changing some background colors and the font. This just serves to illustrate the possibilities.

   

3. Multiple calendars side by side.

   https://jsfiddle.net/timum/0jbfs51t/

   

4. With event callback hooks which allow you to let your site react to changes in the calendar.

   (there is nothing to see so no screenshot this time)
   https://jsfiddle.net/timum/jqLgb8u3/

5. With custom fields.

   https://jsfiddle.net/timum/au9143x6/

   Theoretically possible but we ALWAYS need the first name, last name and email address! But you can choose whether to ask customers for their phone number and/or a note. You can also set whether these fields are required or optional by setting required to either true or false.

   

Configuration Options

The values of the properties you see here are the standard values we have set. You may change them as you see fit.

{
    el: "#bookingjs", // the html element you want the calendar to be displayed in
    name: "",
    autoload: true,
    disable_confirm_page: false, // set to true if you want to let people book right away

    // timum has, as of now, 4 different channels through which you can share your resource's appointments.
    // You can find them in the timum frontend under <resource name> -> Calendar Sharing (Terminbuchung freigeben)
    // Every channels has its own settings allowing you to control whom of your customers can see certain appointments,
    // whether they book directly or create an request first and other settings.
    // Valid values for this attribute are:
    // * RESOURCE_PUBLIC -> referring to "Public Booking Link" (Öffentlicher Buchungs-Link)
    // * RESOURCE_EXCLUSIVE -> referring to "Exclusive Booking Access" (Exklusiver Buchungs-Zugang)
    // * RESOURCE_REFERENCE -> referring to "Embedded booking calendars" (Eingebettete Buchungskalender)
    // * CALENDAR_PUBLIC -> referring to "In all Website Plugin Views and your General Calendar" (In Website-Plugin Ansichten sowie Ihrem Gesamtkalender)
    resource_channel: "RESOURCE_REFERENCE",

    // allows you to alter several ui specific settings
    ui: {
        // the headline of your calendar
        display_name: "", 
        // whether you wish to give us credit or remove our branding
        show_credits: true, 
        // whether to show the current timezone... has currently no effect on the appointments
        show_timezone_helper: false, 
        // can be set to 'listing' in which case appointments are displayed in a list. Standard is a regular calendar
        availability_view: "agendaWeek", 
        // route to the avatar image, can be a path on your filesystem or a link to an internet resource
        avatar: "", 
        // 12h cycle or 24h. Alternative value is '12h-mdy-sun'
        time_date_format: "24h-dmy-mon", 
        // change the language used for some texts. There aren't that many
        localization: {
            allocated_product_prefix: "with",
            allocated_resource_prefix: "in",
            product_selection_headline: "Select a service",
            submit_button: "Book it",
            success_message: "We have received your booking and sent a confirmation to %s",
            today_button: "Today"
        }
    },
    customer_fields: {
       // firstName, lastName and email are always required and must remain.
       // (theoretically you can remove them but the booking will fail).
       // Even though this frontend is really flexible our backend is currently not.
       // For now you can set whether the field 'mobile' and/or the field 'messages' is required. 
       // You can also completly hide them by omitting them altogether."

       // possible values for fields:
       // title -> label of the field
       // required -> governs validation
       // format -> can be one of "textarea", "checkbox", "email", "select" or "text". "text" is default.
       // prefilled -> standard value of the field 
       //              (if you prefill firstname, lastname and email with customer specific values
       //              the customer may not even need to type anything)
       // enum -> used to provide options for select fields


        firstName: {
            title: "Vorname",
            required: true,
            prefilled: "Heinz"
        },
        lastName: {
            title: "Nachname",
            required: true,
            prefilled: "Mayer"
        },
        email: {
            title: "E-mail",
            format: "email",
            required: true
        },
        mobile: {
            title: "Mobil",
            format: "",
            required: true
        },
        messages: {
           title:"Nachricht",
           format: "",
           prefilled: "Eine nützliche Nachricht"
        },
        department: {
            title: "Bereich",
            type: "string",
            format: "select",
            enum: ["Beratung", "Sprechstunde", "Telefonat"],
        },
        terms: {
            title: "Ich akzeptiere die Nutzungsbedingungen",
            format: "checkbox",
            required: true
        }
    },
    callbacks: { // callback methods which will be called whenever smth happens in the calendar. 
                 // you may override these to react to events. 
      timumFetchBookablesSuccessful: function (args) {

      },
      timumFetchBookablesSuccessful: function (response) {

      },
      timumFetchBookablesFailed: function (response) {

      },
      createBookingStarted: function (args) {
          /* 
            args object contains firstName, lastName and email. 
            It also contains the values of the custom fields you specified. 
            E.G: If you specified a checkbox with name "terms" you'll find it's value under args.terms.
          */
      },
      createBookingSuccessful: function (response) {

      },
      createBookingFailed: function (response) {

      },
      fullCalendarInitialized: function () {

      },
      renderCompleted: function () {

      },
      showBookingPage: function (slot) {

      },
      closeBookingPage: function () {

      },
      submitBookingForm: function (values) {
          /*
            Like createBookingStarted 'values' contains the values entered 
            into the fields of the booking page. Your onw custom fields included.   
           */
      },
      timumFetchProductsStarted: function (){

      },
      timumFetchProductsSuccessfull: function () {

      },
      timumFetchProductsFailed: function () {

      },
      showProductSelectiongPage: function(){

      },
      closeProductSelectionPage: function() {

      },
    },
    // we use fullcalendar in version 3
    // you can overide its settings here
    // heres a link to the docu: 
    // https://fullcalendar.io/docs/v3#toc
    fullcalendar: {
        views: {
            agenda: {
                displayEventEnd: false
            },
            listing: {
                type: "list",
                duration: { days: 365 / 2 },
                listDayAltFormat: "dddd",
                // message which is displayed when  there are no appointments available
                noEventsMessage: "No timeslots available" 
            }
        },
        // height of the calendar in pixels
        contentHeight: 400, 
        // earliest time of day visible in calendar (if there are
        // earlier appointments they won't be displayed)
        minTime: '08:00:00', 
        // latest time of day visible in calendar (if there are
        // later appointments they won't be displayed)
        maxTime: '21:00:00',
        // how the calendar is supposed to display dates and times
        locale: "de",
        allDaySlot: false,
        scrollTime: "08:00:00",
        nowIndicator: true // indicates the current date and time
    }

How to install (bitbucket repo)

1. install yarn on your machine (https://yarnpkg.com/getting-started/install).
2. open a terminal
3. navigate to where ever you downloaded the repo to.
4. execute yarn install to download all dependencies
5. execute yarn build to compile the files. They are then stored in the dist directory of the repo. -> Repeat step 5. whenever you change anything. Otherwise your changes will have no effect (also true for the examples).
6. Open one of the .htm files located in the examples folder. -> you may have to change it in a text editor. The resourceId given in the files may not be valid any more.
7. Make sure your chosen provider has appointments/availabilities on the resource you specified in the example file. -> otherwise there is no data meaning the calendar cannot display any.

License attributions

The json-schema v0.2.3 package is used pursuant to the BSD-3-Clause license