Sağ taraftaki bir fullcalendar olayının rengi nasıl değiştirilir?

Question

jQuery olayının rengini değiştirmek için sağdaki bağlam menüsünü kullanarak sağ tıklatıp, en çok oyu alan cevapla buradan yardım aldım.

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

Ancak, ben bile sağ tıklama rengini değiştirmek çalışıyorum bu yüzden bu ne yaptım: -

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

Ve özel etkinlik gibi görünüyor sağ tıklama için HTML Bu: -

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

Ve renk değişikliği için CSS şuna benzer:

.red{ 
    background-color: red; 
} 

.green{ 
    background-color: green; 
} 

Göründüğü gibi değil, şu anda renk değişmiyor. Full Calendar view

Answer 1

Burada bir olaya sağ tıklayıp menüden bir renk seçebileceğiniz bir keman var.

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