Calendar Click By Style Color?

Hello Guy's is there anyway i can Click a Calendar By Color Style ? this is what i got : ).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
    }
});

Solution 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 = newFullCalendar.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/eventClickeventClick: 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/1762224setTimeout(() => $(info.el).find('.fc-content').trigger('click'), 500)
    }
  });
  calendar.render();
});

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

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