uvarov-frontend / vanilla-calendar-pro

Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.

vanilla-calendar-pro's Issues

Allow override "calendar" css class

Just took your recent SANDBOX: https://codesandbox.io/s/romantic-farrell-5mgm9d?file=/calendar.js

It allows me combine class for "grid"

But not for "calendar". Am I missing something?

Add month and year selection in type: 'multiple'

year selection in type: 'multiple'

Если календарь состоит из 3 месяцев, и третьим выбран январь, то при переключении года (у третьего месяца), устанавливается не актуальная дата, выбранный год смещается на два назад

SyntaxError : "i" has already been declared (only for version 2.5.0 and above)

One version below 2.5.0 is 2.4.0 which works perfectly.
All versions after2.4.0till 2.6.1 has this error
Is this a bug?

Custom lang doesn't work with monts

Hi!

If you set your custom "language", months return "undefined" with this config in Docs

new VanillaCalendar('#calendar', { settings: { lang: 'define', }, locale: { months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], }, });

fix: documentation description error

Hi uvarov, love your vanilla calendar it is so cool.
I found an description error in documentation website about the setting.range.enabled:
https://vanilla-calendar.frontend.uvarov.tech/en/documentation/

[Request] Week number clickable

Thanks for the nice calendar!

I have an idea for an improvement: Make the week number clickable and show the selected week number and/or the displayed week with a bar.

Is it possible to remove build/_vanilla-calendar.min.css ?

I'm trying to include vanilla-calendar.min.css into my .scss file to create a single .css output

But because of _vanilla-calendar.min.css it can't do that due to the file name being essentially the same.

Error: It's not clear which file to import. Found:
[16:32:51 ERR] [email protected]\vanilla-calendar\build\_vanilla-calendar.min.css
[16:32:51 ERR] [email protected]\vanilla-calendar\build\vanilla-calendar.min.css

border effect with the vanilla-calendar-min.js

Hello, the minimified vanilla-calendar-min.js script can make some border-effect bugs with others scripts. ( it create somme global variables, and specialy a "b" variable. )
I correct the effect adding a simple auto-called function :
(function(){ ... all the code ... })();

( and thank you for your wonderfull code ! )

Add option to turn off past days

Days that have already ended should be disabled.

Disabling selection does not prevent the day from being focusable

I need your calendar to display specific dates for events, so I chose to disable the selection of a date:

 settings: {
    selection: {
      // day: false,
      day: 'single',
    },
  },

The problem I have with this is that while I cannot click on the date anymore, tabbing still focuses on not clickable days which should not be the case from an accessibility point of view.

Does a solution exists for this within this plugin, or do I have to add a script on top of it?

Option to only select ranges that are continuously enabled

Main idea: #43

[Question] Month Step

Considering the layout with multiples months at #100 , is there any workaround to control month steps when arrows is clicked?

Example:

• If a have months=X it would be useful to jump X months forward/backward when arrows are clicked.

Add the ability to specify a date range for all date arrays.

Main idea: Preselect range #42

[Feature proposal] Highlighting the date range on hover, before I click to select the second date

This would be great for UX, as currently there is no way the user can tell when range mode is on.
p.s. great work on the plugin :)

Date picker in input: calendar doesn't close when input is inside a label element.

Adding 'vanilla-calendar_hidden' to the calendar element in changeToInput() doesn't hide it after picking a date when the target input is inside a label element.

To reproduce this issue, replace the input in https://codesandbox.io/s/hf3cgy?file=/index.html&utm_medium=sandpack with the code below:
<label>Text <input id="calendar-input" type="text" readonly /></label>

Now, pick a date and see if the calendar closes.

Add the ability to control how you are allowed to switch month and year.

It is necessary to add new values ​​for settings.selection.month and settings.selection.year with type string to be able to control how the month and year are switched.

Possible options:

1. Only arrows - 'only-arrows';
2. Only by titles - 'only-title';
3. Arrows and click on the corresponding heading. - true;
4. It is forbidden to select a month or year - false;

Pass in `dates` parameter in `clickWeekNumber` click handler

Hi, I'm using your calendar to develop a system where I need to click a week number, and have all days of that week selected.

At the moment, I need to get a reference to the calendar in the clickWeekNumber click handler and then add the days, as a workaround, but it is rather cumbersome.

I can change the selected days directly in the clickDay handler (although I don't know if it was intended to work like this), by manipulating the dates parameter, but that parameter is not present in the clickWeekNumber handler.

Would it be possible to add the dates parameter to the clickWeekNumber handler as well?

Thanks

Minification causes conflict with underscore.js

Hi,

I am currently using Vanilla Calendar in a WordPress project. When adding the minified script (vanilla-calendar.min.js), I suddenly have a lot of JS console errors.

I have investigated the issue and found, that the minification itself seems to cause the problem:

WordPress itself has underscore.js available in a global window variable _, which is overridden by the function getActiveTheme by just including the minified Vanilla Calendar script.

So const getActiveTheme becomes const _= due to the minification (at least in the latest two releases), which causes the issue.

I am not sure how exactly your build / minification step is setup, but can you please add some sort of exception for this?
(So that _ may not be used to replace variable names?)

Thanks!

Disable days of the week

Main idea: #50

Enlarge the entire component

Hello there!

Thank you so much for creating this fantastic library.

I have two questions:

• Would you mind showing me the right way of enlarging the entire component? Currently, the vanilla-calendar class has a height and width set to max-content. I'm interested in scaling everything to be slightly larger so that I can add decorations to each date (for example, displaying icons or text next to the date number).
• Would you mind showing me the right way of decorating (or replacing) each date (currently represented as button elements) on the component?

Thank you in advance!

react

    const calendar = new VanillaCalendar(calendarEl.current, {
        settings: {
            lang: 'en',
            selection: {
                time: 12,
            },
        },
    });
    console.log(calendar.settings);
    calendar.init();
}, [calendarEl]);

'VanillaCalendar<HTMLDivElement, { settings: { lang: string; selection: { time: number; }; }; }>' 형식에 'settings' 속성이 없습니다.

I want to get the value of calendar.settings.slected.dates.

I get the value, but I keep getting a type error. Can you tell me how to solve it?

Npm package install error

Hello, I tried to install the package with npm, but I have a parsing error due to the "@" symbol, here is the error I translated in english:

+ npm install @uvarov.frontend/vanilla-calendar
+ ~~~~~~~
Cannot use the "@" projection operator to reference variables in an expression. “@uvarov” can only be used as an argument to a command. To reference variables
in an expression, use “$uvarov”.
    + CategoryInfo: ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId: SplattingNotPermitted

Do someone have an idea of what can I do ? Thank you

Months not showing correctly

I've noticed that sometimes the calendar will skip a month, repeating current month in its place.
The following screen capture is from a site I'm build using Vanilla Calendar with the 'multiple' option:

(The word "Março" translates to "March" in portuguese).
In the picture, month "february" is skipped, and "March" ("Março" in the image), which is the current month, gets repeated in its place.

I thought it could be a configuration issue, but then I went to the official site and saw this:

WhatsApp.Video.2023-03-30.at.16.21.47.mp4

As can be ssen, the official site, without the 'multiple' option, shows "march" two times, skipping "February".
Any workaround or something I can change?

Thanks

Add the ability to deselect a date range

• Cancel when clicking on start date
• Cancel on pressing the esc key

Programmatically change date on the calendar

I cannot find anywhere how can I change date/time to the calendar. Some method/event.
Thank you in advance

Calendar from input - dropdown direction

Hi, I encountered an issue while working with the calendar in input.

The current implementation doesn't determine the direction of the dropdown which results in dropping the date picker below the input - ignoring the viewport.

Compared to the native input calendar which handles that scenario:

Is there a way to handle it or plans for that enhancement? Thanks

Standard action executed after hook

If I set an action for ClickDay() I don't want to execute the standard select/deselect action afterwards.
But if I set day selection to false, the event doesn't fire.
There should be a way to perform action without executing standard events.
Returning false from ClickDay() should do the trick IMHO.

Calendar `mutiple` does not show PREV arrow

This issue is present on landing page and across docs pages.

New features in future releases

• Show multiple months, example attached
• Do not create days from past and future months

[Request] Display week number

I was wondering if there are any plans to support the option to enable week numbers in the calendar? Not sure about the rest of the world, but here in Norway we very often refer to dates using week numbers. The ability to enable this would therefore be very useful.

Ability to enable only a range of dates

First, thanks for your work.

Will be great if we could select a range of the dates to be enabled; this should be the opposite of settings.range.disabled

My use case is:

There are only three available dates to select in a given month. For example

enable: ['2022-01-20', '2022-01-25', '2022-01-26']

The docs state that we can use:

disabled: ['...', ... ]

But, if you want to enable only these there dates we need to pass 27 dates on the disabled options instead of 3.

Does this make sense?

Add date and time picker in «input»

Instead of the old solution, need to embed the date and time picker in input out of the box. https://codesandbox.io/s/red-leftpad-wtlobm?file=/index.js

In the context of a calendar, input must be either an <input /> tag or any other html tag containing the date and time. For example: <div></div>.

TODO:

• Add a calendar to the pop-up that will be shown on click on the input.
  Add the ability to change the date and time through editing the input.

Build Process?

What is your build process to generate the .min versions?

Отображение дополнительной информации в дне календаря.

Подскажите пожалуйста, как можно сделать отображение какой-либо информации в каком либо из дней календаря?

К примеру - у меня есть массив из дат, и минимальных цен на эти даты. Как можно было бы сразу визуально в календаре под каждым из дней выводить минимальную цену на этот день?

How to modify DOM?

Hello,
How can i modify DOM?

Calendar not updating disabled or selected dates

According to the documentation (https://vanilla-calendar.com/docs/reference/main/initialize-and-update) the settings can be updated and applied using the update method.

I tried to update the disabled and selected dates but it does not seem to be doing anything, see here:

https://codesandbox.io/s/brave-thunder-4gegn7?file=/calendar.js

Edit: Issue is only with 2.5.7, after downgrading to 2.5.6 it works as expected.

.vanilla-calendar_hidden

У меня два календаря на странице, один открывается из инпута, а второй показывается всегда, и когда первый календарь закрывается то на оба навешивается класс .vanilla-calendar_hidden, ну и соответственно оба календаря скрываются

Why do you use the word Vanilla in the project when it's TypeScript?

See title …

You could fix this by ALSO providing a vanilla version ; )

Prev click with `jumpMonths`

Hi,

What is correct setup to make jumpMonths work properly?

const options = {
  type: "multiple",
  months: 3,
  jumpMonths: 3
};

It jumps forwards correctly. But not backwards.

https://codesandbox.io/s/brave-snowflake-csqfzg?file=/calendar.js

Show additional days if month ends on a Sunday (Saturday with ISO8601)

I am using this project to let customers select a day to book an appointment. If on the 31st, there are no time slots available today, the customer needs to select another date - that's most probably tomorrow. If the current month ends on a Sunday, the user has to click to the next month in order to select another date. It would be very convenient to maybe have one more week listed below. If a user clicks one of them, it could automatically turn to the next month.

Add selectors for selected days

Add selectors for div elements to style in the future.

Multiple input calendars issue

Hi.
Some context first - for my current project I need a simple calendar with option to set the locale based on the language of the application. After some initial tests it seems like vanilla-calendar is a good solution.

However - in version 2.6.0 (i checked a few earlier ones, and the issue was also there) - it seems like, when I try to use more than one calendar with two input fields, the closing of the calendar (when you click-away) only works with the last initialized one. Simple reproduction can be done with the following code:

<input id="calendar-input1" type="text" placeholder="Choose date" readonly />
<input id="calendar-input2" type="text" placeholder="Choose date" readonly />

const calendar = new VanillaCalendar('#calendar-input1', {input:true});
const calendar2 = new VanillaCalendar('#calendar-input2', {input:true});

calendar.init();
calendar2.init();

The current behaviour produces the following result:

^ 1 - click on the input field shows the calendar, 2 - click away doesn't hide the calendar

^ 3 - click on the second input shows the second calendar, 4 - click away hides only the second calendar.

I tried to create a CodeSandbox, hopefully it will work - https://codesandbox.io/s/vigilant-kate-fh4vdr?file=/calendar.js

Let me know if there is any solution for this issue :) Thanks!

breaking Jquery

When trying to use vanilla calendar, commands using $(query) stop working

TypeError: update is not a function in 2.0.0

Some missing methods:
TypeError: update is not a function

Waiting for a new version. Thanks.

In US our calendars go sun-sat

Sun Mon Tues Wed Thurs Fri Sat

yours goes

Mon Tues Wed Thurs Fri Sat Sun

there's an option that I assumed would fix this:
`locale: {
weekday: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
}
but alas it does not.

Having an issue on getting year and month by clicking on arrows and on page load.

I want to get year and month when it changes after clicking the arrows and on page load. Is there any way to get those? Thanks.

Popup's dates only show in current month

Hi there, It's me again.
Following the same example in Docs, I want to set a popup in multiples dates across the year, but the script only show these marked days in the current month, if you click in next month, doesn't show at all.

I create a sandbox with an example: https://w2ot96.csb.app/

Only show dates in August but in September doesn't show anything.

Anual Layout

Hi, great job!

Is it possible to make this kind of annual layout?

...

I have tried type="multiple" and months="12" , but I got this. Maybe some setting like rows/columns ?

How about showing today by local time rather than UTC?

Hi,

My current timezone is UTC+08 when I set my system time to 2022-08-31 03:00, I think the date today should be 31, but vanilla-calendar shows the date of today is 30.

After reading the code, I found it uses UTC date as today:

https://github.com/uvarov-frontend/vanilla-calendar/blob/b95971625bc649d6327b77e776570ad2194e42f4/src/vanilla-calendar.js#L452-L462

I think it would be more friendly if it shows today by local timezone.