wikiki / bulma-calendar Goto Github PK

Hi !

Have you consider this? It's remarcably faster for dev and uses babel or anything you need.

Maybe for future projects ;)

You may close this after reading. Otherwise , leave it open to track progress.

Cheers

According to https://wikiki.github.io/ the dist/ folder should contain a bulma-calendar.min.css, which it doesnt.
Either the repo or the documentation should be adjusted.

Btw, same is true for a minified .js file (referred to in doc, but missing in repo).

i did the instructions in WIKI , i used npm run because i use laravel , then i integrated the calender extension in bulma.js in the assets folder

import 'bulma-extensions/bulma-calendar/dist/bulma-calendar.js';

then i used npm run dev and it was build successfully
but when i use the initialization function

<script type="text/javascript">
        var date = new bulmaCalendar(document.querySelector('.calendar'), {
          dataFormat: 'd MM yyyy' // 1 January 2018
        });
</script>

i got error in console Uncaught ReferenceError: bulmaCalendar is not defined

so why i got this error even if the code is already inserted .... any help please

Hello!, i'm testing this component for a project and I found couple of stuff. Each will have it's own separate issue.

Also, if I have time, ill do the PR myself, but i always prefer to discus it here and introduce myself.

Ok, so, in source code I found:
this._clickEvent = ('ontouchstart' in window) ? 'touchstart' : 'click';

Which it's ok, but in a laptop with touchscreen does not play well if user is interacting with mouse.

I implemented this:

`
Element.prototype.addEventsListener = function(events, listener) {
if(!Array.isArray(events))
events =[events];
for(let i = 0; i<events.length; i++)
this.addEventListener(events[i], listener);
}

this._clickEvent = ['touchstart' , 'click'];

`
and replaced all addEventListener with addEventsListener. It works.

So we can use the import feature in node env
Thanks

Be great if there was an option to just pick a month rather than a particular date.

So functionality of the html 5 month field:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month

Thanks

I know its frustating for you aand really apologise for the repeated comments.
But now it works totally wrong.
When you have time check it again

As opposed to selecting a date range, where deciding on start and end date, this, would allow selecting distinct dates, eg. all Tuesdays in one month.

I'm currently using the sample codes provided in the documentation to get the input to work, but it doesn't. I get this:

TypeError: lang is undefined

This is where lang is undefined:

var getFormatedDate = function getFormatedDate(dt, format, lang) {
  var items = {
    d: dt.getDate(),
    dd: dt.getDate(),
    D: dt.getDay(),
    m: dt.getMonth() + 1,
    mm: dt.getMonth() + 1,
    M: dt.getMonth(),
    MM: dt.getMonth(),
    yy: dt.getFullYear().toString().substr(-2),
    yyyy: dt.getFullYear()
  };

  items.dd < 10 && (items.dd = '0' + items.dd);
  items.mm < 10 && (items.mm = '0' + items.mm);
  items.D = lang.weekdays[items.D ? items.D - 1 : 6];
  items.M = lang.monthsShort[items.M];
  items.MM = lang.months[items.MM];

  return format.replace(/(?:[dmM]{1,2}|D|yyyy|yy)/g, function (m) {
    return typeof items[m] !== 'undefined' ? items[m] : m;
  });
};

Could you add support for the Spanish language?

es: { weekStart: 1, previousMonth: 'Mes anterior', nextMonth: 'Próximo mes', months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'], weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'] }

Can you please explain how to add events to the calendar?
Thank you.

I am not sure how to apply the DatePicker Javascript in a React project.

(I think the problems might lie in my understanding of how to use the new operator in combination with the es6 import..)

This is my current code:

import React, { Component } from 'react'
import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar.min'

export default class DatePicker extends Component {
  render() {
    const datePicker = new bulmaCalendar(this.datePickerElem, {
      startDate: new Date(), // Date selected by default
      dateFormat: 'yyyy-mm-dd', // the date format `field` value
      lang: 'en', // internationalization
      overlay: false,
      closeOnOverlayClick: true,
      closeOnSelect: true,
      // callback functions
      onSelect: null,
      onOpen: null,
      onClose: null,
      onRender: null
    })
    return (
      <div>
        <input ref={this.datePickerElem} class="input" type="text" />
      </div>
    )
  }
}

Which gives me this error:
Error: An invalid selector or non-DOM node has been provided.

Hi, first of all thanks for this awesome project.
I just wanted to report a error I am getting when compiling.

My sass import looks like this:

@import "~bulma"
@import '~bulma-calendar'

I am using:

"bulma": "^0.6.0",
"bulma-calendar": "^1.3.0",

I am getting this error (I use GatsbyJS/React):

 ERROR  Failed to compile with 1 errors

 error  in ./~/bulma-calendar/dist/bulma-calendar.sass

Module build failed:
$calendar-border-radius: $radius-small !default
                        ^
      Undefined variable: "$radius-small".

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/Wikiki/bulma-calendar.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hello, this extension is great, you can help me with the following problem
what Parameters need onOpen callback? or how use on Open without ejecuta when load the document.

function saveIndexDoc(idTi, nomInd) {
    $.ajax({
        type: "get",
        dataType: 'text',
        url: "guardar_indicedoc.htm",
        data: {'idTi': idTi, 'nomInd': nomInd},
        success: function (response) {
            if (response === 'true') {
                var mensaje = "<p>No se pudo crear Indice.</p>";
                $('#errores_id').addClass('alert alert-danger');
                $('#errores_id').hide();
                $('#errores_id').html(mensaje);
                $('#errores_id').show();
                $('#errores_id').delay(1500).hide(500);
            }
            delete(idTi);
            delete(nomInd);
            delete(mensaje);
            delete(response);
        },
        error: function (jqXHR, exception) {
            var msg = '';
            msg = 'Uncaught Error.\n' + jqXHR.responseText;     
            $('#post').html(msg);
        }
    });
}

date = new bulmaCalendar(document.querySelector('.sr-date'), {
  dataFormat: 'd MM yyyy',  // 1 January 2018
  onOpen:saveIndexDoc()
});

I want execute the saveIndexDoc when open datepicker

If Date Picker input is placed inside Bulma Modal, clicking on the input causes calendar to show up behind the modal making user unable to input the date.

Hi,
congratulations for your job with Bulma-Calendar component, it's great!

I have an issue with react-create-app build and bulma-calendar library.

I import it in this way

import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar';

and it works correctly on development environment (npm run start or react-scripts start).

But if I try to make a build of the application (npm run build or react-scripts build), the build process return this error:

Failed to minify the code from this file:
./node_modules/bulma-calendar/dist/bulma-calendar.js:178
Read more here: http://bit.ly/2tRViJ9

In that link is reported:

To resolve this: Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled. Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the module field in package.json. Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers.

Can we do anything to resolve it?
Thanks
Aurelio

if I need to add my own icons is not available, I suggest to add options to add arrows icon name.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/Wikiki/bulma-calendar.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Is there any event such as input, click, change supported by the input field so that I can get the selected value?

Hello.

I have a question regarding the implementation of a display calendar to show dates on which appointments have been planned.

I cannot find more info in the documentation.

I want to show a small calendar which can be navigated and where I can dynamically insert dates using js.

What is the correct implementation for that as I can't seem to find it anywhere.

Thanks in advance.

I use the DatePicker class on an input.
My date format is dd/mm/yy (also in the input) but in the _init function of the class you inititialize the date without reformating so the Date is set in this format: mm/dd/yy.
It's would be cool if it use the same format as the output of the class
Thanks

In the Sizes section fo the documentation, you use the "disabled" class instead of the "is-disabled" class.

Hey,

Your example of the date picker is not working:

https://wikiki.github.io/components/calendar/

I'm trying to get JavaScript working with bulma-calendar, and not finding much success.

I've started a new vue-cli project, and have installed bulma & bulma-calendar using npm. I can get the CSS loaded with
import '../node_modules/bulma/css/bulma.css';
in App.vue, and
<style src="../../node_modules/bulma-calendar/dist/bulma-calendar.min.css"></style>
in my custom component, and it looks fine.

However, when I try to get it to work by adding
import bulmaCalendar from "../../node_modules/bulma-calendar/dist/bulma-calendar.min.js
in my component, I get tons of
[Vue warn]: Property or method "..." is not defined on the instance but referenced during render. errors in the console.

I've setup a custom BulmaCalendar.vue component with the following structure:

export default {
  name: 'MyBulmaCalendar',
  data() {
      return {
        fullSize: true,
        events: [...] // pulled in from API
      }
  },
  methods: {
    // chevron buttons
    prevMonth() {...},
    nextMonth() {...}
  }
}

Q1: How can I get the bulma-calendar JS working?
Q2: How can I add my own data & methods?

When using the demo and selecting a date the calendar displays a day before the selected date.

Can you add "minDate" and "maxDate" options like these
http://api.jqueryui.com/datepicker/#option-maxDate ?

I'm trying to include this with my rails app and it repeatedly fails sprockets tries to compile. It appears to be an issue when running uglify to minify the code.

When I choose date on calendar, for example 20.06.2018, and it saved wrong date in value - 20.05.2018

This bug also present in doc. https://wikiki.github.io/components/calendar/

I downloaded the latest changes since I had a problem with date formats.

I use dd/mm/yyyy and the previous version would use that format to place the date in an input field.

But if I then clicked a 2nd time and brought up then calendar again it would take the date in the input field and display the calendar date as if the input field was mm/dd/yyyy. So if you had a date of 13/2/2018 the calendar would display Undefined and Null on the header and no calendar body because it treated is as mm/dd/yyyy.

But in the latest release, the format is ignored and the date placed into the input field is formatted as mm-dd-yyyy and not as dd/mm/yyyy.

Is that what is meant to happen?

Have you implemented it on an Angular 4 project?

Hi,

I'm using this Bulma extension and have seen that startDate is not marked somehow. instead the current date is rounded by a green circle. I think that the startDate should be rounded by a red circle or similar so you know which date is currently selected.
This is specially useful when using the calendar in overlay mode as as the field with the current ate is hidden.
Is there an option to fix that?

regards,

Hello,

bulma-calendar version 1.1.9

Very good calendar but facing a bit of a problem with my ie11 users, ie11 console is complaining about bulma-calendar.js:169:65 with:

Element.prototype.addEventsListener = function(events, listener = void 0) {

window.onerror
Expected ')'

Any idea how I could get around this would be appreciated.

Thank you

The input element that is used for calendar is showing the dd/mm/yyyy format by default. I don't want to show anything in the textbox. Here is the screenshot of the element https://prnt.sc/jzisac How can I remove it.

@kaizermd mentioned this in #37 but it is a separate bug.

I first noticed the missing buttons when I implemented the calendar on a test form. They also do not appear in the demo site. Overlay also makes no difference.

Tested with:

• Safari 11.0.3
• Chrome Version 64.0.3282.186

I can't add maxDate, I add to the options the following code.

maxDate: new Date(),

After I press one of the buttons to change the month, the button inverts its hover colors.

By this I mean that if I click the button then when I leave the button, the button will appear hovered and when I hover it it will appear normally.

I can not find month and year change arrows in last two examples https://wikiki.github.io/components/calendar/.

update
And I used fontawesome 5 with this

const datePicker = new bulmaCalendar(document.getElementById( 'b-cal' ), {
       iconSet: 'fontawesome-5',
       overlay: true,
       dateFormat: 'dd/mm/yyyy',
    });

but still not working

When selecting a date, the value of the input field is incorrect by one month (it shows the month before the chosen date)

Steps to reproduce

1. Visit https://wikiki.github.io/components/calendar/#javascript
2. Click on the datepicker input
3. Choose July 2, 2018
4. Observe the value of the input field

Expected behavior: Input has value 2018-07-02
Observed behavior: Input has value 2018-06-02

I'm using bulma-calendar in my project and I noticed that the "year forward" arrow skips two years ahead, not one. The "year backward" arrow skips back one year.

Is skipping ahead two years the expected behavior?

Hi,
When I tried to use your library with webpack I met problem, that $radius-small is not defined, when I tried to bundle it with node-sass loader.
I found that if you sass module have dependencies from other npm package you need to use special tilde import to define dependencies, so it will be possible to load modules in right order.

In case of bulma-calendar it was needed to add @import "~bulma/bulma" on top line of bulma-calendar.sass, after that I was able to bundle bulma-calendar with webpack without problem.

Can you take a look into this problem?
Anyway thanks for great library!

Sorry can't find in doc about this import, but it defined somewhere in this package: https://npmjs.org/package/node-sass
And link to discussion about implement this: sass/sass#2350

The documentation suggests that we create a calendar by instantiating the bulmaCalendar() constructor. Like this:

   var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo' ), {
        overlay: true
    });

The problem is, what if my application requires 50 calendars? Do I have to instantiate the bulmaCalendar() constructor for each of them? This could be solved by allowing users to pass an array of "elements" (document.getElementsBy* or document.querySelectorAll()) instead of just a single "element" (document.getElementBy*). As a temporary solution, I tried this:

1. I gave each of my inputs a class name: datepicker
2. In JS, I fetched all those elements with that class in an array: datepickersall.
3. I iterated over that array and for each of the elements, I instantiated bulmaCalendar().

document.addEventListener( 'DOMContentLoaded', function () {
    var datepickersall = document.querySelectorAll('.datepicker');
    Array.prototype.forEach.call(datepickersall, function(elem){
        console.log(elem);
        new bulmaCalendar(elem, {
            overlay: true
        });
    });

    /*var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo' ), {
        overlay: true
    });*/
} );

And in the HTML:

<input class="input datepicker" type="text">
...
<input class="input datepicker" type="text">

Sadly, it didn't work. What can I do about it?

The buttons to change month and year reference FA icons directly in the template. As a result they will not display properly if these icons are not available.

Perhaps a stand-alone CSS or SVG solution could be used instead?

We need to implement events again. Ie, on Select, onclose, etc.

For some projects importing all file and bundling is important.

So it'd be nice if jsFormat = false so umd can be use by default when importing from npm.

EDIT: Forgot to say the second option. Publish the source in NPM. :) meanwhile comes from github.

It makes more sense that people using npm to use this project also uses some kind of bundler.

Let me know what you guys think about this.

Cheers!

In a new laravel project, I installed bulma-calendar using npm install bulma-calendar --save-dev. In my app.scss file, I am importing both bulma and bulma-calendar like this:

@import "~bulma";
@import "~bulma-calendar";

and in the bootstrap.js file at the top of the file I imported the minified js file:

import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar.min.js'

and at the bottom of it I added this:

document.addEventListener( 'DOMContentLoaded', function () {
  var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo' ), {
    startDate: new Date(), // Date selected by default
    dateFormat: 'yyyy-mm-dd', // the date format `field` value
    lang: 'en', // internationalization
    overlay: false,
    closeOnOverlayClick: true,
    closeOnSelect: true,
    // callback functions
    onSelect: null,
    onOpen: null,
    onClose: null,
    onRender: null
  } );
  var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo2' ), {
    overlay: true
  } );
} );

And in my welcome.blade.php I added an input element:

<input id="datepickerDemo" class="input" type="text" value="11-02-2018">

But I don't see any calendar when I click on that input field, just as I see on your demo page. What am I missing?

As the title says. It's not sexy to use _open from outside.

After the update you ve done yesteday unfortunatelly there is still a small bug.
If you select a date of the CURRENT month, then the selected date is one month later.
For example now is 22/06/18 (im using dd-mm-yy) so if you select 25-06-18 it will give you back 25-07-18.
This problem exists only for current month selected dates.
All other cases works fine.

P.S thank you for this wonderfull calendar.