如何在右键单击时更改fullcalendar事件的颜色

为了使用上下文菜单右键单击更改jQuery事件的颜色，我从这里获得了一些帮助，得到的答案最多。

为我的网络应用程序制作自定义右键单击上下文菜单

但是，我试图改变右键单击的颜色，这就是我所做的： –

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

右键单击自定义事件的HTML如下所示： –

 
 
Red/Rouge
 
Green/Verg
  

颜色变化的CSS看起来像这样：

 .red{ background-color: red; } .green{ background-color: green; } 

这是它的外观，但目前颜色不会改变。 完整的日历视图

Answer 1

这是一个小提琴，您可以右键单击某个事件并从菜单中选择一种颜色。

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