How to extend calendar with additional elements

[bnisevic]

Is your feature request related to a problem? Please describe. What is the proper way to extend the calendar with links like "last 7 days". "last two weeks", "last month". These links would be listed next to the calendar. And when a user clicks on one of these links the corresponding date range will be selected.

[hihahihahoho]

There is already an plugins for this https://litepicker.com/docs/plugins/ranges/

[bnisevic]

Thanks for helpful information! Can you also tell if it is possible to style weekend days? The days on weekend should be gray, other days should be black. Right now there is no different class for weekend days, all days have the same class "day-item".

[hihahihahoho]

you can do it with css only

.container__days > div:nth-child(7n) {
    background: blue;
}

.container__days > div:nth-child(7n - 1) {
    background: blue;
}

[wakirin]

...
  setup: (picker) => {
    picker.on('render:day', (day, date) => {
     const d = date.getDay();

      if ([6, 0].includes(d)) {
        day.classList.add('is-weekend-day');
      }
    });
  }
...

https://jsfiddle.net/fbnj5zda/

[bnisevic]

Thanks guys!