Step 1 - Download

First off you need to download uBooking. Make sure you read the system requirements before installing.

Our recommendation is to take full backup of your files and your database.

Download here

Step 2 - Install

Open the developer section of Umbraco, open up the Packages folder and choose "Install local package". Follow the guide and choose the file you downloaded in step 1.

When the installation is complete go to the user section and activate the uBooking section to your user.

Step 3 - Quick setup

Bah.. now the hard part, all settings.. Dont worry! We got you covered. Pick your kind of resource, enter the email settings and your good to go! Do you need more information about the resources? Check the links below.

Date resource

Time resource

Step 4 - Integration

You have two options to get the resource and form visible on your website, by data type (recommended) or macro. The first option requires some coding, it's not hard but if you haven't seen a line of code and not to familiar with Umbraco you're better off with option two.

By data type:

  1. Open up the developer section and right click on the folder "Data types" and pick Create > New Data Type. Give your property a name and select "uBooking Resource Picker" as Property editor. Press save.
  2. Open up settings and select the document type you'd like to display the resource on and add the data type you created.
  3. Insert the code below:
<!-- Between the head tags -->
<link rel="stylesheet" href="/App_Plugins/UBooking/_Content/bootstrap.css" />
<link rel="stylesheet" href="/App_Plugins/UBooking/_Content/calendar-base.css" />
<link rel="stylesheet" href="/App_Plugins/UBooking/_Content/calendar-style.css" />
<!-- Right before the </body> tag -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>

<script charset="utf-8" src="/App_Plugins/UBooking/_Content/ubooking.js" type="text/javascript"></script>
@using uBooking.Core.Infrastructure.Umbraco.ResourcePicker

@{
   // Place this code in your view. This will render uBooking
   var resource = Model.Content.GetPropertyValue<Resource>("-- Property alias --");
   Html.RenderAction("Render", "UBooking", new { resourceId = resource.PublicId, culture = Culture });
}

By Macro:

  1. Navigate to the page where you would like to display resource on.
  2. Click on the Macro symbol in the richtext editor in Umbraco and choose uBooking and your resource.
  3. Your resource will be rendered in the editor. Press Save and your done!
  4. Note: The macro contains references to css and scripts files and if you already have jQuery installed conflicts may occur. Start by moving the code from the Macro file, follow  the steps above.