popups.modifier

[PavlenkoVladimirViktorovich]

Не получается изменить цвет, не у даты, не у фона, при этом сам popup работает и настройки html отображаются
Вот полная функция конструктора, может я что-то не досмотрел?

function pvvVanillaCreateCalendar (idOBJVanila,qMonth,jMonth,weekNumbersbool,selectedTypeDate,vanilaTheme,vanilaLang,vanilaFirstDayWeek,selectDay,selectMonth,selectYear,onClickedDate,onClickedWeek,onClickedMonth,onClickedYear,onClickedArrow,inputBool){

  if (!weekNumbersbool){weekNumbersbool = false};
  if (!inputBool){inputBool = false};
  if (!vanilaLang){vanilaLang = 'Русский'};

  var qType = 'default';
  TypeDate = 'single';
  if (qMonth >= 2){qType = 'multiple'};
  if (selectedTypeDate == 'Отдельные даты.') {TypeDate = 'multiple'};
  if (selectedTypeDate == 'Диапазон даты.') {TypeDate = 'multiple-ranged'};
  if (selectedTypeDate == 'Запретить выбор.'){TypeDate = false};
  if (vanilaTheme == 'Тёмная.'){
  vanilaTheme = 'dark';
  document.getElementById(idOBJVanila).style.background="#0F172A";
  }else{
  vanilaTheme='light';
  document.getElementById(idOBJVanila).style.background="#FFFFFF";
  };
  if (vanilaFirstDayWeek == 'Воскресенье.'){vanilaFirstDayWeek = false;}else{vanilaFirstDayWeek=true;};


  const options = {
  input: inputBool,
  type: qType,
  months: qMonth,
  jumpMonths: parseInt(jMonth),
  settings: {
    lang: selectLang(vanilaLang),
    iso8601: vanilaFirstDayWeek,
    range: {
      disablePast: false,
      min:'' ,
      max:'' ,
      disablePast: false ,
      disableGaps: false,
      disableAllDays: false,
      disableWeekday: '',
      disabled: '',
      enabled: '',
     },
     selection: {
     day: TypeDate,
     month: true,
     year: true,
     },
     selected: {
    },
      visibility: {
       theme: vanilaTheme,
       weekend:true,
       daysOutside: true,
       weekNumbers: weekNumbersbool,
     },
   },
   actions: {
      changeToInput(e, calendar, self) {

      if (!self.HTMLInputElement) return;

      if (self.selectedDates[1]) {
        if (self.settings.selection.day == 'multiple-ranged') {
           self.HTMLInputElement.value = self.selectedDates[0] +" — "+ self.selectedDates.slice(-1);
           calendar.hide();
           };
        if (self.settings.selection.day == 'multiple') {
              self.HTMLInputElement.value = self.selectedDates;
           };
      } else if (self.selectedDates[0]){
        self.HTMLInputElement.value = self.selectedDates[0];
        if (self.settings.selection.day == 'single') {calendar.hide()};
      } else {
        self.HTMLInputElement.value = "";
      }
    },

    clickDay(event, self) {
       console.log(onClickedDate);
       if (selectDay) {$App[selectDay] = self.selectedDates};
       if (onClickedDate){onClickedDate(self.selectedDates)};
       console.log(self.settings.popups);
    },
    clickWeekNumber(event, number, days, year, self) {
      if (onClickedWeek){onClickedWeek(number,year,arraydays(days))};
    },
    clickMonth(e, self) {
        if (selectMonth !== "undefined"){$App[selectMonth] = self.selectedMonth};
        if (onClickedMonth){onClickedMonth(self.selectedMonth,pvvGetNameMonth(self.selectedMonth,$App["vcalendar"+idOBJVanila].settings.range.disableGaps))};
    },
    clickYear(event, self) {
        if (selectYear !== "undefined"){$App[selectYear] = self.selectedYear};
        if (onClickedYear){onClickedYear(self.selectedYear)};
    },
    clickArrow(event, self) {
       if (onClickedArrow){onClickedArrow(self.selectedYear, self.selectedMonth,pvvGetNameMonth(self.selectedMonth,$App["vcalendar"+idOBJVanila].settings.range.disableGaps))};
    },
  },
  popups: {
    '2024-03-21': {
      modifier: 'bg-red color-pink',
      html: `<div>
        <u><b>12:00 PM</b></u>
        <p style="margin: 5px 0 0;">Airplane in Las Vegas</p>
      </div>`,
      // or just text
      // html: 'Airplane in Las Vegas',
    },
  }
  };

  $App["vcalendar"+idOBJVanila ] = new VanillaCalendar( "#"+idOBJVanila, options);
  $App["vcalendar"+idOBJVanila ].init();

};

[PavlenkoVladimirViktorovich]

[uvarov-frontend]

В документации указаны bg-red и color-pink в качестве примера. Таких классов не существует в данном календаре. Нужно самостоятельно создать любой класс и указать его в modifier, если классов несколько, то использовать пробел в качестве разделителя.