Change the color of SPECIFIC event in fullCalendar to Red/Green

Question

I am trying to change the color of one specific to Red or Green when I right click it. At the moment, when I right click and change the color, it changes the color of all events, which is not what I want. I need that particular targetted event only. .fc-event refers to all events but how do I denote a specific event.

All the events are being parsed via JSON object and presented on the calendar.

Here is what I have done so far, any help would be greatly appreciated :-

$(document).bind("contextmenu", function (event) { 
 event.preventDefault();

 $(".custom-menu").data('event', $(this)).finish().toggle(100).
 css({
   top: event.pageY + "px",
   left: event.pageX + "px"
 });
});


$(document).bind("mousedown", function(e) {
 // If the clicked element is not the menu
 if (!$(e.target).parents(".custom-menu").length > 0) {
  // Hide it
   $(".custom-menu").hide(100);
 }
});

// If the menu element is clicked
$("ul.custom-menu li").click(function() {
 switch($(this).attr("data-action")) {    
    case "red": 
     var $event = $(".fc-event");
     $event.css("background-color","red");
      break;       
    case "green": 
      var $event = $(".fc-event");
      $event.css("background-color","green"); 
      break;
   }
   // Hide it AFTER the action was triggered
   $(".custom-menu").hide(100);
 });

Here is the calender being displayed.

 $(document).ready(function() {
   var date = new Date();
   var d = date.getDate();
   var m = date.getMonth();
   var y = date.getFullYear();

 var calendar = $('#calendar').fullCalendar({
   editable: true,
   header: {
   left: 'prev,next today',
   center: 'title',
   right: 'month,agendaWeek,agendaDay'
  },

  events: "events.php");
})

Any assistance on how this will be done would be appreciated.

Regards,

In the click function, couldn't you just use `$(this)` and set the background color of the `
that li element is the `contextmenu` dropdown, it changes the dropdown element to red. — Umar Aftab, Apr 21 '16 at 15:44
The `.fc-event` is the calendar event generated by full calendar. — Umar Aftab, Apr 21 '16 at 15:45
Okay that makes sense, sorry I misread what object needed it's color updated. Can you post some html so we can figure out what object you're trying to select? — xCRKx TyPHooN, Apr 21 '16 at 15:47
Possible duplicate of [How to change the color of a fullcalendar event on right click](http://stackoverflow.com/questions/36284513/how-to-change-the-color-of-a-fullcalendar-event-on-right-click) — smcd, Apr 21 '16 at 16:19
@smcd Its not a duplicate because they are different questions. And the one you are linking is asking how to change the color. This one asks how to SINGLE out an event and not all the EVENTS. Which means I am able to change color but not for ONE SPECIFIC Event — Umar Aftab, Apr 21 '16 at 18:14
@xCRKxTyPHooN The html is auto generated for this calendar, checkout :http://fullcalendar.io/ — Umar Aftab, Apr 21 '16 at 18:15

Change the color of SPECIFIC event in fullCalendar to Red/Green

0 Answers0