<div class="if app">
  
  <main class="if main">
  <div class="if block">
          <div class="if container">
            <form class="if" autocomplete="off">
              <div class="if input-wrapper">
                <input type="text" class="if input-field date is-optional" />
                <label class="if input-label">Marked special day</label>
                <div class="if input-error">Please enter a valid date</div>
                <ids-datepicker data-open data-init-date="2021-05-20T03:24:00" id="marked-special-day"> </ids-datepicker>
              </div>
              <button type="submit" class="if primary button">Send inn</button>
            </form>
          </div>
        </div>  
  </main>
  
</div>

document.addEventListener('ids:send:datepicker', e => {
          const {
            detail: { payload, type },
          } = e;
          if (type === 'IDS_DATEPICKER_YEAR_SHOWN') {
            const { year } = payload;
            _current_year = year;

            updateDatepickerHolidays(_current_language_page);
          }
        });
        
        const _html_el = document.querySelector('html');
        let _current_language_page = _html_el.getAttribute('lang') || 'en';
        let _current_language_browser = navigator.language;
        let _current_year = 2021;

        const _datepicker_wc_els = document.querySelectorAll('ids-datepicker');


        const getSpecialDays = holidays => {
          const _special_days = {};

          Object.keys(holidays)
            .filter(idx => {
              const { type } = holidays[idx];
              if (type !== 'observance') {
                return true;
              }

              return false;
            })
            .forEach(day => {
              const _temp_date_obj = new Date(holidays[day].date);
              _special_days[_temp_date_obj.getTime()] = holidays[day];
            });

          return _special_days;
        };

        const updateDatepickerHolidays = lang => {
          const _marked_special_day_datepicker_wc = document.getElementById('marked-special-day');
          if (lang == 'et') lang = 'ee';
          if (lang == 'en') lang = 'no';
          const _hd = new Holidays.default(lang);
          const _holidays = _hd.getHolidays(_current_year);

          const _special_days = getSpecialDays(_holidays);

          _marked_special_day_datepicker_wc.specialDays = _special_days;
        };


        const _marked_special_day_datepicker_wc = document.getElementById('marked-special-day');

        const _hd = new Holidays.default('no');
        const _holidays = _hd.getHolidays(_current_year);
        const _special_days = getSpecialDays(_holidays);
        _marked_special_day_datepicker_wc.specialDays = _special_days;