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?
- You need to be able to copy some files inside your project folder.
- You need to be able to make some copy-paste inside your project.
- Please test the result with a webserver (like localhost/…) and not in a computer file system.
Let’s go!
File Copying
- Go to our GitHub account and download our latest release.
- Copy it somewhere in your project and remember the path.
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 »).