Question

我需要我的Fullcalendar来自动单击两个日期，这就是我的一天点击的方式：

 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 回调。

相反，您必须定位HTML元素本身。幸运的是，此元素具有描述当天的数据。像

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

将起作用。这是一个演示，它在每次视图渲染时运行该代码：http://jsfiddle.net/7nsbjya5。

您现在所要做的就是以合适的方式将其与<input>控件集成，以满足您的需求。

（全日历）使用后端信息的自动点击天数

1 个答案: