Add background color on drop event in fullcalendar
Select subject from the list than drop in fullcalendar the color that is define in attribute not show in calendar default color show.
I want to change the background color dynamically.But problem is if i hardcode the color name in eventColor than its work.if i store the color name in variable and than assign to eventColor its not work.
Fiddle link
//Its not working
myColor = $(this).data("color"); //pick the color
eventColor:myColor
//Its work
eventColor:red
`
var myColor;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
dragRevertDuration: 0,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
myColor = $(this).data("color");
},
eventColor:"red",
eventDragStop: function(event, jsEvent, ui, view) {
if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $("<div class='' data-color='"+myColor+"' >").css({'background-color':+myColor}).appendTo('#external-events-listing').text(event.title);
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', {
title: event.title,
id: event.id,
stick: true
});
}
}
});
jquery fullcalendar
asked Nov 13 '18 at 16:27
AdamAdam
257
add a comment |
Select subject from the list than drop in fullcalendar the color that is define in attribute not show in calendar default color show.
I want to change the background color dynamically.But problem is if i hardcode the color name in eventColor than its work.if i store the color name in variable and than assign to eventColor its not work.
Fiddle link
//Its not working
myColor = $(this).data("color"); //pick the color
eventColor:myColor
//Its work
eventColor:red
`
var myColor;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
dragRevertDuration: 0,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
myColor = $(this).data("color");
},
eventColor:"red",
eventDragStop: function(event, jsEvent, ui, view) {
if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $("<div class='' data-color='"+myColor+"' >").css({'background-color':+myColor}).appendTo('#external-events-listing').text(event.title);
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', {
title: event.title,
id: event.id,
stick: true
});
}
}
});
jquery fullcalendar
asked Nov 13 '18 at 16:27
AdamAdam
257
add a comment |
Select subject from the list than drop in fullcalendar the color that is define in attribute not show in calendar default color show.
I want to change the background color dynamically.But problem is if i hardcode the color name in eventColor than its work.if i store the color name in variable and than assign to eventColor its not work.
Fiddle link
//Its not working
myColor = $(this).data("color"); //pick the color
eventColor:myColor
//Its work
eventColor:red
`
var myColor;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
dragRevertDuration: 0,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
myColor = $(this).data("color");
},
eventColor:"red",
eventDragStop: function(event, jsEvent, ui, view) {
if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $("<div class='' data-color='"+myColor+"' >").css({'background-color':+myColor}).appendTo('#external-events-listing').text(event.title);
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', {
title: event.title,
id: event.id,
stick: true
});
}
}
});
jquery fullcalendar
asked Nov 13 '18 at 16:27
AdamAdam
257
Select subject from the list than drop in fullcalendar the color that is define in attribute not show in calendar default color show.
I want to change the background color dynamically.But problem is if i hardcode the color name in eventColor than its work.if i store the color name in variable and than assign to eventColor its not work.
Fiddle link
//Its not working
myColor = $(this).data("color"); //pick the color
eventColor:myColor
//Its work
eventColor:red
`
var myColor;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
dragRevertDuration: 0,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
myColor = $(this).data("color");
},
eventColor:"red",
eventDragStop: function(event, jsEvent, ui, view) {
if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $("<div class='' data-color='"+myColor+"' >").css({'background-color':+myColor}).appendTo('#external-events-listing').text(event.title);
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', {
title: event.title,
id: event.id,
stick: true
});
}
}
});
jquery fullcalendar
jquery fullcalendar
asked Nov 13 '18 at 16:27
AdamAdam
257
asked Nov 13 '18 at 16:27
AdamAdam
257
asked Nov 13 '18 at 16:27
AdamAdam
257
asked Nov 13 '18 at 16:27
AdamAdam
257
asked Nov 13 '18 at 16:27
AdamAdam
257
257
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
eventColor:myColor
is a setup option. It is used once when the calendar loads - you give the value to fullCalendar, it accepts and sets up the calendar with that data. It isn't used again after that.
If you want to give an external event some custom data which will get used when the event is added to the calendar, you can do it when you initialise the custom events, by adding it to the list of event properties that the item has:
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});
Demo: http://jsfiddle.net/c4woLm35/
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
1
It's a typo:.css({'background-color':+event.color})should not have the+. jsfiddle.net/c4woLm35/1
– ADyson
Nov 14 '18 at 16:39
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285392%2fadd-background-color-on-drop-event-in-fullcalendar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
eventColor:myColor
is a setup option. It is used once when the calendar loads - you give the value to fullCalendar, it accepts and sets up the calendar with that data. It isn't used again after that.
If you want to give an external event some custom data which will get used when the event is added to the calendar, you can do it when you initialise the custom events, by adding it to the list of event properties that the item has:
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});
Demo: http://jsfiddle.net/c4woLm35/
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
1
It's a typo:.css({'background-color':+event.color})should not have the+. jsfiddle.net/c4woLm35/1
– ADyson
Nov 14 '18 at 16:39
|
show 2 more comments
eventColor:myColor
is a setup option. It is used once when the calendar loads - you give the value to fullCalendar, it accepts and sets up the calendar with that data. It isn't used again after that.
If you want to give an external event some custom data which will get used when the event is added to the calendar, you can do it when you initialise the custom events, by adding it to the list of event properties that the item has:
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});
Demo: http://jsfiddle.net/c4woLm35/
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
1
It's a typo:.css({'background-color':+event.color})should not have the+. jsfiddle.net/c4woLm35/1
– ADyson
Nov 14 '18 at 16:39
|
show 2 more comments
eventColor:myColor
is a setup option. It is used once when the calendar loads - you give the value to fullCalendar, it accepts and sets up the calendar with that data. It isn't used again after that.
If you want to give an external event some custom data which will get used when the event is added to the calendar, you can do it when you initialise the custom events, by adding it to the list of event properties that the item has:
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});
Demo: http://jsfiddle.net/c4woLm35/
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
eventColor:myColor
is a setup option. It is used once when the calendar loads - you give the value to fullCalendar, it accepts and sets up the calendar with that data. It isn't used again after that.
If you want to give an external event some custom data which will get used when the event is added to the calendar, you can do it when you initialise the custom events, by adding it to the list of event properties that the item has:
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});
Demo: http://jsfiddle.net/c4woLm35/
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
answered Nov 14 '18 at 10:27
ADysonADyson
23.8k112445
23.8k112445
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
1
It's a typo:.css({'background-color':+event.color})should not have the+. jsfiddle.net/c4woLm35/1
– ADyson
Nov 14 '18 at 16:39
|
show 2 more comments
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
1
It's a typo:.css({'background-color':+event.color})should not have the+. jsfiddle.net/c4woLm35/1
– ADyson
Nov 14 '18 at 16:39
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
Problem is when i first time drag the event to fullcalendar its work fine.But when i drop the event to draggable event all the settings removed.
– Adam
Nov 14 '18 at 13:28
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
"drop the event to draggable"...I have no idea what you mean by this? Did you try the demo? What exactly do you think is wrong with it? Please describe the exact steps to reproduce whatever problem you are trying to tell me about. The demo does exactly what you asked - when you drop the event on the calendar it shows up in the right colour. If you have a separate problem with another part of the code then accept this answer and ask a new question about that.
– ADyson
Nov 14 '18 at 13:42
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
I tried the demo. its works correct. But when i drop the event in the list again all setting gone.
– Adam
Nov 14 '18 at 16:25
link
– Adam
Nov 14 '18 at 16:35
link
– Adam
Nov 14 '18 at 16:35
1
1
It's a typo:
.css({'background-color':+event.color}) should not have the +. jsfiddle.net/c4woLm35/1– ADyson
Nov 14 '18 at 16:39
It's a typo:
.css({'background-color':+event.color}) should not have the +. jsfiddle.net/c4woLm35/1– ADyson
Nov 14 '18 at 16:39
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285392%2fadd-background-color-on-drop-event-in-fullcalendar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
