[英]How to change the color of a fullcalendar event on right click
為了使用上下文菜單在右鍵單擊上更改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如下所示:-
<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>
並且用於顏色更改的CSS如下所示:
.red{
background-color: red;
}
.green{
background-color: green;
}
這是它的外觀,但目前顏色沒有改變。 完整的日歷視圖
這是一個小提琴,您可以在該事件上單擊鼠標右鍵,然后從菜單中選擇一種顏色。
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.