How to change background color of selected date in FullCalendarHow to change an element's class with JavaScript?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How can I select an element with multiple classes in jQuery?How do I get the current date in JavaScript?Change an HTML5 input's placeholder color with CSSHow to format a JavaScript dateCSS opacity only to background color, not the text on it?Changing the color of an hr element
The term for the person/group a political party aligns themselves with to appear concerned about the general public
Orientable with respect to complex cobordism?
Why were the Night's Watch required to be celibate?
Creating Fictional Slavic Place Names
Strange math syntax in old basic listing
what's the equivalent of helper in LWC?
Looking after a wayward brother in mother's will
Could a guilty Boris Johnson be used to cancel Brexit?
Are there practical reasons to NOT use a stepper motor with lead screw for the X and or Y axes?
Cryptography and patents
Are there mythical creatures in the world of Game of Thrones?
Opposite of "Squeaky wheel gets the grease"
Coding Challenge Solution - Good Range
Should this code fail to compile in C++17?
How to detach yourself from a character you're going to kill?
Humans meet a distant alien species. How do they standardize? - Units of Measure
How can I grammatically understand "Wir über uns"?
Relativistic resistance transformation
Applicants clearly not having the skills they advertise
Explain Ant-Man's "not it" scene from Avengers: Endgame
What is the intuition behind uniform continuity?
How do I get a list of only the files (not the directories) from a package?
The deliberate use of misleading terminology
Is there any Biblical Basis for 400 years of silence between Old and New Testament?
How to change background color of selected date in FullCalendar
How to change an element's class with JavaScript?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How can I select an element with multiple classes in jQuery?How do I get the current date in JavaScript?Change an HTML5 input's placeholder color with CSSHow to format a JavaScript dateCSS opacity only to background color, not the text on it?Changing the color of an hr element
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am trying to change the background color of the selected date in my calendar. In my below code, it highlights all the clicked date, how can I only highlight the last clicked date?
dayClick: function (day)
var mydate = new Date(this[0].getAttribute("data-date"));
var dateArray = mydate.toDateString().split(" ");
document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
document.body.classList.remove("calendar-open");
$month = '' + (mydate.getMonth() + 1);
$day = '' + mydate.getDate();
$year = mydate.getFullYear();
if ($month.length < 2) $month = '0' + $month;
if ($day.length < 2) $day = '0' + $day;
$dates = [$year, $month, $day].join('-');
$('[data-date='+$dates+']').css("color": "red", "backgroundColor": "yellow",);
,
javascript css fullcalendar fullcalendar-3
edited Mar 25 at 13:08
ADyson
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
add a comment |
I am trying to change the background color of the selected date in my calendar. In my below code, it highlights all the clicked date, how can I only highlight the last clicked date?
dayClick: function (day)
var mydate = new Date(this[0].getAttribute("data-date"));
var dateArray = mydate.toDateString().split(" ");
document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
document.body.classList.remove("calendar-open");
$month = '' + (mydate.getMonth() + 1);
$day = '' + mydate.getDate();
$year = mydate.getFullYear();
if ($month.length < 2) $month = '0' + $month;
if ($day.length < 2) $day = '0' + $day;
$dates = [$year, $month, $day].join('-');
$('[data-date='+$dates+']').css("color": "red", "backgroundColor": "yellow",);
,
javascript css fullcalendar fullcalendar-3
edited Mar 25 at 13:08
ADyson
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
add a comment |
I am trying to change the background color of the selected date in my calendar. In my below code, it highlights all the clicked date, how can I only highlight the last clicked date?
dayClick: function (day)
var mydate = new Date(this[0].getAttribute("data-date"));
var dateArray = mydate.toDateString().split(" ");
document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
document.body.classList.remove("calendar-open");
$month = '' + (mydate.getMonth() + 1);
$day = '' + mydate.getDate();
$year = mydate.getFullYear();
if ($month.length < 2) $month = '0' + $month;
if ($day.length < 2) $day = '0' + $day;
$dates = [$year, $month, $day].join('-');
$('[data-date='+$dates+']').css("color": "red", "backgroundColor": "yellow",);
,
javascript css fullcalendar fullcalendar-3
edited Mar 25 at 13:08
ADyson
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
I am trying to change the background color of the selected date in my calendar. In my below code, it highlights all the clicked date, how can I only highlight the last clicked date?
dayClick: function (day)
var mydate = new Date(this[0].getAttribute("data-date"));
var dateArray = mydate.toDateString().split(" ");
document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
document.body.classList.remove("calendar-open");
$month = '' + (mydate.getMonth() + 1);
$day = '' + mydate.getDate();
$year = mydate.getFullYear();
if ($month.length < 2) $month = '0' + $month;
if ($day.length < 2) $day = '0' + $day;
$dates = [$year, $month, $day].join('-');
$('[data-date='+$dates+']').css("color": "red", "backgroundColor": "yellow",);
,
javascript css fullcalendar fullcalendar-3
javascript css fullcalendar fullcalendar-3
edited Mar 25 at 13:08
ADyson
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
edited Mar 25 at 13:08
ADyson
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
edited Mar 25 at 13:08
ADyson
27.1k122846
edited Mar 25 at 13:08
ADyson
27.1k122846
edited Mar 25 at 13:08
ADyson
27.1k122846
27.1k122846
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
asked Mar 24 at 11:21
Eem JeeEem Jee
311418
311418
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You've made this way more complicated than it needs to be.
Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.
Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.
Next, add the class to the current element (represented by this). Simple!
JS:
dayClick: function (day)
$(".day-highlight").removeClass("day-highlight");
$(this).addClass("day-highlight");
CSS:
.day-highlight
background-color: yellow !important;
color: red !important;
(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)
Live demo: http://jsfiddle.net/zs9g5a8k/
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
@EemJee that's a good point, thanks. You can override that by adding!importantto the rules. See the edited answer and updated demo, above.
– ADyson
Mar 26 at 8:57
add a comment |
I have finally solved it this way:
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>Just triggered the .fc-highlight class and it does the trick.
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
add a comment |
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%2f55323256%2fhow-to-change-background-color-of-selected-date-in-fullcalendar%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You've made this way more complicated than it needs to be.
Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.
Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.
Next, add the class to the current element (represented by this). Simple!
JS:
dayClick: function (day)
$(".day-highlight").removeClass("day-highlight");
$(this).addClass("day-highlight");
CSS:
.day-highlight
background-color: yellow !important;
color: red !important;
(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)
Live demo: http://jsfiddle.net/zs9g5a8k/
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
@EemJee that's a good point, thanks. You can override that by adding!importantto the rules. See the edited answer and updated demo, above.
– ADyson
Mar 26 at 8:57
add a comment |
You've made this way more complicated than it needs to be.
Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.
Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.
Next, add the class to the current element (represented by this). Simple!
JS:
dayClick: function (day)
$(".day-highlight").removeClass("day-highlight");
$(this).addClass("day-highlight");
CSS:
.day-highlight
background-color: yellow !important;
color: red !important;
(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)
Live demo: http://jsfiddle.net/zs9g5a8k/
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
@EemJee that's a good point, thanks. You can override that by adding!importantto the rules. See the edited answer and updated demo, above.
– ADyson
Mar 26 at 8:57
add a comment |
You've made this way more complicated than it needs to be.
Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.
Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.
Next, add the class to the current element (represented by this). Simple!
JS:
dayClick: function (day)
$(".day-highlight").removeClass("day-highlight");
$(this).addClass("day-highlight");
CSS:
.day-highlight
background-color: yellow !important;
color: red !important;
(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)
Live demo: http://jsfiddle.net/zs9g5a8k/
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
You've made this way more complicated than it needs to be.
Simply define a CSS class which will set the colours as you wish them to be when added to a day's HTML element.
Then, in the dayClick function, first find all elements which have that class, and remove the class from them. That will stop it showing on previously clicked days.
Next, add the class to the current element (represented by this). Simple!
JS:
dayClick: function (day)
$(".day-highlight").removeClass("day-highlight");
$(this).addClass("day-highlight");
CSS:
.day-highlight
background-color: yellow !important;
color: red !important;
(!important is necessary to override the colour highlight on the current date which is set by fullCalendar automatically.)
Live demo: http://jsfiddle.net/zs9g5a8k/
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
edited Mar 26 at 8:57
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
answered Mar 25 at 13:12
ADysonADyson
27.1k122846
27.1k122846
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
@EemJee that's a good point, thanks. You can override that by adding!importantto the rules. See the edited answer and updated demo, above.
– ADyson
Mar 26 at 8:57
add a comment |
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
@EemJee that's a good point, thanks. You can override that by adding!importantto the rules. See the edited answer and updated demo, above.
– ADyson
Mar 26 at 8:57
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
Thanks for this. But selecting the current date doesn't change the background color.
– Eem Jee
Mar 26 at 1:24
1
1
@EemJee that's a good point, thanks. You can override that by adding
!important to the rules. See the edited answer and updated demo, above.– ADyson
Mar 26 at 8:57
@EemJee that's a good point, thanks. You can override that by adding
!important to the rules. See the edited answer and updated demo, above.– ADyson
Mar 26 at 8:57
add a comment |
I have finally solved it this way:
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>Just triggered the .fc-highlight class and it does the trick.
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
add a comment |
I have finally solved it this way:
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>Just triggered the .fc-highlight class and it does the trick.
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
add a comment |
I have finally solved it this way:
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>Just triggered the .fc-highlight class and it does the trick.
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
I have finally solved it this way:
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>Just triggered the .fc-highlight class and it does the trick.
$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>$(document).ready(function()
$('#calendars').fullCalendar(
header:
left: 'prev',
center: 'title',
right: 'next'
,
selectable: true,
);
);.fc-highlight
background: green !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>answered Mar 26 at 1:34
Eem JeeEem Jee
311418
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
answered Mar 26 at 1:34
Eem JeeEem Jee
311418
311418
add a comment |
add a comment |
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%2f55323256%2fhow-to-change-background-color-of-selected-date-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
