通过右键单击更改完整日历中事件的背景颜色 - 不起作用

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

本文关键字：事件 背景 颜色 不起作用 日历 右键 单击      更新时间：2023-09-26

整个日历中的所有事件都由类 .fc-event 表示，当我想将右键单击功能绑定到 .fc-event 时，它不起作用，并且 JS 的阻止默认操作不会触发。所以我所做的是我用（document）.bind 替换了它，这似乎确实触发了右键单击上下文菜单。但是，主要问题是当我在右键单击对象中单击红色或绿色时，它确实会触发警报。 但是颜色不会改变。我需要更改活动颜色的帮助。

问候

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

JS就是这样，显然我已经从不同的帖子中获得了帮助，但无法显示红色。

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

CSS如下：-

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

看来你有点困惑？我已经对您的代码进行了一些我认为应该的修复。

 // 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);
});
相关文章：