How to change the color of a fullcalendar event on right click

Question

In order to change the color of the jQuery event on right click using context menu , I got some assistance from here with the answer with the most votes.

Making custom right-click context menus for my web-app

However, I am trying to change the color of the even on right click so this is what I did :-

$(".custom-menu li").click(function(){

// This is the triggered action name
switch($(this).attr("data-action")) {

    // A case for each action. Your actions here
    case "red"  : 

    //alert("RED");
    $('#calendar').fullCalendar({
        editable: false,
        backgroundColor: "#800637"
    });
    break;


    case "green": 

    $('#calendar').fullCalendar({
        editable: false,
        backgroundColor: "#00ff00"
    });
    break;
}

// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});

And the HTML for the right click custom event looks like this :-

<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 CSS for the color change looks like this :

.red{
  background-color: red;
}

.green{
   background-color: green;
}

This is how it looks but at the moment the color does not change. Full Calendar view

He means, that a javascript object notation cannot end with `, }`. The last property value of an object in literal notation should not have a comma. If you remove the last comma (after "green" and "#800637"), the syntax will be correct. ;-) — Jeroen, Mar 29 '16 at 12:51
`backgroundColor: "green", }` is false syntax, the last comma may cause errors. just remove the comma on the last entry: `backgroundColor: "green" }` — Alex, Mar 29 '16 at 12:51
Oh ok, I corrected that, but the color still does not change. — Umar Aftab, Mar 29 '16 at 12:55

score 0 · Accepted Answer · answered Mar 29 '16 at 13:40

Here is a fiddle where you can right-click on an event and choose a color from the menu.

https://jsfiddle.net/uucm2c6m/

/*
    Contains modified code from
    http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app?answertab=active#tab-top
*/

$('#calendar').fullCalendar({
  defaultDate: '2016-03-29',
  events: [{
    title: 'Right-click on me!',
    start: '2016-03-29'
  }],
});

// Trigger action when the contexmenu is about to be shown
$('a.fc-event').bind("contextmenu", function(event) {
  // Avoid the real one
  event.preventDefault();
  // Show contextmenu, save the a.fc-event $(this) for access later
  $(".custom-menu").data('event', $(this)).finish().toggle(100).
    // In the right position (the mouse)
  css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  });
});

// If the document is clicked somewhere
$(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() {
  // ul.custom-menu data has 'event'
  var $event = $(this).parent().data('event');
  // This is the triggered action name

  var color = $(this).attr('data-color') || 'lightblue'; // Default to light blue
  // Set the color for the event
  // if the event has multiple sections (spans multiple weeks/days, depending on view)
  // It will only change color of currently right-clicked section...
  // See http://stackoverflow.com/questions/36128815/highlight-fullcalendar-events-that-expands-over-multiple-rows-columns/36185661
  // for ideas on how to approach changing the color of all related sections if needed
  $event.css('background-color', color);

  // Hide it AFTER the action was triggered
  $(".custom-menu").hide(100);
});

Let me try this out..will give you a 5 star if it works because the biding does not work on fc-event for whatever reason and does not give any errors in the console log either. — Umar Aftab, Mar 29 '16 at 13:46
The fiddle processes the JS code on DOM ready. I tried it in Firefox, Chromium, and IE10 and it worked ok. Right-click on the event and the menu should appear, click a color to change the event background to it — smcd, Mar 29 '16 at 13:50
This is for a specific event though, let me see if I can get it to be dynamic. — Umar Aftab, Mar 29 '16 at 13:51
Are you wanting to change the background color of the whole calendar or any event that is right-clicked? — smcd, Mar 29 '16 at 14:07
The event that is right clicked. but the `$('fc-event').bind` does not trigger the context menu `$(document).bind` does — Umar Aftab, Mar 29 '16 at 14:19
And at the same time the color does not change.. let me add my css to the question as well. I apologize for not adding it ! — Umar Aftab, Mar 29 '16 at 14:20
The only issue I was having was that the right click would not prevent the default action for the pop up box. — Umar Aftab, Apr 21 '16 at 13:19

How to change the color of a fullcalendar event on right click

1 Answers1

Linked