Single selection for when Month or Year is active.

[radesai21]

Is your feature request related to a problem? Please describe. It would be great to have the ability to restrict the cron schedule to only happen once when Every Month or Every Year is active. Currently when month or year is selected the schedule contains an AND <Day of the Week>. See screenshot of example page below.

Describe the solution you'd like Ideally if its possible a new config or using the same mode='single' to hide that dropdown when month or year is selected.

My goal is to be able to read the following: 'Every month on 4 at 3:30' 'Every year in APR on 4 at 3:30'

Describe alternatives you've considered I have tried to hide the dropdown using CSS through the className prop & overriding the schedule value in the setValue callback. I ran into issues with that route because when you flip from week to month or week to year the schedule is not changed. The value remains the same making it hard to know wether month or year is currently selected

Additional context

[xrutayisire]

Hello,

First thank for using this package and for this well described issue!

I just a release the new v2.0.0 containing a new feature for you 🥳

2 new props: allowedDropdowns and allowedPeriods.

Now you should be able to hide the week-days dropdown as in your example:

[radesai21]

This is nice to have! However it seems to only address half of the issue. While the dropdowns are not visible with the new props, the schedule still occurs twice when monthly or yearly is selected even though the dropdowns display:

'Every month on 4 at 6:00' The schedule is actually set on: 0 6 4 * 0 (At 06:00 on day-of-month 4 AND on Sunday)

'Every year in APR on 4 at 6:0' The schedule is actually set on: 0 6 4 4 0 (At 06:00 on day-of-month 4 AND on Sunday in April.)

The problem is that it still uses that AND <Day of the Week> condition in the schedule when though its not displayed in the dropdowns. Please take a look at the screenshot below using the example page for dynamic settings.

There is also another issue that should be addressed when allowedDropdowns is ['period', 'month', 'month-days', 'hours'] and allowedPeriods is ['year', 'month', 'week']. When week is selected, the week-days dropdown should be displayed so a user can still select which day of the week to set the schedule to. Not just the time on Sunday.

[xrutayisire]

Hum, I don’t really understand the issue, how did you put the 0 for Sunday? The goal of the feature is to not let the user select the week day, so user should not be able to select Sunday at all. If there is another way to set 0 I think it’s outside of the component scope. With the new feature you let the user change anything but the week days.

For your second point, the component don’t handle the logic between the two props. If you decide to remove the week days dropdown it will not be displayed. Even if week is selected. The component don’t know the logic you want to apply.

Maybe it could be a new feature that allow you to know which period is selected and so dev can apply some logic for the allowedDropdowns props depending on the period?

[radesai21]

I did not change the cron value, I believe the issue comes from switching from week to month or week to year. Here is a gif of how I ended up in that state for the component: (I first started with the component resetted)

For the second point, it would be awesome to know which period is selected. That's the main issue I'm running into in my use case for this component. There isn't an easy way to tell which period is selected where I can apply my specific logic to the allowedDropdowns prop. I am currently using plain JS to select the period dropdown from the DOM & checking its value. So if there is a feature you might be able to add where we know the period that is selected then it would make it much easier!

[xrutayisire]

Oh ! I understand why you have this 0 for Sunday, it’s because you set « @ weekly » for default value. Because of this, weekly set 0 for Sunday and it’s normal it’s the proper way to handle the shortcut weekly. (https://gist.github.com/jpluimers/6510369) Can you set something else in your app instead of weekly?

I will think a bit more about this new feature but it could be on the setValue prop, a new param « selectedPeriod » after the first param for the new value. What do you think about this?

[radesai21]

An extra parameter on the setValue prop would be very helpful!

As for the default value being weekly - I don't think there's a way for my app to use something else. The schedules we have stored are weekly with a day of the week set such as: 0 0 * * 0. So when switching from week to month or week to year the schedule will still have 0 set. That's one of the reasons why I was looking for the week day dropdown to be displayed even when it was not defined on the allowedDropdowns prop. It's not a problem if there is nothing you can do on your end!

Having an extra parameter on the setValue prop to know which period is selected will allow me to get around that issue so it should not be a problem at that point.

Thank you for the fast responses and quick turnaround on v2.0.0!!

[xrutayisire]

Thanks! 😃

I just added a new param for the setValue function named "extra". I preferred an object if one day I need to add another param in it. In extra you will find "selectedPeriod".

Before publishing a new version, can you tell me if it's good for you like this?

Demo: https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--track-selected-period

[radesai21]

Yes this works!

Thanks again Xavier!!

[xrutayisire]

New release v2.1.0 with the new feature to know the selected period 🥳