You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Simply **download** the code from GitHub **or clone** the git repository.
55
-
2. Copy the css (atcb.min.css) and js (atcb.min.js) files from the assets folders into your project (the **.min.** files are required, but it is recommended to also copy the raw and map files).
56
-
3. Include those files in your project. As usual, the css goes into the <head> (`<link rel="stylesheet" href="./assets/css/atcb.min.css">`), the js into the <body> footer (`<script type="module" src="./assets/js/atcb.min.js"></script>`). You can also combine them with other files, if you want to.
57
-
4. Mind that when using this in a Vanilla JS style, you need to either include `type="module"` within the script tag **or** remove the last line from the js file (*module.exports*), since this is only relevant for Option 2 and throws a console error otherwise.
58
-
5. Create your button as can be seen in the "Configuration" section below.
59
-
6. That is it. The script takes care of all the rest. :)
55
+
2. Copy the css (atcb.min.css) and js (atcb.min.js) files from the assets (not the "npm_dist"!) folders into your project (the **.min.** files are required, but it is recommended to also copy the raw and map files).
56
+
3. Include those files in your project. As usual, the css goes into the <head> (`<link rel="stylesheet" href="./assets/css/atcb.min.css">`), the js into the <body> footer (`<script src="./assets/js/atcb.min.js" defer></script>`). You can also combine them with other files, if you want to.
57
+
4. Create your button as can be seen in the "Configuration" section below.
58
+
5. That is it. The script takes care of all the rest. :)
60
59
61
60
### Option 2: NodeJS
62
61
63
62
1. Requires NodeJS and a project, which builds on it (e.g. React or Angular).
64
63
2. Rund **`npm install add-to-calendar-button`**.
65
64
3. Import the module into your project/component. For example with Angular/React: `import { atcb_init } from 'add-to-calendar-button';`.
66
-
4. Init the js with `atcb_init();`.
65
+
4. Init the js after the DOM has been loaded. To determine the right moment and execute, ...
66
+
1. with Angular, you would use `ngAfterViewInit()` with `atcb_init();`;
67
+
2. with React, you might want to include an event listener like `document.addEventListener('DOMContentLoaded', atcb_init, false);`.
67
68
5. Include the css. For example with Angular or React, add the following to the global style.css: `@import 'add-to-calendar-button/assets/css/atcb.min'`;
68
69
6. Create your button as can be seen in the "Configuration" section below.
69
70
7. That is it. The script takes care of all the rest. :)
70
71
71
72
72
73
## Configuration
73
74
74
-
A button can be easily created by placing a respective placeholder, wherever you want the button to appear.
75
+
A button can be easily created by placing a respective placeholder, wherever you want the button to appear.
76
+
(The `style="display:none;"` theoretically is not necessary, but should be used for better compatibility.)
75
77
```html
76
-
<divclass="atcb">
78
+
<divclass="atcb"style="display:none;">
77
79
(...)
78
80
</div>
79
81
```
@@ -83,7 +85,7 @@ Mind that with Angular, you might need to escape the { with `{{ '{' }}` and } wi
83
85
### Minimal structure (required)
84
86
85
87
```html
86
-
<divclass="atcb">
88
+
<divclass="atcb"style="display:none;">
87
89
{
88
90
"title":"Add the title of your event",
89
91
"dateStart":"02-21-2022",
@@ -98,7 +100,7 @@ Mind that with Angular, you might need to escape the { with `{{ '{' }}` and } wi
Copy file name to clipboardExpand all lines: index.html
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -140,7 +140,7 @@ <h3>Example 1: The usual One</h3>
140
140
<divclass="example_left">
141
141
142
142
<!-- start of button code -->
143
-
<divclass="atcb">
143
+
<divclass="atcb"style="display:none;">
144
144
{
145
145
"title":"Reminder to check the add-to-calendar-button repo",
146
146
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
"title":"Reminder to check the add-to-calendar-button repo",
203
203
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
"title":"Reminder to check the add-to-calendar-button repo",
305
305
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
"title":"Reminder to check the add-to-calendar-button repo",
351
351
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
"title":"Reminder to check the add-to-calendar-button repo",
400
400
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
0 commit comments