Question

您好，盖伊，我可以单击“按颜色排列日历”吗？

这就是我得到的：

<td class="fc-day fc-wed fc-widget-content fc-future" data-date="2019-12-18" style="background-color: rgb(188, 237, 145); cursor: pointer;"><div><div class="fc-day-number">18</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td>

选择哪一天都没关系，我只希望扣动扳机即可单击特定的颜色样式

这里的日历表ID：

<div id="calendar" class="fc fc-ltr"><table class="fc-header"

AnyIdea如何在Js / Jquery上做到这一点

Answer 1

更新，请考虑您的评论：

$('.fc-day').filter((x) => {return x.css('background-color') == 'rgb(188, 237, 145)'}).click();

是您想要的。

================================================ ============================= 您可以过滤项目以获取具有所需颜色样式的项目，然后对它们应用单击：

$('.fc-day').filter((x) => {return x.css('background-color') == 'rgb(188, 237, 145)'})
.on('click', function(){
    //content of your function
});

在单击后检查它们是否具有所需的颜色

$('.fc-day').on('click', function(){
    if($(this).css('background-color') == 'rgb(188, 237, 145)')
    {
         //content of your function
    }
});

Answer 2

更新：该日历具有一个eventClick事件监听器。只需听一下点击并评估clicked event的背景色即可。

eventClick: function(info) {
  if (info.event.backgroundColor === 'rgb(188, 237, 145)') {
    alert('You clicked: "' + info.event.title + '"');
  }
}

如果要检测是否为ON RENDER，请使用eventRender：

您必须等待.fc-content div才能在元素内呈现，然后才能触发click事件。我用了一个仲裁等待半秒钟。您可以使用MutationObserver等待该元素呈现。

setTimeout(() => $(info.el).find('.fc-content').trigger('click'), 500)

用法

eventRender: function(info) {
  if (info.event.backgroundColor === 'rgb(188, 237, 145)') {
    alert('Rendered: "' + info.event.title + '"');
    setTimeout(() => $(info.el).find('.fc-content').trigger('click'), 500);
  }
}

示例

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid', 'timeGrid'],
    defaultView: 'dayGridMonth',
    allDaySlot: true,
    nowIndicator: true,
    hiddenDays: [0, 6],
    slotDuration: '00:30:00',
    minTime: "08:00:00",
    maxTime: "17:00:00",
    slotEventOverlap: false,
    handleWindowResize: true,
    eventLimit: true,
    displayEventEnd: true,
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    events: [{
      id: 'dec-25',
      title: 'Christmas',
      start: '2019-12-25',
      end: '2019-12-25',
      allDay: true,
      backgroundColor: 'rgb(188, 237, 145)'
    }],
    // See: https://fullcalendar.io/docs/eventClick
    eventClick: function(info) {
      if (info.event.backgroundColor === 'rgb(188, 237, 145)') {
        alert('You clicked: "' + info.event.title + '"');
      }
    },
    eventRender: function(info) {
      if (info.event.backgroundColor === 'rgb(188, 237, 145)') {
        // No need to alert this state, it will forward to the click...
        //alert('Rendered: "' + info.event.title + '"');
      }
      // Wait half a second for the content to render, this is the clickable area.
      // You could use mutation observer to watch this...
      // Inspired by this: https://stackoverflow.com/a/40848595/1762224
      setTimeout(() => $(info.el).find('.fc-content').trigger('click'), 500)
    }
  });
  calendar.render();
});

.fc-day-grid-event {
  cursor: pointer;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.js"></script>
<div id="calendar"></div>

日历单击样式颜色？

2 个答案:

用法

示例