JavaScript Integration

When Should You Use JavaScript?

 

Web Project Development

Are you coding your own web-based solution and want to integrate the calendar into your project? You have come to the right place.

If you want to make your own graphical interface (calendar and appointment scheduler) or simply access data only, use the API instead.

 

Website

Do you have a website and want a more professional integration than a simple iframe? JavaScript integration allows you to integrate the calendar into a web page while keeping the “responsive design” aspects.

 

CMS

If you have a CMS-based site: WordPress, Typo3, Drupal, Joomla, we recommend that you use the plugin dedicated to your platform instead.

 

Open in Another Tab / Window

If you want to open the calendar in another page or tab, you can just hyperlink, no need to do it via JavaScript. You can simply use an HTML link.

 

What Is Required for JavaScript Integration?

  1. You need to be able to copy some files inside your project folder.
  2. You need to be able to make some copy-paste inside your project.
  3. Please test the result with a webserver (like localhost/…) and not in a computer file system.

Let’s go!

 

File Copying

 

Script Pasting

In your web project between <head> and </head> tags, paste the following css:

<link href="./styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

Between <body> and </body>, paste the following:

<app-root>Sagenda is loading...</app-root>
<script>
window.sagendaIntegration = 'JavaScript';
// window.sagendaFixedBookableItem = 'xxx';
window.sagendaDefaultView = 'month'; // month, week, day or agenda
window.sagendaRemoveMonthViewButton = 'false'; // false or true
window.sagendaRemoveWeekViewButton = 'false'; // false or true 
window.sagendaRemoveWorkWeekViewButton = 'false'; // false or true
window.sagendaRemoveDayViewButton = 'false'; // false or true
window.sagendaRemoveAgendaViewButton = 'false'; // false or true 
window.sagendaToken = 'xxx'; // <- DON'T FORGET YOUR AUTHENTICATION CODE 
baseUrl = 'https://sagenda.net/api/v3/';
window.sagendaWeekStartsOn = '1';
window.sagendaLanguageCultureShortName = 'en';
window.sagendaDateFormat = 'DD MMMM YYYY';
window.sagendaTimeFormat = 'HH:mm';
window.sagendaAngularPath = './';

</script>
<script type="text/javascript" src="./runtime.js"></script>
<script type="text/javascript" src="./polyfills.js"></script>
<script type="text/javascript" src="./polyfills-es5.js"></script>
<script type="text/javascript" src="./main.js"></script>

 

Configuring Values

 

First of all, understand that each file location depends on where you copy them inside your project. So, for ./styles.css ./runtime.js ./polyfills.js ./polyfills-es5.js ./main.js as well for window.sagendaAngularPath = ‘./’; fill up the path to where you copied the files. It can be a relative path (such as ./assets/sagenda/) or an absolute path (https://www.mydomaine.com/assets/sagenda/).

Then, configure each value:

JavaScript is the first parameter:

window.sagendaIntegration = ‘JavaScript’;

Optionally, if you want to display only one Calendar (Bookable item), uncomment the line (remove the //) and paste the bookable item id. For more information, visit: https://www.sagenda.com/introducing-sagenda/how-to-display-only-one-calendar-bookable-item-on-a-page/
//sagendaFixedBookableItem = ‘xx‘;

 

This is the first view that loads and you can use: month, week, day or agenda. This view shouldn’t be set as remove ‘true’

window.sagendaDefaultView = ‘month’; // month, week, day or agenda

 

You can remove some views. If you don’t want to display all of them, just put ‘true’
sagendaRemoveMonthViewButton = ‘false’; // false or true

window.sagendaRemoveWeekViewButton = ‘false’; // false or true

window.sagendaRemoveDayViewButton = ‘false’; // false or true

window.sagendaRemoveAgendaViewButton = ‘false’; // false or true

 

This is the most important parameter. Please copy the Authentication Code (also known as token) from your Sagenda Dashboard :
sagendaToken = ‘xxx’;

This is the URL of Sagenda webservices, please don’t change it.

baseUrl = ‘https://sagenda.net/api/v3/’;

 

This is to set the first day of the week 0 = Sunday, 1 = Monday.
sagendaWeekStartsOn = ‘1’;

 

This is the language that should be used in Sagenda.
window.sagendaLanguageCultureShortName = ‘en’;
we use a 2-letter code as per ISO 639-1 standard.
https://www.loc.gov/standards/iso639-2/php/code_list.php

To add more translations, use OneSky: https://osp7icw.oneskyapp.com/collaboration/project?id=142348

     

    This is the date format you want to use:
    sagendaDateFormat = ‘DD MMMM YYYY’;
    All possible values are listed on moment.js website: https://momentjs.com/docs/#/displaying/

     

      This is the time format you want to use:
      sagendaTimeFormat = ‘HH:mm’;
      Mostly, if you want the European time format 14:00, then use ‘HH:mm’. If you want the US time format 2:00 PM, then use ‘hh:mm A’. Want more? All possible values are also listed on moment.js website: https://momentjs.com/docs/#/displaying/

      This is the path to where you copied the Sagenda files. If you put them in the same location as the file calling them, just use ‘./’ window.sagendaAngularPath = ‘./’;
      Do the same for the CSS and JavaScript files.

       

      Remarks:

      • You can fill up values as hardcoded or with a dynamic value out of a variable of your programming language.
      • Pay attention when copy-pasting quotation marks: it should be the javascript ‘ instead of other lookalike characters (“ neither ‘ nor »).

      Make a professional impression on your customers

      Sign Up NOW ! 

      Sign up for your free account