So ändern Sie die Farbe eines Vollkalender-Ereignisses mit der rechten Maustaste

Question

Um die Farbe des jQuery-Ereignisses mit der rechten Maustaste über das Kontextmenü zu ändern, habe ich von hier aus die Antwort mit den meisten Stimmen erhalten.

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

aber ich versuche, die Farbe der auch auf der rechten Maustaste zu ändern, so ist es das, was ich getan habe: -

$(".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); 
}); 

Und der HTML-Code für das Rechtsklick-benutzerdefinierte Ereignis aussieht dies: -

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

Und die CSS für die Farbänderung sieht wie folgt aus:

.red{ 
    background-color: red; 
} 

.green{ 
    background-color: green; 
} 

So sieht es aus, aber im Moment ändert sich die Farbe nicht. Full Calendar view

Answer 1

Hier ist eine Fiddle, wo Sie mit der rechten Maustaste auf ein Ereignis klicken und eine Farbe aus dem Menü auswählen können.

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