日历点击样式颜色？

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>

选择哪一天都没有关系我只想要触发点击点击特定的颜色样式

这里是日历 Table ID :

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

AnyIdea 如何在 Js/Jquery

上做到这一点

Answer 1

更新： 日历有一个 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 在元素内部呈现，然后才能触发点击事件。我用了 arbitray 等待半秒。您可以使用 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: 
      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>

Answer 2

更新考虑到您的评论：

$('.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
    }
});

日历点击样式颜色？

Calendar Click By Style Color?

javascript

jquery

fullcalendar

用法

例子