Changing the background color of an event in full calendar with right click - NOT WORKING

Question

All the events in the full calendar are denoted by the class .fc-event and when I want to bind the right click functionality to .fc-event it does not work and the prevent default action from the JS does not trigger. So what I did is that I replaced it with (document).bind and that does seem to trigger the right click contextmenu. However, the main issue is that when I click red or green in the right click object it does trigger the alert. But the color does not change. I need assistance in changing the color of the event.

Regards,

I have created a custom menu in HTML :-

  <ul class="custom-menu">
   <li data-action="red" data-color="red">Red/Rouge</li>
   <li data-action="green" data-color="green">Green/Verg</li>    
  </ul>

And the JS is as such, obviously I have taken assistance from different post but could not get the red color to show up.

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

     event.preventDefault();

  $(".custom-menu").data('event', $(this)).finish().toggle(100).

 css({
   top: event.pageY + "px",
   left: event.pageX + "px"
  });
});

 // If the document is clicked somewhere
 $(document).bind("mousedown", function(e) {

   if (!$(e.target).parents(".custom-menu").length > 0) {

   $(".custom-menu").hide(100);
   }
  });

 // If the menu element is clicked
$("ul.custom-menu li").click(function() {

 //var $event = $(this).parent().data('event');

 // var color = $(this).attr('data-color') || 'lightblue'; // Default to light blue

 // $event.css('background-color', color);
 switch($(this).attr("data-action")) {


    case "red": 

     var $event = $(".fc-event").attr('data-color');
     $event.css('background-color',red);
 //   alert("first"); break;

    case "green": 

  //  alert("second"); break;

}



  $(".custom-menu").hide(100);
});

And the CSS is as follows:-

#red{
    background-color: red;
}

#green{
    background-color: green;
}

.red{
    background-color: red;
}

.green{
  background-color: green;
}

 .custom-menu{
    display:none;
    z-index:1000;
    position:absolute;
    overflow:hidden;
    border:1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #fff;
    color:#333;
    border-radius: 5px;
    padding:0;
  }

 .custom-menu li{
    padding:8px 12px;
    cursor:pointer;
    list-style-type:none;
   transition:all .3s ease;
 }

 .custom-menu li:hover{
    background-color: #DEF;
  }

Check this duplicate out: http://stackoverflow.com/questions/4235426/how-can-i-capture-the-right-click-event-in-javascript — J0N3X, Apr 21 '16 at 13:49
I mentioned in the question that I have already implemented `preventdefault` and it did not work on the full calender `(.fc-event)` but it does trigger on the `(document)`. But that is not the issue, the issue is the color change. — Umar Aftab, Apr 21 '16 at 13:53

ZapZap · Accepted Answer · 2016-04-21T14:08:51.717

0

It seems you got a bit confused? I've done some fixes to your code as I think it should be.

 // If the menu element is clicked
$("ul.custom-menu li").click(function() {

 // $event.css('background-color', color);
 switch($(this).attr("data-action")) {


    case "red": 

     // You're were getting the value of "data-color" and saving it into $event
     // also you were assigning variable red, not the string
     //var $event = $(".fc-event");
     $(this).css("background-color","red");
     //   alert("first"); break;

    case "green": 

  //  alert("second"); break;

 }
  $(".custom-menu").hide(100);
});

edited Apr 21 '16 at 14:08

answered Apr 21 '16 at 13:57

ZapZap

56
4

It has been mind boggling me, because I have spent a lot of time doing this.Could have confused myself. – Umar Aftab Apr 21 '16 at 13:59
One more thing though..it changes the color of all the events....how can I leave it for that one particular event...and how can I have that color persist. – Umar Aftab Apr 21 '16 at 14:01
If you want it to change the color of the same element you clicked you would use $(this). Not sure what you mean with persist (answer update with $(this)) – ZapZap Apr 21 '16 at 14:08
1

By persist I mean, when I refresh the page it just goes back to the original color. For that do I need to store that in the database using json ? – Umar Aftab Apr 21 '16 at 14:12
Yes, you would need any kind of storage like a db. If you don't want it permanent and you can use server side code, you could save them in session. Or worse case scenario cookies. – ZapZap Apr 21 '16 at 14:19

Changing the background color of an event in full calendar with right click - NOT WORKING

1 Answers1

Linked