hello-week / hello-week Goto Github PK

Hi @maurovieirareis The dates are correct but the weeks arrangement looks mixed up. Can you please look into it?
This is the side by side comparison of my mac's calendar and the online demo.

This is where I've implemented this

on set one day highlight we should't render all days, this it's a performance issue.

Hello

I am having an issue with disabled dates. I pass in the following dates in the 'disableDates' parameter:

However, dates after 2020-10-10 are not disabled.

Im guessing, either the date format is not good or it is a bug.

Any advise on the issue would help

Hi Mauro,

Can you help me pls?

how can I disable dates from a BD, I got a DB with dates that insert in the table, but how can I use those days and disable it? I am using ajax and puting function at the disableDates. This is my code

function mostrar() {
        var xhr = new XMLHttpRequest();
        var x = document.querySelectorAll('.hello-week__day')
        

        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                //Al hacer parse de un array recibimos un array
               var alumnos = JSON.parse(this.responseText);
                //Recorremos el array
                for (var i = 0; i < alumnos.length; i++) {

                   console.log(alumnos[i]);  
                } 
                
               var cadena = JSON.stringify(alumnos);

               return cadena;
                
              }
                                   
            }
            xhr.open("GET", "array2.php", true);
        xhr.send();
        }

My following code was working fine but after adding the daysSelected ( to initially select a specific date ) it is selecting the date but it is also throwing the following error in console
TypeError: Cannot read properties of undefined reading 'months'

My code :

Calendar = new HelloWeek({
  selector: ".modal .calendar",
  lang: "en",
  langFolder: "/",
  multiplePick: false,
  disablePastDays: true,
  disableDates: PulicHolidays,
 daysSelected : ['2024-06-11'],
  disabledDaysOfWeek: disabledDays,
        daysHighlight: [
    {
      days: Schedule,
      backgroundColor: "#f9ffb9",
      color: "#000000",
    },
    {
      days: PulicHolidays,
      backgroundColor: "#ff1e63",
      color: "#ffffff",
    },
  ],
  minDate:
    Min.getFullYear() + "-" + (Min.getMonth() + 1) + "-" + Min.getDate(),
  maxDate: DT.getFullYear() + 2 + "-12-31",
  onSelect: () => {
    // document.querySelector("input#OutsideSchedule").checked = false;
    Calc();
  },
  

});

Its not clear if this is an issue with browerstack or hello-week but the getDays function generates dates two days before the date selected on Windows 8.1 browerstack machines (across all major browser brands). I don't have access to another instance of Windows 8.1 to confirm if this is an issue with browerstack or hello-week. Is this a known issue? And are there any suggestions re. how to resolve this?

Hello, I found the project very cool.
I'm just having a hard time using "disableDates". I'm passing the dates, for example:
['2018-10-02', '2018-10-09', '2018-10-16', '2018-10-23']

but the days that are getting disabled are always the day before those.
Is it a problem with daylight saving time?
Thank you

Hello,

I would like to import hello-week on my angular project.

I installed thanks to npm install... and after i tried to import hello-week
'import * as helloWeek from 'hello-week' (like to import "moment.js") but it doesn't work.

Can you help me please ?

Regards

maxDate does not work for days later than 31st December 2020. When this date is set as maxDate, all dates are disabled, not only the ones below min and above max.

Reproduction:

// Does not work
let helloweek = new HelloWeek({
      selector: '#calendar',
      minDate: new Date(),
      maxDate: new Date('2020-12-31'), // and all dates after this one
});

// Works fine
let helloweek = new HelloWeek({
      selector: '#calendar',
      minDate: new Date(),
      maxDate: new Date('2020-12-30'), // and all dates before this one
});

Would be amazing to be able to, like daysHighlight, pass an array of already selected dates (using daysSelected for example.

I now do it as follows:

var cal
cal = new HelloWeek({
    lang: 'en',
    langFolder: '/js/cdn/langs/',
    multiplePick: true,
    disablePastDays: true,
    format: 'YYYY-MM-DD',                   
    nav: ['◀', '▶'],
})
cal.daysSelected = [ (new Date("2019-02-22")).getTime() ]

i have an issue when add files js and langs folder as js file can't import file of langs with parameter langFolder like this :langFolder: 'scripts/langs/',
i need correct way to add hellow-week in pure html + js + css files to work on my local.
my issue on console:
Uncaught (in promise) TypeError: Failed to resolve module specifier 'scripts/langs/en.js'. The base URL is about:blank because import() is called from a CORS-cross-origin script.

When I choose month january then proceed to month march, range does not work.
seems like range work only inside the displayed month.

Hi,
the 2.10.1 broken the daysHighlight parameter and the setDaysHighlight function.

need fix ASAP!!

Thank you.

Originally posted by @fabio-craq in #23 (comment)

Hi,

I'm trying to integrate this module into my mobile (ionic) project using this command to install npm install hello-week --D and then import it with import * as HelloWeek from 'hello-week'
However, the editor keeps saying 'Cannot find module 'hello-week''. Is there any way to properly use this calendar with angular? Any help would be much appreciated.

Best Regards.

Hi,
found hello week through a listing site.
i tested hello week and ran into issues at highlighting todays date.
In this demo the highlight is working: https://www.cssscript.com/demo/minimal-clean-inline-date-picker-hello-week/ dont know what version they are using.
Did a bit of research into the code and saw that this.todayDate timestamp has a -2 Hour offset compared to todays date in this.days. My Timezone is GMT +2.
As a Hotfix i added the offset to this.todayDate

this.todayDate=a.Utilities.setToTimestamp()-(new Date().getTimezoneOffset() * 1000  * 60)

It seems to work, do u see any issues with my solution?

If I call calendar.goToday(); I am getting this:

What am I doing wrong?

Edit:
Managing this way by the time I get help:

var d = new Date();
calendar.goToDate(d.getFullYear() + "-" + pad((d.getMonth()+1),2) + "-" + pad(d.getDate(),2));

and the padding:

function pad (str, max) {
	str = str.toString();
	return str.length < max ? pad("0" + str, max) : str;
}

I need to get the selected date formatted in the onSelect callback. Any easy way to do this?

Hello,

I am working on a project where I kind of want to color the dates , similarly to what Github does on the profile page with the days colored.

I use jquery to select the .day element and modify the content of the one that have activities.

However, those days now stop working when clicked on, with the following error:

hello.week.min.js:1 Uncaught TypeError: Cannot read property 'locked' of undefined
    at HTMLDivElement.<anonymous> (hello.week.min.js:1)

It is minified which makes it hard to find out exactly where it comes from, but I supposed it is somewhere around here ? https://github.com/mauroreisvieira/hello-week/blob/0ebb7255f057f4d31218d0402c1ab32965dfe259/src/core/calendar.ts#L309-L343 ?

We want to only allow a user to select a maximum of 5 days.

Any suggestions on how to achieve this with the current setup? I tried overwriting this.selectedDates in the onSelect callback, but then the CSS doesn't update and the divs don't have an identifier by date to remove any is-selected classes.

Is it possible to develop a possibility of passing a list of dates that would like to block?

Example:

const myCalendar = new HelloWeek({
    ...
    disableDates: [
        '2018-09-11', '2018-09-13', '2018-09-14'
    ],
    ...
});

The method below always returns 1 day before. In the sample, the calendar makes highlighted 2019-03-31:

setDaysHighlight([
{days: ['2019-04-01'],backgroundColor: '#999'},
])

The same issue happens in official documentation, also.

Hello,

Thank you for this nice lightweight calendar. I am able to make it show up but then I got stuck as I cannot seem to find a way on how to retrieve the selected day / range.

I have looked at issue #8 but this no longer seems to work.

Can you tell me how to get the selected day/range? I was expecting to get it as an argument in my callback but that doesn't seem to be the case.

Once I have this working, I can send a PR to update the documentation on this point.

Thank you.

Hi!
Nice work with this plugin!

Can i ask you if you can add a function that returns the current displayed month and year?
Or maybe you can suggest me a way to get that data?

thank you!

there are no console errors and getDaysHighlight gives back the same array of events, but '.is-highlight' classes are never added to the DOM.

The issue is present on the demo page as well, the days are not highlighted visually in Safari
https://mauroreisvieira.github.io/hello-week/#/docs/demos/highlight-dates

{ "days": [ "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ], "daysShort": [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ], "months": [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ], "monthsShort": [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ], "today": "今天", "clear": "清空" }

maxDate does not work for days later than 31st December 2020. When this date is set as maxDate, all dates are disabled, not only the ones below min and above max.

Reproduction:

// Does not work
let helloweek = new HelloWeek({
      selector: '#calendar',
      minDate: new Date(),
      maxDate: new Date('2020-12-31'), // and all dates after this one
});

// Works fine
let helloweek = new HelloWeek({
      selector: '#calendar',
      minDate: new Date(),
      maxDate: new Date('2020-12-30'), // and all dates before this one
});

Hey, here is the error i get :
Error: You need to specify a selector!

But isn't ".hello-week" a class selector ?

Hi there,
in your destroy function you are using .remove() this removes also the container that holds the picker, so its not possible to do a destroy and re-init bcs the element is missing.

i guess it would be better to do .innerHtml = "" so that that sourrounding div is still present?

Hey great stuff !
Just for the record i had a problem with the display of days not working properly. There were only 5 days being displayed in a line.
The problem was in the .day class styling the padding with 1em on all sides. Got it working by removing the left and right padding.

I don't know if I'm the only one but thought i'd send some feedback !

We are experiencing a really odd behavior when on US timezone vs UK timezone. Here is the expected behavior, which also works on London/UK timezone:

When changing the date/time preferences to New York the following happens:

The UI is fine, but the dates we obtain using onSelect this.getDays() are consistently two days off.

Hello,

When using the goToDate() function I always get the JavaScript error:

TypeError: this.date is undefined

Steps on how to reproduce:

1. Create a page that loads the calendar JS and markup
2. Open the browser console and execute this code:

const calendar = new HelloWeek({
        range: true
    });

3. Verify it works by running calendar.getDays(). This should return an array
4. Make the calendar jump to a given day by executing this code:

calendar.goToDate();

5. Notice the error
6. Try jumping to a given date by executing this code:

calendar.goToDate('2019-03-01');

7. Notice another error

TypeError: this.date.setDate is not a function

Expected result:

Calendar jumps to the given date

Actual result:

JavaScript error

TypeError: this.date is undefined

TypeError: this.date.setDate is not a function

Other info

I might be doing this completely wrong :)

As also seen in the examples, if there are multiple objects in the daysHighlight array, only the first gets rendered?

Hi Mauro,

can you help me please? where I can find this exactly demo https://www.borahvandoorslaer.be/node_modules/hello-week/demos/demos.html

Hello,

I think your calendar plugin is very nice, but I found an error. On choose range and disablePastDays the rang is only working on next month days. I using a Chrome on Mac with lastest version.

Seem to be the same problem as the other person (#19) had in the issue tracker, even with the most recent version. Setting any "daySelected" option unfortunately highlights those day(s) before. I've opened a new issueTracker because it may not be related.

I'm from Canada, at Mountain Daylight Time (MDT) timezone.
I'm using the newest version: 2.2.0 of hello-week

Perhaps the bug has to do something with the Daylight Saving Time (DST)?