(Полный календарь) Автоматическое нажатие на дни с использованием серверной информации

Question

Мне нужен мой Fullcalendar для автоматического щелчка двух дат, вот как я сделал свой dayClick:

 dayClick: function (date) {
    if ($(this).css('background-color') == 'rgb(33, 115, 240)') {
      $(this).css({
        'background-color': 'white'
      })
    } else {
      $(this).css({
        'background-color': '#2173f0'
      })
    }
  }

Работает нормально, когда я нажимаю на день, этот день становится синим, когда я нажимаю на него снова, он становится белым. Дело в том, что мой пользователь выбирает два дня в теге <input>, когда эти дни выбраны, мне нужен полный календарь, чтобы автоматически щелкнуть эти дни, чтобы они стали синими.

Это идея:

Сначала вы увидите поле, где вы печатаете через два дня,
fullcalendar ответит и станет в эти дни синим,
тогда вы будете выбирать другие дни, используя сам полный календарь

я написал что-то вроде этого:

  sendDate(val: any) { //this method will be called the the inputs are filled
    var dataIni =val.metasForm.value.gesMetasDtini;
    var dataFim =val.metasForm.value.gesMetasDtfim;
    //this gets the dates

    if (dataIni != null && dataFim != null) {
     $("#calendar").dayClick(dataIni);
     $("#calendar").dayClick(dataFim);
    }
  }

Дело в том, что в те дни это на самом деле не синеет. Есть ли другой способ для меня это сделать?

РЕДАКТИРОВАТЬ: еще немного кода

календарь:

<div id="form-group" class="left" style="width: 90%">
            <ng-fullcalendar id="calendar"></ng-fullcalendar>
        <br><br>
</div>

вход:

<div id="form-group" class="left">
    <input id="ini" placeholder="Data de Início" type="text" 
        formControlName="gesMetasDtini" class="form-control" (change)="sendDate(this)">
    <br>
</div>

<div id="form-group" class="right">
    <input id="fim" placeholder="Data de Fim" type="text" 
    formControlName="gesMetasDtfim" class="form-control" (change)="sendDate(this)">
    <br>
</div>

Методы:

$('#calendar').fullCalendar({
  //selectable: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: ''
  },
  dayClick: function (date) {

   // var DiaSemana = date._d.toString();
   // DiaSemana = DiaSemana.substring(0, 3);

   // if (DiaSemana == 'Sat' || DiaSemana == 'Fri') {
   //   console.log('fim de semana')
   // }

    if ($(this).css('background-color') == 'rgb(33, 115, 240)') {
      $(this).css({
        'background-color': 'white'
      })
    } else {
      $(this).css({
        'background-color': '#2173f0'
      })
    }
  }

});

Answer 1

Из вашего кода:

$("#calendar").dayClick(

... в fullCalendar такой документ не описан, поэтому я не уверен, откуда у вас появилась идея его использовать. Есть только dayClick callback , о котором вы уже знаете.

Вместо этого вы должны указать целевой элемент HTML. К счастью, у этого элемента есть данные, описывающие, какой сегодня день. Так что-то вроде

$('.fc-day[data-date="2019-01-05"').css("background-color", "blue"); 

будет работать. Вот демонстрационная программа, которая запускает этот код каждый раз при рендеринге представления: http://jsfiddle.net/7nsbjya5.

Все, что вам нужно сделать сейчас, это интегрировать это с вашим <input> элементом управления подходящим образом для удовлетворения ваших требований.