0

First post and I expect it to be a real embarrassing one. At this point I'm just aggravatedly tunnel-visioning and I'm sure I'm looking over the most basic issue.

So, I'm using the Bulma Calendar Extension. I just downloaded the files and dropped the min.css, min.js and initiate script into my folders and linked it to my page. Worked perfectly. Looked great. Now, the next day it will not initiate or work at all. I've torn the page down to the absolute minimum, and still can't figure out what the issue is. I've even redownloaded and replaced the files.

// Initialize all input of date type.
const calendars = bulmaCalendar.attach('[type="date"]', options);

// Loop on each calendar initialized
calendars.forEach(calendar => {
  // Add listener to select event
  calendar.on('select', date => {
    console.log(date);
  });
});

// To access to bulmaCalendar instance of an element
const element = document.querySelector('#my-element');
if (element) {
  // bulmaCalendar instance is available as element.bulmaCalendar
  element.bulmaCalendar.on('select', datepicker => {
    console.log(datepicker.data.value());
  });
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.14/dist/css/bulma-calendar.min.css">

<div class="field">
  <input class="" type="date">
</div>

<script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.14/dist/js/bulma-calendar.min.js"></script>
Phil
  • 157,677
  • 23
  • 242
  • 245
GlassWolf
  • 1
  • 1
  • Any errors in your browser dev-tools console? – Phil Oct 21 '21 at 22:13
  • You have no element with `id="my-element"` and `options` is not defined. Also, ` – Phil Oct 21 '21 at 22:14
  • The body tag placement was an actual mistake after all of the fiddling. But even after replacing all of the links and scripts with the weblinks you shared it still doesn't show any Bulma formatting or initialization on my end. Dev tools just shows "options is not defined" to which the Bulma-calendar.min.js has about 1700 lines of default and predefined options. – GlassWolf Oct 21 '21 at 23:13
  • As you can see from the snippet in your question, `options` is undefined so the code fails to execute at the first line. I'm not sure where you expect it to come from but even if you just add `const options = {}` as the first line, it starts working – Phil Oct 21 '21 at 23:14
  • Understood. The confusion is stemming from the fact that the bulma-calendar.min.js DOES have those options defined, and it's properly linked to the .js. So I'm not exactly sure what to do with that. – GlassWolf Oct 21 '21 at 23:17
  • The `bulma-calendar.min.js` does not expose any variable named `options` – Phil Oct 21 '21 at 23:18
  • So here's the first search result of `options` in the `bulma-calendar.min.js` of `1740` results. I do appreciate the help and patience, as novice as I am at this point. I'm currently in the beginning courses of JS literacy. ``` function buildFormatLongFn(args) { return function () { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // TODO: Remove String() var width = options.width ? String(options.width) : args.defaultWidth; var format = args.formats[width] || args.formats[args.defaultWidth]; return format; }; } ``` – GlassWolf Oct 21 '21 at 23:26
  • You might be interested in [What is the scope of variables in JavaScript?](https://stackoverflow.com/q/500431/283366). Basically, you don't have access to any variable named `options`. The expectation of this library is that you provide the options. If you want to just use the defaults, then either provide an empty `options` object like in my previous comment or simply omit the argument entirely... `const calendars = bulmaCalendar.attach('[type="date"]')`. See the [examples here](https://bulma-calendar.onrender.com/assets/js/main.js) – Phil Oct 21 '21 at 23:33
  • I actually deleted the 'options' to use defaults as per your suggestion. I then (because I'm a glutton for punishment) decided to place the 'options' var tag back and save again, and it's still functioning properly... and now I'm even more stressed! Thank you so much for your help though, and I'll absolutely be adding that reading to my curriculum. – GlassWolf Oct 21 '21 at 23:42
  • There is no difference between `var options = {}; bulmaCalendar.attach('[type="date"]', options)` and `bulmaCalendar.attach('[type="date"]')`. Both will use the defaults provided by Bulma Calendar – Phil Oct 21 '21 at 23:46

0 Answers0