[英]Changing the background color of an event in full calendar with right click - NOT WORKING
All the events in the full calendar are denoted by the class .fc-event and when I want to bind the right click functionality to .fc-event it does not work and the prevent default action from the JS does not trigger. 完整日历中的所有事件都由类.fc-event表示,当我要将右键单击功能绑定到.fc-event时,它将无法正常工作,并且JS的prevent default操作不会触发。 So what I did is that I replaced it with (document).bind and that does seem to trigger the right click contextmenu. 所以我所做的是用(document).bind替换了它,这似乎确实触发了右键单击上下文菜单。 However, the main issue is that when I click red or green in the right click object it does trigger the alert. 但是,主要问题是,当我在右键单击对象中单击红色或绿色时,它会触发警报。 But the color does not change. 但是颜色不会改变。 I need assistance in changing the color of the event. 我需要更改活动颜色的帮助。
Regards, 问候,
I have created a custom menu in HTML :- 我已经在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>
And the JS is as such, obviously I have taken assistance from different post but could not get the red color to show up. 而且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);
});
And the CSS is as follows:- 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;
}
It seems you got a bit confused? 看来您有点困惑? I've done some fixes to your code as I think it should be. 我已经对您的代码进行了一些修复,正如我认为的那样。
// 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.