Calendar Click By Style Color?

问题

Hello Guy's is there anyway i can Click a Calendar By Color Style ?

this is what i got :

<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>

it dosn't matter what day choose i only want the Trigger Click to Click on the specific Color Style

Here the Calendar Table ID :

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

AnyIdea How To Do that on Js/Jquery

回答1:

Update considering your comment:

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

is what you want.

============================================================================= You can either filter the items to get items with the color style you want and then apply click to them:

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

check if they have the color you want after they are clicked:

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

回答2:

Update: The calendar has an eventClick event listener. Just listen for the click and evaluate the background color of the clicked event.

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

If you want to detect is ON RENDER, use eventRender:

You will have to WAIT for the .fc-content div to render inside the element before you can trigger the click event. I used an arbitray wait for half a second. You could use MutationObserver to wait for the element to render.

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

Usage

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);
  }
}

Example

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>

来源：https://stackoverflow.com/questions/59377477/calendar-click-by-style-color

标签

javascript

jquery

fullcalendar