michael-hack / bulma-calendar

Bulma's extension to display a calendar
MIT License
286 stars 165 forks source link

Can't import bulmaCalendar in a Django project #327

Open DMunkei opened 1 year ago

DMunkei commented 1 year ago

Is this something you can debug and fix? Send a pull request! Bug fixes and documentation fixes are welcome.

Bug Report

Environment

Current Behavior Trying to import the sample code from the Quick start section. Fails with the following error messages.

Input Code

import { bulmaCalendar} from "./bulma-calendar.min.js";

$(document).ready(function() {

  // Initialize the picker with the ID of the input field
  const datePicker = bulmaCalendar.attach('#date-picker', {
      type: 'date',
      dateFormat: 'DD-MM-YYYY',
      displayMode: 'inline',
  });

  // Add an event listener to the picker to get the selected date
  datePicker.on('select', date => {
      console.log(date);
  });

});

Additional context/Screenshots I'm trying to import this into a Django 4.1.5 project, that's already using bulma.io. I cloned the repo and copied the contents of bulma-calendar/dist/js bulma-calendar/dist/css into my static/js static/css folders in my Django project.

Here are the import statements for both bulma.io and bulma-calendar in Djangos template engine

      <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
      <link rel="stylesheet" href="{% static "css/bulma-calendar.css" %}">
      <script src="{% static 'js/bulma-calendar.js' %}"></script>

      <script type="module" src="{% static 'js/calendar.js' %}"></script> <------- File I'm trying to import the contents in.

Steps to reproduce

  1. Clone repository using HTTPS
  2. Copy content of bulma-calendar/dist/js bulma-calendar/dist/css to the static folder in a Django project
  3. Bind the files in the base layout folder in Django
  4. Try to execute sample code
hkmshb commented 4 months ago

Don't know if this would be helpful, but ran into the same issue recently, though I'm using Go instead. Based on what worked for me, you might need to adjust your import as follows.

import * as bulmaCalendar from "./bulma-calendar.min.js";